소개 - 생활 웹디자인

스킨 만들기의 기본

텀블러는 아래와 같이 text, photos, links, quotes, chat, audio, and video 7가지 포스트 타입이 있습니다. 각 타입에 맞는 변수와 블럭을 이용하여 테마를 만들 수 있습니다.

그리고 테마를 만드는데 사용되는 두가지 타입의 특별한 오퍼레이터가 있는데 그것은 변수와 블럭입니다.

변수(variales)는 블로그의 타이틀이나 설명과 같은 다이나믹한 데이터를 출력하는데 사용됩니다.

<html>
    <head>
        <title>{Title}</title>
    </head>
    <body>
        ...
    </body>
</html>

블럭(blocks)은 포스트 영역과 같은 데이터 셋을 위해 HTML의 블럭을 만들어낼 뿐만 아니라 HTML블럭을 "이전페이지", "다음페이지"와 같이 조건부로 생성하기도 합니다.

<html>
    <body>
        <ol id="posts">
            {block:Posts}
                <li> ... </li>
            {/block:Posts}
        </ol>
    </body>
</html>

다음은 스킨의 뼈대과 되는 markup입니다. 아래 코드를 디자인에 맞게 수정하여 사용할 수 있습니다.

<html>
    <head>
        <title>{Title}</title>
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}
            <meta name="description" content="{MetaDescription}" />
        {/block:Description}
    </head>
    <body>
        <h1>{Title}</h1>

        {block:Description}
            <p id="description">{Description}</p>
        {/block:Description}

        <ol id="posts">
            {block:Posts}
                {block:Text}
                    <li class="post text">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        {Body}
                    </li>
                {/block:Text}

                {block:Photo}
                    <li class="post photo">
                        <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Photo}

                {block:Panorama}
                    <li class="post panorama">
                        {LinkOpenTag}
                            <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
                        {LinkCloseTag}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Panorama}

                {block:Photoset}
                    <li class="post photoset">
                        {Photoset-500}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Photoset}

                {block:Quote}
                    <li class="post quote">
                        "{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                    </li>
                {/block:Quote}

                {block:Link}
                    <li class="post link">
                        <a href="{URL}" class="link" {Target}>{Name}</a>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </li>
                {/block:Link}

                {block:Chat}
                    <li class="post chat">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul class="chat">
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </li>
                {/block:Chat}

                {block:Video}
                    <li class="post video">
                        {Video-500}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Video}

                {block:Audio}
                    <li class="post audio">
                        {AudioPlayerBlack}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Audio}
            {/block:Posts}
        </ol>

        <p id="footer">
            {block:PreviousPage}
                <a href="{PreviousPage}">&#171; Previous</a>
            {/block:PreviousPage}

            {block:NextPage}
                <a href="{NextPage}">Next &#187;</a>
            {/block:NextPage}

            <a href="/archive">Archive</a>
        </p>
    </body>
</html>

소개

스킨 만들기의 기본

댓글