스킨 만들기의 기본
텀블러는 아래와 같이 text, photos, links, quotes, chat, audio, and video 7가지 포스트 타입이 있습니다. 각 타입에 맞는 변수와 블럭을 이용하여 테마를 만들 수 있습니다.
그리고 테마를 만드는데 사용되는 두가지 타입의 특별한 오퍼레이터가 있는데 그것은 변수와 블럭입니다.
변수(variales)는 블로그의 타이틀이나 설명과 같은 다이나믹한 데이터를 출력하는데 사용됩니다.
1 2 3 4 5 6 7 8 | <html> <head> <title>{Title}</title> </head> <body> ... </body></html> |
블럭(blocks)은 포스트 영역과 같은 데이터 셋을 위해 HTML의 블럭을 만들어낼 뿐만 아니라 HTML블럭을 "이전페이지", "다음페이지"와 같이 조건부로 생성하기도 합니다.
1 2 3 4 5 6 7 8 9 | <html> <body> <ol id="posts"> {block:Posts} <li> ... </li> {/block:Posts} </ol> </body></html> |
다음은 스킨의 뼈대과 되는 markup입니다. 아래 코드를 디자인에 맞게 수정하여 사용할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | <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}">« Previous</a> {/block:PreviousPage} {block:NextPage} <a href="{NextPage}">Next »</a> {/block:NextPage} <a href="/archive">Archive</a> </p> </body></html> |
