仿简书响应式Typecho博客主题(变异版) (2016.6.17更新)

基于官方新版本的变异版已做好啦~
如果大家有什么好的点子或者建议可以留言~~
我们一起完善它!

仿简书主题(变异版),基本上就是照着抄的,更改了些细节的东西。
在经过绛木子的同意下分享出来~~描述啥的按他说的就好啦~·

更多细节:

  • 头像
  • 底部头像
  • 修改部分CSS
  • 修改分页按钮
  • CSS配色

官方版Github


原文地址:http://lixianhua.com/clone_jianshu_theme.html
预览地址:http://minwenlsm.pw/

首页:

首页

文章页:

文章

修复&更新log:

8.31:

修复footer在手机版上错位问题,
修复首页分页按钮的错位问题。

9.1:

新增配色选择(共六种):
默认风格、红色风格、绿色风格、蓝色风格、紫色风格、黑色风格。
18:00:修复风格问题。
新增文章页、独立页面百度分享。

9.5:

修复手机版菜单风格问题。(CSS配色稍有不足~~
修复“首页”不显示图标问题。

9.10:

增加支付宝捐助。
细节修改。

9.12:

自定义显示:显示首页头像、显示文章页头像、显示文章页底部标签、显示支付宝捐款、显示支付宝捐款的二维码、显示百度分享。
支付宝捐款的二维码。

9.26:

评论框可选(默认评论框、多说评论框)。
多说评论框站点、多说embed.js脚本URL路径,可用于本地化。

9.27:

分页风格可选(默认风格、Ajax风格)二选一啦、必须选择一个!都选效果你看着办~。
Ajax防刷新(测试~代码高亮、百度分享将不显示!!以及登录后页面问题)。不建议使用。由爱上书提出。

10.5:

分页风格可选(默认风格、Ajax风格)功能修复。
页面底部信息可选显示/隐藏。

10.10:

Ajax风格防刷新设置功能修复。
404页面移植UC浏览器404风格。(有小问题,比如首页图片、返回上一页的点击不生效问题。)

10.28:

修复评论框,并将首页、文章页评论数同步更改。
修复移植UC404风格,修复上一页,回到首页功能。
去掉旧版百度分享,并增加新版工具集显示。
区分独立页面和文章页面更改显示。
配色风格完善~
增加段落前自动缩进2个空格。
文章图片功能,开启如原版图片仅显示描述,进行点击才显示图片。
代码高亮功能,为原版代码高亮增加开关。
文章页顶部发布作者头像,增加图片地址,获取博主头像显示。
修复文章页底部头像可能导致错位问题。
精简代码。
18:00修复新版百度分享手机版问题~选用绛木子的方法。

11.7:

修复评论框。
修改外观设置。
修复主题大图数目问题。
其他小修改。

11.18:

自定义主题配色。
修复Bug。
调整多风格,另外加载skin目录下的多风格CSS。
头像边缘细节修改。
侧边栏可选分类页面和独立页面。
23:12 修改评论框。

11.20:

修复BUG。
各种代码重写。

11.21:

修复BUG。
21:20: 修复完已知问题。

12.18:

修复小BUG。
现在可以全文输出,遇到分隔符“--more--”则将显示阅读更多。

12.19:

修复BUG。
“扫一扫”二维码。
修复自带高亮。

12.26:

修复小问题。

16.1.5:

小幅更新。

1.16:V1.5.1

修复BUG;
增加文章页不显示头像选项;
完善配色方案,如夜间模式、多说评论框(须博主目前多说CSS);
增加tooltip效果。

6.17:V1.6

更新于官方版V1.1;
后续更新正在进行...

使用方法

在后台启用主题后,设置外观:网站外观.png

  • 设置网站导航上的单字 (网站文字LOGO,为空时取网站标题第一个文字)
  • 自定义显示(显示头像、显示标签、显示捐款、显示分享等)
  • 评论框可选(默认评论框、多说评论框)
  • 多风格(共有“默认风格、红色风格、绿色风格、蓝色风格、紫色风格、黑色风格”六种)
  • 自定义配色
  • 头像(填写图片URL,留空则输出默认)
  • 文章页底部头像(填写图片URL,留空则输出默认)
  • 导航栏输出
  • 底部分页
  • 段落缩进
  • 文章图片
  • 代码高亮
  • 文章作者头像
  • 打赏支付宝帐号
  • 默认打赏金额
  • 支付宝捐款的二维码
  • 备案号
  • 网站统计代码
  • 网站背景图(支持多图随机显示,主题自带32张大图,只需要在多个图片之间用“,”分隔开即可)
  • 支持CDN加速网站静态资源(基于内容替换,默认使用七牛CDN,其他未测试)
  • 支持缩略图显示(使用七牛CDN自带的缩略图API,未配置时显示原图)

新建页面

  • 分类(categories)对应分类页面:博客分类展示,并显示该分类下最新文章
  • 存档(archives)对应文章存档:按日期展示博客所有文章
  • 标签(tags)对应标签云:显示博客所有标签
  • 友链(links)对应友情链接:显示友链

注1:页面对应的图标为font awesome,可自行修改。
方法一:(这应该是最简单的办法)
创建新页面.png
方法二:(修改CSS)
FA.png
'关于',使用方法一原来是无效的,因为没有对应名称,这时可以考虑修改css,路径为jianshu/css/style.css,1507行。如:

.fa-about:before{
    content: "\f05a";
}

方法三:(外观设置)
图标样式.png

注2:友链页面使用到Links插件,插件地址 感谢作者分享的插件。
注3:文章浏览数统计新版默认使用的是
TeStat,另外有TePostViewsStat插件,可自行修改为自己使用的插件。需要修改的页面:index.phparchive.phppost.php

修改方法:

阅读浏览计数将:

<li><?php _e('<i class="fa fa-eye"></i> 阅读 '); ?><?php $this->viewsNum(); ?></li>

修改为TePostViews插件:

<li><?php _e('阅读:'); ?>(<?php $this->viewsNum(); ?>)</li>

修改为Stat插件:

<li><?php _e('已浏览'); ?><?php $this->views()._e('次.') ?></li>

注4:文章评论数修改为多说评论数(使用多说评论框可选),新版本更改评论框评论数同步进行更改!

注5:主题自带代码高亮,新版增加了开关可选择开启.

注6:主题点赞功能需使用插件:为文章点赞:TeStat插件

注7:主题首页大图随机切换,可自行修改header.php
将:

 .rand(1,31)/*随机显示:由header_1到header_31之间随机切换*/

去除或修改成每页一图:

.date('j')

注8:首页文章发布信息修改:
加图标:如默认评论:需要修改的页面:index.phppost.php

<li><?php $this->commentsNum('评论%d'); ?></li>

加上

<li><i class="fa fa-comments-o"></i><?php $this->commentsNum('评论%d'); ?></li>

加作者:需要修改的页面:index.php,在post-meta中加

<li><?php $this->author(); ?></li>

也可

<li itemprop="author" itemscope itemtype="http://schema.org/Person"><?php _e('作者: '); ?><a itemprop="name" href="<?php $this->author->permalink(); ?>" rel="author"><?php $this->author(); ?></a></li>

同上,可加图标。

更改位置为标题下:需要修改的页面:index.php,将:

<ul class="post-meta">
//所有内容
</ul>

移动至:

<h2 class="post-title" itemprop="name headline"><a itemtype="url" href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h2>

post-title的下方,post-content的上方即可。

同理,可以改为缩略内容最下面。

注10:修改代码标签的内边距。打开css目录下的highlight.css,找到

.post-content pre {
    background: #23241f;
    padding:2px; //修改这里,如Boo 所改:padding: 5px 12px;
    overflow:auto;
    border-radius:10px; 
 }

注11:修改文章页发布时间戳:打开post.php找到15行并修改

  <span><?php $this->date('Y.m.d H:i:s'); ?></span> //如改为年月日'Y.m.d'

具体写法请参考 PHP 日期格式写法

下载地址:

JianShu(变异版1.5.1).zip (3598.6 KB, 下载次数: 1377, 最后修改: 2016-01-18 08:19)
jianshu(变异版1.6).zip (3582.7 KB, 下载次数: 600, 最后修改: 2016-06-18 09:01)

主题大小为3.7M左右,因为主题内包含了31张首页大图~
后续更新将会单独打包图片。

添加新评论

已有 215 条评论

  1. 评论这一部分是肿么弄的?

  2. 多说不出来了,肿么办?

  3. 这个更刺c激,准备好手纸哦 A 片。。 288d.pw

    [给力]

  4. 现在用的夜间模式真不错。

  5. 更新了啥?

  6. 不错啊

  7. 为毛置顶的红色没有呢?我已加了代码了[泪]

  8. 一会儿又挂了

  9. 搞定了,撸了原工具箱就ok了。谢谢

  10. index.php 22行报错:

  11. 撸的沙发呀,爽

  12. 今天更新的,没有入出来么?

  13. Typecho的世界真小

  14. 为什么下载不了这个主题?求大神给个下载地址

    1. 前段时间博客CDN出问题了

  15. 建议添加一项文章中无图从附件中获取略缩图。
    站点描述在引用悬浮音乐播放器后会向上错位。

    1. 谢谢反馈~~~我只能说尽力了,抱歉

  16. 点赞不了

  17. 导航栏输出
    分类目录 不会下拉,因为我分类多,,,拉不下去,可以分二级分类就好了

  18. 更新支持~

  19. 可以不用多说评论吗? 如果选择默认,不设置则会提示: 你还没有设置多说域名(duoshuoQuery.short_name),填入已有域名或创建新站点:http://duoshuo.com/create-site/

    1. 可以,外观设置有选项。

  20. 原来你也玩这鬼@@@@@@@

  21. 请问下左边栏里那些图标怎么弄出来的,翻看了你的评论,都是简单的说下,有详细点的教程吗?刚学前端的新手.

  22. 为何我安装了这个主题后,别人评论的内容就两行后无法加载?我的是0.9版本,同时也禁用了所有插件,不知为何加载不了自带的评论模板?难道是不支持0.9版本吗?地址pxsky.ru,我把原版和变异版都试了,不行,麻烦大神解决一下!

  23. 非常不错的主题,感谢!
    在你的主题基础上配合Links插件小弄了个侧边栏自定义

    具体在这里:
    http://hk.lnyk2.com/index.php/archives/1332/

  24. 另外,文章中的图片怎样设置默认显示?现在是需要点击了才能显示的说 :smile:

  25. 感觉代码高亮还是 绛木子 原版的好看,怎么改回去呢? 这样的圆角矩形在我个人而言,一点都不好看,

    1. CSS找到pre、code这两个标签将圆角属性去掉即可

  26. Boo Boo

    我在你的基础上将内容页标题左上角头像是否显示增加了可选开关。
    具体在 http://boo.ooo/o10

    1. 谢谢反馈

    2. 好的,下次更新加上~

    3. Boo Boo

      修改主题6个配色方案中的【blockquote】标签颜色跟随主题颜色改变;

  27. 博主你好,请问置顶功能如何实现

  28. 建议搜索和左上角的首页添加上Pjax,这样就完美了。

  29. PHD PHD

    hello 博主 反馈一个bug 在我的电脑上左边框和右上角的小图标显示不出来

    1. PHD PHD

      额 那上面的那个是怎么回事啊??? 我的是20+寸的屏幕 显示的就不正常啊 图标显示不出来哦

    2. 现在你网站可以啊。。。

    3. 我都能正常显示啊?

    4. PHD PHD

      我试验了一下 在我的电脑上 phdsky.com打开网页就会出现上面的问题 而www.phdsky.com这样就显示正常了。。。
      博主求解决方案啊啊~~~

  30. 博主,你好,请问为啥我装上了你的主题,显示出来的却和你自己博客的不一样呢?

    1. 目前博客主题是我自己写的一个模版,变异版简书主题我没有使用

  31. 反饋個BUG,導航欄的首頁按鈕無法跳轉到首頁..

    1. 反饋新BUG:點贊插件無法使用..

    2. 已修复

    3. 就是最左上角的那個導航欄的首頁按鈕啊。。

    4. 你是说logo?

  32. S S

    请问增加独立页面后,在首页的导航栏不显示文字如何解决?

  33. S S

    请问上传至 WP 之后提示缺少 Style.css 是什么原因?
    我把 CSS 文件夹下的文件传到 根目录上传,他说没有合法的主题头部。

  34. 右上角的加载图怎么做的啊?

  35. 过来踩踩

  36. 你的左边图片太大了 右边的内容都显示不下。。。[挖鼻屎]

  37. 手机访问!感觉头部背景图片太大了

    1. 嗯,因为那独立页面问题。移动中…

  38. 个人感觉没有面包屑会更好看

    1. 嗯嗯,我也是,但是又感觉要有这个

  39. 现在这个主题好顶赞

    1. 随便做的啦~谢谢夸奖!

  40. 默认评论说”留言提交已关闭“,用多说评论吧默认评论也出来了,一个多说评论一个默认评论。还有首页关不了灯。多说评论数显示有问题,或干脆不显示。

    1. 感谢反馈~~已修复。我在今晚更新的版本未出现此类情况~

  41. 请问下左边栏里那些图标怎么弄出来的。[可怜]

    1. 新版可以在外观设置那里设置哦~另外在创建独立页面时可以在下方的链接地址修改,如音乐,改为music。还可以在CSS目录下的style.css修改哦。

  42. 我这有个网页开启全站刷新之后加载画面无法隐藏- -
    我替换了新版的pjax文件和header.php的相关语句之后,背景不再全灰无法点击了
    但是加载画面还是没有自动隐藏- -

    1. 由于修改较多,最好是全部文件覆盖哦~

  43. 楼主多谢,不过点赞插件的链接挂掉了=_=,新版的下载完之后文件夹名字要改成TeStat,不然启用不了……

    1. 感谢反馈~从github等下载的都要改名的...

  44. 左边页面、分类图标怎么增加修改?

  45. 这是typecho的问题,在文章发布页需要修改日期,默认是文章首次发布信息

  46. hello~ 我用的是原版的. 然后拿了你的那31张图片~~ 特地过来感谢下.
    然后还想说下. 博主你去掉ajax无刷新是不是也是因为markdown渲染代码块的问题?
    如果是的话那么我在ajax取到数据后想办法自行渲染下是否可以解决呢?
    但是如果是因为没有渲染,那markdown的文章格式是没有丢失掉得. 丢失掉的仅仅是代码块的渲染,疑惑,求解.

    1. 发了呢~ 哈哈 常送ip长往来~

    2. 好的,去邻舍友联发一下~

    3. 嘿嘿,下班了瞎改改[挤眼]我就是想搞成极简的呐~ 还有博主大人求友链呐~

    4. 打算弄一个极简版的,貌似你的站点修改得不错哈~

    5. 加好了..

    6. 这个不难~就像主题里面重载多说一样的原理,相应加入高亮就好,原因是我比较懒…

    7. 这个只要在pajx重载加入高亮就好了~

    8. 啊哈哈哈~ 我的猜想果然是对的~ 加载好了以后再渲染一次就ok了~

  47. 为毛我的代码高亮看起来怪怪的...

    1. 有没有同时使用了代码高亮插件?主题自带高亮,你看看

    2. 方便加下qq截图给你看下!17494846

    3. 没开,我的意思是,代码高亮颜色怪怪的,与原版比起来!

    4. 你开启了pjax防刷新吧

  48. 多说评论数?主题里有的,你看看

  49. 大神您好,安装您的插件后,有2个地方,我没实现了,希望能帮忙,github里我star你了。1,播放音乐的效果没有出来,设置里也没有地方来设置,不知道该怎么弄。2,这个评论框也没出来。

    1. 是主题还是?播放音乐是明月浩空大大的插件Mhplay,登陆后台->控制台->外观->设置外观。评论框需要你去多说注册后博客外观设置选择多说评论框。

    2. www.we7.club

  50. 怎么同步在tpecho上显示评论多少数量,貌似多说不能同步

  51. 怎么做一个友情链接啊,

    1. 可是可以,但是太繁琐。。。

    2. 主题可以自定义css就好了!

  52. 站长回复?还是评论框内的动漫图片?

  53. 文章图片怎么直接显示?

    1. 设置外观->文章图片,关闭即可。

  54. favicon。ico怎么添加啊。谢谢!

    1. 哦,谢谢!我记得以前在哪里看到需要在index.php加入一段代码的。反正不注重seo。直接放入根目录就行了?我试试看。

    2. 添加?我都是直接放在站点根目录下的。

  55. 路过看一下!

  56. 底部头像描述(底部头像文字描述) 感觉没有什么必要!

    1. 底部头像描述(底部头像文字描述) 直接获取用户发表的头像就好

    2. 还是有用的啦,看你怎么用,可以关闭。

    3. 评论框?还是和官方版一样的?

    4. 直接获取用户发表的头像就好

  57. 官方版更新了,有空更新更新啦!

    1. 嗯 ,加油!!!![太开心]

    2. 嗯,目前要备考,偷个懒,先缓缓~

  58. 怎么了

  59. 我觉得右边的登录注册也可以去掉,腾多点空间给文章

  60. 为什么编辑的文章之后! 文章页吗上面的微信二维码不显示

  61. 音乐影响阅读体验啊,点一下就换一首,还不能关

    1. 我也是wp转换过来的!wp查询的太多了,打开一个主页五六十个查询,慢死了。受不了!

    2. 折腾完了jekyll和Hexo……两个极客级别的,啥都要自己动手,巨坑,明天起来折腾TP,可惜刚看了插件,有一些想要的功能找不到……

    3. 我原来也是各个挑选,最后选了TP

    4. 呃呃……Tink是说修改音乐播放器的CSS,并不是防刷新啦~

    5. 防刷新下面那个Tink搞定了

    6. 没用过Typecho,原来是WP,刚折腾了ZBog,都不满意,现在准备折腾jekyll

    7. 嗯 ,所以我建议博主使用Ajax防刷新
      还在测试中呢!
      (测试~代码高亮、百度分享将不显示!!以及登录后页面问题)

  62. 怎么在原生的评论里加一个插入图片?就像多说。。。

    1. img src="请输入图片地址" />

  63. 原生评论没有表情及贴图,能否集成呢? 我用了一个插件 :Smilies评论表情及贴图,可是用不了,可能版本太老了!

    1. 可以得啊 , 我也在用

  64. 博主你好,报告一个bug。。明月皓空的音乐播放器和这个主题的markdown解析有冲突。。。

    1. 把css里面body html还有ul li这几项删掉

    2. 求方法[爱你]

    3. OK,我自己搞定了! 另外就是想问下pjax防刷新功能后面还会更新的吧。。

    4. 博主,我看了下播放器的css,貌似冲突的就是html,body,ul,li这几个选择器吧?

    5. 话说可以我可以修改下播放器的css咯?

    6. ……不是这样的,是CSS样式表冲突了,就像字体,还有无序列表标签一样,被覆盖了,无法显示,这没法。

  65. 楼主你好,有个bug,就是我启用了Pjax全站防刷新之后,所有的markdown都无法正常显示了,全部是一个格式。然后我就关闭了Pjax,但是关闭之后页面就恢复不了了,仍然是markdown无法排版。

    求助。。

    1. 我找到原因了,应该是明月皓空的音乐播放器和这个主题的markdown解析有冲突。。。

  66. 感谢楼主!

  67. Z Z

    主题评论数和多说评论数怎么同步啊

  68. 怎么样去掉多说的代码啊?

    1. ........
      我特意再开了一个博客测试的。。你发你的网站我看看,加Q聊

    2. Ajax全站防刷新 那个开关用不了,勾不勾都开

    3. 是的

    4. 选择默认评论框之后还有?不应该呀……

    5. 就是选择的时候,右上角还是弹出 多说的消息

    6. ???有选择啊~选择评论框的。

  69. 添加统计代码没有显示! 我添加到: 网站备案号 。才显示统计,修复下!

    1. 统计我没有修改,是原版的,原版是不显示的,是用百度统计。cnzz等就不显示了……我看看吧

  70. 请问左侧导航的菜单图片怎么显示或设置

    1. 最简单的就是管理->独立页面->缩略名,修改一下缩略名即可。比如音乐:music

  71. 首页出现代码错误 请问怎么调试啊

  72. Z Z

    多说本地化后显示ua怎么显示。

  73. 又更新了呢,个人感觉,登录注册功能,貌似没啥必要呢,手机版何不如把菜单功能移过来岂不更好?

    1. 有用的。。。我在想办法啦,我有这打算

  74. 远方 远方

    请问多说在哪里启动啊 我是小白一个 还有该网站的音乐是插件么,怎么添加呢。[悲伤]

    1. 这个音乐插件实在是好评

    2. 明月浩空的插件

  75. 右边加上分类就好!

  76. 想知道博主文中“官方版Github:”是怎样调用的?

    1. 好的,谢谢

    2. Github Card插件:http://chekun.me/coding/github-card.html

  77. 多说怎么同步本地,可以同步吗。

    1. 好想有多说同步插件

  78. 博主你好,我纯小白一枚,请问独立页面图标在什么地方添加?谢谢!

    1. font awesome图标,编辑独立页面下面的绝对路径可以重命名试试,比如音乐改music等。

  79. 请问一下,首页的摘要默认显示字数怎么设置?

  80. 博主中秋快乐~

  81. 博主中秋快乐~

  82. 可以 整合 pjax 吗?

  83. PHD PHD

    请问一下 评论头像旋转、站长回复还有显示系统及IP是怎么弄的啊 求教。。。

    1. 头像旋转是自定义多说CSS。显示站长回复、系统、浏览器版本是先本地化多说JS,在修改一下而成,可以去看看“搜索客”的博文~~

  84. 诶呀好棒233333~~

  85. 网站做的好棒哦

  86. 最励志网:http://www.zuilizhi.net/? 前来拜访,欢迎互访!

  87. 留个脚印!

  88. 多谢分享

  89. 不错!

  90. 主要很想知道下音乐部分。。

    1. 相对于我这个喜欢听嗨的歌曲的孩纸,就不要搞这个了..真的会吓死人..

    2. 恩恩,缺陷有很多,大致有3类,不过因为手机版不会弹出来也就算了。。

    3. [鄙视] 我也看了一下他的音乐,音乐使用了插件也就是MyHkplayer 详细看页面http://free.limh.me/typecho_player.html 具体的已经有调试和食用方法. 我对于个人博客来说并不是很喜欢有BGM,万一大晚上的吓死人怎么办- -,So.把这个看了一圈之后就放弃了添加的想法.

  91. 很好的网站,赞一个,加油!

  92. 很棒啊!

    1. 嗯嗯,应该说是这主题很棒!太喜欢了就想着法子完善~~

  93. 不错的修改,想问一下如何把分类放到左侧边栏?

    1. 在header.php文件修改一下,把分类再加上去就好了。

  94. 额,弱弱问一句,为啥提示“无法安装这个包。 主题缺少style.css样式表”?我查看了下好像是没有style.css

    1. [生病] wordpress。。。

    2. 不会啊。。请问你是Typecho1.0正式版吗?

  95. 点击“打赏支持”跳转到的支付界面没有收款人帐号

    1. 已经弄好了,就加上去了

    2. 就说呢

    3. 我刚刚在测试新版本。。所以没填写。[嘻嘻]

  96. 多好的板子,,

  97. 破小懿 破小懿

    那个首页按钮没有图标好纠结。强迫症啊,看着不爽, 然后其实个人也不怎么喜欢有音乐的

    1. 恩,原来打算弄HTTPS,修改了一下。

  98. Bayesky Bayesky

    我终于知道你那个小头像用来干嘛最好了!

  99. Bayesky Bayesky

    已经用上啦~~谢啦~~

  100. 多说呢?

返回顶部