Blogger设置响应式主题模板及首页改为文章提要和阅读全文
一、修改模板为响应式
Blogger官方的一些主题模板对移动端访问不太友好，而且默认的移动版主题也不太美观。所以，就拿自己的模板来修改吧。这样至少全平台blog都是一个样式风格。
思路就是在css中加入移动端样式，这时候需要把模板样式中的div容器的width是绝对值的，给它改成在移动设备下width为100%显示；不需要的边栏和模块设置为隐藏。例如：
/* 新增自适应样式*/@media screen and (max-width:768px){
body{min-width:100%;width:100%;}
#wrapper{min-width:100%;max-width:100%;width:100%;}
#center,#center #squeeze{width:100%;}
#center{padding-left:0;padding-right:0;}
#sidebar-left,#sidebar-right{display:none;}
}
<b:skin><![CDATA[...
]]></b:skin>
二、首页文章列表非全文显示
我的模板在blog首页默认全文显示的，碰到长的文章，整个首页会拉的非常长，看起来也不太美观。
网上搜到的Blogger传统的显示文章提要大概是这两个思路。
其一，发文章的时候，把文章内容前面一两个段落用“< ! -- more -- >”截一下。然后模板里设置首页读取文章摘要。
其二、是使用js方法，除了要修改模板，还需要引入一段js代码，操作也不太方便。
现在，blogger对于文章列表以提要显示，已经做得很好。我使用的就是blogger默认移动版主题的应用方案。即在文章显示处增加一个判断，首页和list页以提要显示，除此全文显示。
例如，选择，Blogger后台-主题背景-修改html，做如下修改：
原来模板里文章全文显示的模块：
<div class='content'><p>
<data:post.body/>
</p>
</div>
<div class='content'><p>
<b:if cond='data:blog.pageType == "index"'>
<div class='post-body'>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</p>
</div>
<div class='content'><p>
<b:if cond='data:blog.pageType == "index"'>
<div class='mobile-index-contents'>
<b:if cond='data:post.thumbnailUrl'>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</div>
</b:if>
<div class='post-body'>
<b:if cond='data:post.snippet'>
<data:post.snippet/>
</b:if>
</div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</p>
</div>
/* 缩略图样式*/.mobile-index-contents{margin-right:25px;min-height:25px}
.mobile-index-thumbnail{float:left;margin:.2em 1em 0 0}
.mobile-index-thumbnail img{width:72px !important;}
.post-body{width:100%;_overflow:hidden}
.jump-link{float:right;}
这样，工作就算完成了。
评论 (1)
暂无评论，快来抢沙发吧！