博文

目前显示的是标签为“响应式”的博文

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