本文与那篇美化文不同,仅仅是对于源代码的小改
相关推荐移至侧栏[1]
文章页显示网站统计
关于侧栏网站咨询,其实对应的是 themes/butterfly/layout/includes/widget/card_webinfo.pug
这个文件
然后关于页面侧栏配置,则对应的是 themes/butterfly/layout/includes/widget/index.pug
这个文件
明白了两个文件所在的位置,我们要做的只是在合适的地方加上合适的内容罢了。
修改前面提到的 index.pug
文件:
1 | #aside-content.aside-content |
文章页面显示描述
关于文章头部描述样式,
在 themes/butterfly/layout/includes/header/post-info.pug
这个文件里面
关于具体样式,在 themes/butterfly/source/css/_layout/head.styl
里面
通过阅读前面提到的 post-info.pug
这个文件,我们可以发现,只要在 h1.post-title
下面加一行描述就行。
pug 文件修改:
1 | #post-info |
styl 文件修改,大概位于180行左右:
1 | #post-info |
文章底部版权页美化[2]
看了下Akilar店长的改动,改了copyright相关的布局,然后版权图标样式改了,再去styl文件那边改具体样式。
post-copyright.pug
没整体看过,不过自己加了一段page.description,不需要的可以自行调整。
改 \themes\butterfly\layout\includes\post\post-copyright.pug
, 直接复制以下内容替换原文件内容。
此处多次用到了三元运算符作为默认项设置,在确保有主题配置文件的默认项的情况下,也可以在相应文章的 front-matter
中重新定义作者,原文链接,开源许可协议等内容。
1 | if theme.post_copyright.enable && page.copyright !== false |
修改 \themes\butterfly\source\css\_layout\post.styl
, 在大概190行的iframe
下面修改:
下面的样式个人经过个性化修改,请自行判断需要部分并进行相应调整。
1 | .post-copyright |
然后在最底下加上这些:
1 | .post-copyright-m-info |