생활 웹디자인

aside 영역

토픽 생활 웹디자인 > 테마 메뉴얼 > 텀블러 테마 만들기

aside영역에서는 부가적인 정보 즉 내가 팔로우 하고 있는 블로그, 내가 좋아하는 포스트, 그룹블로그의 경우 블로그 멤버 등을 출력하고 있습니다.

한가지 유의할 점은 텀블러는 기본적으로 두가지 타입의 블로그가 있다고 보면 됩니다. 텀블러에 가입하면 만들어지는 "기본 블로그"가 있고, 그 외 추가적으로 만들어지는 "보조 블로그"가 있습니다. "기본 블로그"는 그룹 블로그로 이용할 수 없고, 그 외 추가적으로 만든 블로그에서는 팔로잉하고 있는 블로그 출력이나 내가 좋아하는 포스트를 공유할 수 없습니다. 그룹과 개인이라는 함께할 수 없는 특성 때문이 아닐까 하는 생각이 듭니다. 그러니까 이 세가지가 동시에 출력되는 상황은 없습니다.
기본 블로그와 보조 블로그에 대한 좀 더 자세한 내용은 이곳을 참고 하세요

해당영역과 html구조

아래 코드는
개인 블로그에서는 "내가 좋아하는 블로그", "내가 좋아하는 포스트"가 출력되고,
그룹 블로그에서는 "그룹 멤버"가 출력됩니다.

<aside>
    {block:GroupMembers}
    <div class="group_members">
    <h3>Group members</h3>
    {block:GroupMember}
      <a href="{GroupMemberURL}" title="{GroupMemberTitle}">
      <img src="{GroupMemberPortraitURL-48}" alt="{GroupMemberName}"/></a> 
    {/block:GroupMember}
    </ul>
    </div>
    {/block:GroupMembers}
    
    {block:Following}
    <div class="following">
    <h3>Blogs I follow</h3>
    {block:Followed}
    <div class="followed">
        <img src="{FollowedPortraitURL-48}"/>
        <a href="{FollowedURL}">{FollowedName}</a>
    </div>    
    {/block:Followed}
    </div>
    {/block:Following}    
    
    {block:Likes}
    <div id="likes_container" class="mylikes">
        <h3>Stuff I like</h3>
        {Likes limit="3" summarize="100" width="100"}
        <a class="more" href="http://www.tumblr.com/liked/by/{Name}">
            See more stuff I like
        </a>
    </div>
    {/block:Likes}
</aside>

변수 설명

Group Blogs

{block:GroupMembers} ... {/block:GroupMembers}
공개 그룹 블로그인 경우 출력합니다.

{block:GroupMember} ... {/block:GroupMember}
공개 그룹 블로그의 멤버를 반복해서 출력합니다.

{GroupMemberURL}
멤버들의 블로그 주소를 출력합니다.

{GroupMemberTitle}
멤버들의 블로그 제목을 출력합니다.

{GroupMemberName}
멤버들의 블로그 이름을 출력합니다.

{GroupMemberPortraitURL-48}
멤버들의 프로필 이미지 주소를 48 X 48사이즈로 출력합니다.

Following

{block:Following} ... {/block:Following}
팔로잉 하고 있는 블로그를 출력합니다.

{block:Followed} ... {/block:Followed}
팔로잉 하고 있는 각각의 블로그를 출력합니다.

{FollowedURL}
팔로잉하고 있는 블로그의 주소

{FollowedTitle}
팔로잉하고 있는 블로그의 타이틀

{FollowedName}
팔로잉하고 있는 블로그의 사용자 이름

{FollowedPortraitURL-48}
팔로잉 하고있는 블로그의 48X48픽셀 크기의 프로필 이미지

Likes

{block:Likes} {/block:Likes}
"계정 설정 > 대시보드"에서 내가 좋아하는 포스트를 공유하도록 설정한 경우 출력합니다.

{Likes}
좋아요한 포스트를 출력

{Likes limit="5"}
좋아요한 포스트를 최대 5개 출력
Maximum: 10

{Likes width="200"}
좋아요한 포스트중 오디오나 비디오를 포함한 플레이어의 사이즈 지정
Scale images with CSS max-width or similar.

{Likes summarize="100"}
좋아요한 포스트의 요약텍스트 사이즈 지정
Maximum: 250

 

댓글

댓글 본문