구글 블로그 목록 페이지 날짜, 카테고리, 글제목만 보이게 하기




구글 블로그를 시작하고 블로그를 둘러보면 가장 첫번째로 마음에 안드는게 목록 페이지 입니다.


구글 블로그의 기본 목록 페이지는 글 내용과 이미지 전부를 다 보여주기때문에 글을 찾을때 가독성이 떨어지기 때문이죠.


<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
</div></div>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-posts&quot;&gt;
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>
<!-- Ad -->
<b:if cond='data:post.includeAd'>
<div class='inline-ad'>
<data:adCode/>
</div>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
</div>


ctrl 키와 f 키를 누르시고 <!-- posts -->나 blog-posts hfeed를 찾으면 위와 같이 되어 있을텐데,


    <!-- posts -->
<div class='blog-posts hfeed'>
<b:if cond='!data:blog.searchLabel'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
</b:if>
</b:if>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<div class='post-outer'>
<!-- 목록 페이지 타이틀만 시작 -->
<b:if cond='data:blog.searchLabel'>
<h3>
<data:post.timestamp/> <b:if cond='data:post.labels'>
[<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + &quot;?max-results=7&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if></b:loop>]  </b:if><a expr:href='data:post.url'><data:post.title/></a>
</h3>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<h3>
<data:post.timestamp/> <b:if cond='data:post.labels'>
[<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + &quot;?max-results=7&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if></b:loop>]  </b:if> <a expr:href='data:post.url'><data:post.title/></a>
</h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!-- 목록 페이지 타이틀만 끝 -->
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>
<!-- Ad -->
<b:if cond='data:post.includeAd'>
<div class='inline-ad'>
<data:adCode/>
</div>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
</div>

찾은 것을 위의 것으로 바꾸시면 됩니다.

<b:includable id='main' var='top'> 안의 <!-- posts -->와 <!-- navigation --> 사이만 수정하셔야 합니다.

css는 따로 해주셔야하고 제가 사용하는 피드 목록은 <h3> 태그를 사용하기 때문에 마음에 안드시면 기본의 <h2> 태그로 바꾸시거나 원하는대로 수정하시면 됩니다.

댓글 없음:

댓글 쓰기