Episode.xsl: 두 판 사이의 차이

Vaquita Wiki
← 이전 편집다음 편집 →
편집 요약 없음
편집 요약 없음
2번째 줄: 2번째 줄:
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"  
<xsl:stylesheet version="1.0"  
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    xmlns="http://www.w3.org/1999/xhtml">


     <xsl:output method="html" encoding="UTF-8" indent="yes" doctype-system="about:blank"/>
     <xsl:output method="html" encoding="UTF-8" indent="yes"/>


     <!-- 루트 템플릿 -->
     <xsl:template match="/episode">
    <xsl:template match="/">
        <!-- lang 속성이 Arabic인 경우 rtl(우->좌), 아닐 경우 ltr(좌->우) 설정 -->
         <html lang="ko">
        <xsl:variable name="direction">
            <xsl:choose>
                <xsl:when test="@lang = 'Arabic'">rtl</xsl:when>
                <xsl:otherwise>ltr</xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
 
        <!-- HTML lang 속성 매핑 (Arabic -> ar, 기타 -> ko/en 등) -->
        <xsl:variable name="htmlLang">
            <xsl:choose>
                <xsl:when test="@lang = 'Arabic'">ar</xsl:when>
                <xsl:otherwise>ko</xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
 
         <html lang="{$htmlLang}" dir="{$direction}">
         <head>
         <head>
             <meta charset="UTF-8"/>
             <meta charset="UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
             <title><xsl:value-of select="title"/></title>
             <title><xsl:value-of select="episode/title"/></title>
             <style>
             <style>
                 body {
                 body {
                     font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
                     font-family: -apple-system, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
                     background-color: #f8fafc;
                     background-color: #f8fafc;
                     color: #1e293b;
                     color: #1e293b;
                    margin: 0;
                     padding: 40px 20px;
                     padding: 40px 20px;
                     display: flex;
                     display: flex;
28번째 줄: 40번째 줄:
                     max-width: 720px;
                     max-width: 720px;
                     width: 100%;
                     width: 100%;
                     border-radius: 16px;
                     border-radius: 12px;
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
                     border: 1px solid #e2e8f0;
                     border: 1px solid #e2e8f0;
                     padding: 40px;
                     padding: 30px;
                     box-sizing: border-box;
                     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
                }
                .badge {
                    display: inline-block;
                    background: #e0e7ff;
                    color: #4338ca;
                    font-size: 0.85rem;
                    font-weight: 600;
                    padding: 4px 12px;
                    border-radius: 20px;
                    margin-bottom: 16px;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                 }
                 }
                 h1.title {
                 h1 {
                     font-size: 1.75rem;
                     font-size: 1.6rem;
                    font-weight: 700;
                     color: #0f172a;
                     color: #0f172a;
                    margin: 0 0 24px 0;
                    line-height: 1.35;
                     border-bottom: 2px solid #f1f5f9;
                     border-bottom: 2px solid #f1f5f9;
                     padding-bottom: 16px;
                     padding-bottom: 12px;
                    margin-top: 0;
                 }
                 }
                 .narrative-box {
                 p.narrative {
                     font-size: 1.05rem;
                     font-size: 1.05rem;
                     line-height: 1.8;
                     line-height: 1.9;
                     color: #334155;
                     color: #334155;
                     white-space: pre-line; /* XML 본문의 줄바꿈을 그대로 유지 */
                     white-space: pre-line; /* 본문 줄바꿈 유지 */
                     word-break: keep-all;
                }
                /* Arabic일 경우 추가 가독성 스타일 */
                [dir="rtl"] {
                     text-align: right;
                 }
                 }
             </style>
             </style>
66번째 줄: 66번째 줄:
         <body>
         <body>
             <div class="card">
             <div class="card">
                <span class="badge">Episode</span>
                 <h1><xsl:value-of select="title"/></h1>
                 <h1 class="title">
                 <p class="narrative"><xsl:value-of select="narrative"/></p>
                    <xsl:value-of select="episode/title"/>
                </h1>
                 <div class="narrative-box">
                    <xsl:value-of select="episode/narrative"/>
                </div>
             </div>
             </div>
         </body>
         </body>

2026년 8월 20일 (목) 17:34 판

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:output method="html" encoding="UTF-8" indent="yes"/>

    <xsl:template match="/episode">
        <!-- lang 속성이 Arabic인 경우 rtl(우->좌), 아닐 경우 ltr(좌->우) 설정 -->
        <xsl:variable name="direction">
            <xsl:choose>
                <xsl:when test="@lang = 'Arabic'">rtl</xsl:when>
                <xsl:otherwise>ltr</xsl:otherwise>
            </xsl:choose>
        </xsl:variable>

        <!-- HTML lang 속성 매핑 (Arabic -> ar, 기타 -> ko/en 등) -->
        <xsl:variable name="htmlLang">
            <xsl:choose>
                <xsl:when test="@lang = 'Arabic'">ar</xsl:when>
                <xsl:otherwise>ko</xsl:otherwise>
            </xsl:choose>
        </xsl:variable>

        <html lang="{$htmlLang}" dir="{$direction}">
        <head>
            <meta charset="UTF-8"/>
            <title><xsl:value-of select="title"/></title>
            <style>
                body {
                    font-family: -apple-system, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
                    background-color: #f8fafc;
                    color: #1e293b;
                    padding: 40px 20px;
                    display: flex;
                    justify-content: center;
                }
                .card {
                    background: #ffffff;
                    max-width: 720px;
                    width: 100%;
                    border-radius: 12px;
                    border: 1px solid #e2e8f0;
                    padding: 30px;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
                }
                h1 {
                    font-size: 1.6rem;
                    color: #0f172a;
                    border-bottom: 2px solid #f1f5f9;
                    padding-bottom: 12px;
                    margin-top: 0;
                }
                p.narrative {
                    font-size: 1.05rem;
                    line-height: 1.9;
                    color: #334155;
                    white-space: pre-line; /* 본문 줄바꿈 유지 */
                }
                /* Arabic일 경우 추가 가독성 스타일 */
                [dir="rtl"] {
                    text-align: right;
                }
            </style>
        </head>
        <body>
            <div class="card">
                <h1><xsl:value-of select="title"/></h1>
                <p class="narrative"><xsl:value-of select="narrative"/></p>
            </div>
        </body>
        </html>
    </xsl:template>

</xsl:stylesheet>
원본 주소 "https://app.vaquitalab.com/mediawiki/index.php?title=Episode.xsl&oldid=1559"