GG圈

2006年12月7日星期四

blogger:在Blogger Beta的独立文章页中增加所在位置导航

这个功能可以使你在每篇文章的独立页中增加一个所在位置的导航链接，此项功能一般常见于大型的、路径比较复杂的网站，实际上在 Blogger 上不存在这种问题，但如果你愿意也还是可以加上一个，以方便你的浏览。

第一步：
进入 Template->Edit HTML ，备份，勾选 Expand Widget Templates 展开，找到 Blog1 部件 (<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">) 。将下列代码紧贴其后。

<b:includable id='breadcrumbs' var='post'>
  <b:if cond='data:blog.pageType == "item"'>
      <p class='breadcrumbs'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>
          You are here:
          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  & g t ;
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == "true"'>
              <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
            </b:if>
          </b:loop>
          <b:if cond='data:post.title'>
            & g t ;  <b><data:post.title/></b>
          </b:if>
        </b:if>
      </span>
      </p>
  </b:if>
</b:includable>

然后将& g t ;中的空格全部取消。

第二部：
接着再找到这句

<b:if cond='data:post.dateHeader'>

将下列代码紧贴其上（如图所示）：

<b:include data='post' name='breadcrumbs'/>

第三步：
将下列 CSS 代码粘贴在<b:skin></b:skin>之间任何合适的位置（如图所示）：

.breadcrumbs {
border-bottom:1px dotted $bordercolor;
margin:0 0 0.5em;
padding:0 0 0.5em;
}

具体样式可以自行修改，保存更新，大功告成。
如果你的一篇文章有多个 Label 时，它只会显示最后一个，如果你的文章没有加上 Label 的话，它就不会显示了。

希望上文对你有所帮助，如有任何疑问可留言告知，我会尽快给予回复。

阅读全文...

blogger:在Blogger Beta的独立文章页中增加所在位置导航

<b:includable id='breadcrumbs' var='post'>
  <b:if cond='data:blog.pageType == "item"'>
      <p class='breadcrumbs'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>
          You are here:
          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  & g t ;
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == "true"'>
              <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
            </b:if>
          </b:loop>
          <b:if cond='data:post.title'>
            & g t ;  <b><data:post.title/></b>
          </b:if>
        </b:if>
      </span>
      </p>
  </b:if>
</b:includable>

然后将& g t ;中的空格全部取消。

第二部：
接着再找到这句

<b:if cond='data:post.dateHeader'>

将下列代码紧贴其上（如图所示）：

<b:include data='post' name='breadcrumbs'/>

第三步：
将下列 CSS 代码粘贴在<b:skin></b:skin>之间任何合适的位置（如图所示）：

.breadcrumbs {
border-bottom:1px dotted $bordercolor;
margin:0 0 0.5em;
padding:0 0 0.5em;
}

阅读全文...

blogger:Blogger Beta中标签、搜索结果与存档页面的优化（一）

这部份内容较多，所以我分几部分来写。今天先来介绍：

（一）如何在标签、搜索结果与存档页面中只显示文章的标题
我们都知道如果在 Blogger Beta 中进行搜索或选择任何一个分类标签时，结果总会是以全文来显示的，存档文件也是如此。如果我们的文章数量很多内容又长，再加上其中也许会有大量的图片或音频视频的内容，这样就会大大的影响了页面读取的时间。而且在众多内容面前，你的读者们也不可能马上就找到感兴趣的文章，浏览效率因此降低了。如果我们能让它只显示文章的标题，并给出其固定链接，一目了然，这个问题自然就得到解决了。你可以先在本博客上看到效果，如果感觉不错，下面就开始进行操作：

进入模板HTML编辑界面，备份，展开，找到如下一段代码：

<b:widget id='Blog1' locked='false'
title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
 <!-- posts -->
 <div id='blog-posts'>
   <b:loop values='data:posts' var='post'>
     <b:if cond='data:post.dateHeader'>
       <h2 class='date-header'>
          <data:post.dateHeader/></h2>
     </b:if>

     <b:include data='post' name='post'/>

     <b:if cond='data:blog.pageType == "item"'>
       <b:if cond='data:post.allowComments'>
         <b:include data='post' name='comments'/>
       </b:if>
     </b:if>
   </b:loop>
 </div>

将其中红色的部分替换成以下代码：

<b:if cond='data:blog.homepageUrl !=
                data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
         <data:post.title/></a><br/><br/>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>
 <b:else/>
     <b:include data='post' name='post'/>
 </b:if>

保存更新，这时你的标签、搜索与存档页面的显示结果就都是以文章标题来显示了。下一节我们将介绍如何突破每页20篇文章的限制，请继续留意。

希望上文对你有所帮助，如有任何疑问可留言告知，我会尽快给予回复。

阅读全文...

blogger:Blogger Beta中标签、搜索结果与存档页面的优化（一）

<b:widget id='Blog1' locked='false'
title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
 <!-- posts -->
 <div id='blog-posts'>
   <b:loop values='data:posts' var='post'>
     <b:if cond='data:post.dateHeader'>
       <h2 class='date-header'>
          <data:post.dateHeader/></h2>
     </b:if>

     <b:include data='post' name='post'/>

     <b:if cond='data:blog.pageType == "item"'>
       <b:if cond='data:post.allowComments'>
         <b:include data='post' name='comments'/>
       </b:if>
     </b:if>
   </b:loop>
 </div>

将其中红色的部分替换成以下代码：

<b:if cond='data:blog.homepageUrl !=
                data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
         <data:post.title/></a><br/><br/>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>
 <b:else/>
     <b:include data='post' name='post'/>
 </b:if>

阅读全文...