博客页面微调整记录(20160330)

原本的文章列表页面,是通过more标签进行手工截断,虽然自由程序更高,但感觉在首页就不是很美观,有时候截得多了,有时候少了。

加之最近在使用其他主题的时候,都采用了自动截断的方式,再加上左侧一个小图(好像已经是标配)。所以就干脆将博客也做一些调整。

就采用主流的显示方式吧,左侧图+右侧自动截断的文字。

操作方式

1、安装一个自动提取图片的插件(懒得去改写代码),这里使用的是Thumbnail插件;

2、改写模板文件,基本上就是post.php,page.php,archive.php这三个页面,使用<?php $this->excerpt(180, '...'); ?>进行截断;

3、显示缩略图的代码是:<?php Thumbnail_Plugin::show($this); ?>,插件里面有写着,无图的时候自动显示默然图片;

4、稍微改写写CSS,这个根据实际情况去写,就不写出来了。

由于图片的是存在又拍云,可以自动生成缩略图,所以我就改写了插件,加了个参数自动生成缩略图(在又拍云设置好生成规则)。

效果预览

改造之后的效果如下图,更清楚的就看博客吧。

博客优化

存在的BUG

使用Typecho的内置函数excerpt进行截断,如果原来在文章中有插入more标签的话,那么excerpt函数的就是以more为结尾,截断的内容不会超过more的内容。如果原来more位置靠前,那么有可能截断后的文字会比较少。如上一篇文章(从首页去看)

Thumbnail下载

百度网盘密码:ewhs

360网盘密码:a9a6

立即下载

查看 CSS 博客 Typecho的相关文章

转载本站原创文章请注明:文章转自 灰狼IT路,链接: https://itlu.org/articles/2265.html

已有 12 条评论

  1. 改得不错(*๓´╰╯`๓)♡

  2. 一直以为你这是 wordpress 呢。我手工加 MORE,也自动截……

    1. Typecho从前台页面看,是没什么区别的。不过我底部一直写在是Typecho的啊啊啊

  3. 变得跟我的很像了啊

    1. 好像已经是主流了

  4. 我也一直以为你这是wp。。。

    1. 我的博客不是wp,我的博客不是wp,我的博客不是wp

  5. 以上这些说你的程序是wp的都不是真爱。O(∩_∩)O哈哈~

    1. 都已经拉黑

  6. 看你们更新一篇文章不容易啊。

    1. 工作太忙,下班事情多,偶尔抽空就上来写一写,完全就是周报形式了

添加新评论