本文与那篇美化文不同,仅仅是对于源代码的小改

相关推荐移至侧栏[1]


文章页显示网站统计

关于侧栏网站咨询,其实对应的是 themes/butterfly/layout/includes/widget/card_webinfo.pug 这个文件

然后关于页面侧栏配置,则对应的是 themes/butterfly/layout/includes/widget/index.pug这个文件

明白了两个文件所在的位置,我们要做的只是在合适的地方加上合适的内容罢了。

修改前面提到的 index.pug 文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#aside-content.aside-content
//- post
if is_post()
- const tocStyle = page.toc_style_simple
- const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
if showToc && tocStyleVal
.sticky_layout
include ./card_post_toc.pug
else
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})
!=partial('includes/widget/card_top_self', {}, {cache: true})
.sticky_layout
if showToc
include ./card_post_toc.pug
if theme.related_post && theme.related_post.enable
!= related_posts(page,site.posts)
!=partial('includes/widget/card_recent_post', {}, {cache: true})
!=partial('includes/widget/card_ad', {}, {cache: true})
+ !=partial('includes/widget/card_webinfo', {}, {cache: true})

文章页面显示描述

关于文章头部描述样式,

themes/butterfly/layout/includes/header/post-info.pug 这个文件里面

关于具体样式,在 themes/butterfly/source/css/_layout/head.styl 里面

通过阅读前面提到的 post-info.pug 这个文件,我们可以发现,只要在 h1.post-title 下面加一行描述就行。

pug 文件修改:

1
2
3
#post-info
h1.post-title= page.title || _p('no_title')
+span.post-desc= page.description

styl 文件修改,大概位于180行左右:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#post-info
.post-title
@extend .limit-more-line
margin-bottom: 8px
color: var(--white)
font-weight: normal
font-size: 2.5em
line-height: 1.5
-webkit-line-clamp: 3

+.post-desc
+ color: var(--white)
+ font-style: italic
+ border-bottom: 1px solid var(--white)

文章底部版权页美化[2]


  1. Butterfly布局调整———相关推荐版块侧栏卡片化 | Akilarの糖果屋 ↩︎

  2. (二创)Copyright-beautify | Akilar の糖果屋 ↩︎