前言

美化之前

美化的时候需要修改网站的源文件、添加样式、js之类的,需要一点基础,可以参考

在添加完js、css后,一定要记得在_config.butterfly.ymlinject里引用

效果

已换成轮播图

参考链接

修改方案

1. 修改post-ui.pug

修改[blogRoot]\themes\butterfly\layout\includes\mixins\post-ui.pug

1
2
3
4
5
6
7
8
9
10
11
mixin postUI(posts)
each article , index in page.posts.data
+ - let link = article.link || article.path
+ - let lastPost = firstpost !== 1 && is_current('/') ? true : false
+ - var firstpost = 1
+ div(class = (lastPost === true ? 'recent-post-item firstpost-item' : 'recent-post-item'))
- #recent-post-item
-
- let link = article.link || article.path
let title = article.title || _p('no_title')
...

2. 添加layout.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@media screen and (min-width: 1200px) {
/* 首个文章样式修改 */
#recent-posts > .recent-post-item.firstpost-item {
max-height:324px;
height: 18em !important;
width:100%;/*文章容器容器宽度*/
display: flex; /* 使用 Flexbox 布局 */
flex-direction: row; /* 子元素横向排列 */
}
#recent-posts > .recent-post-item.firstpost-item .post_cover {
width: 80%; /*图片封面宽度*/
height: 300px;/*图片封面高度*/
}
#recent-posts > .recent-post-item.firstpost-item > .recent-post-info > .article-title {
-webkit-line-clamp: 1;/*控制标题的行数*/
margin-top: 0.5rem; /*控制标题的上间距*/
margin-bottom: 0.5rem;/*控制标题的下间距*/
font-size: 1.5em; /*控制标题的字体大小*/
line-height: 1.5;/*控制标题的行高*/
}
}

附加:点击文章卡片进入文章页

添加onclick函数

post-ui.pug.recent-post-item后加上onclick=pjax.loadUrl('${url_for(link)}')

1
2
3
4
5
6
7
8
9
10
11
mixin postUI(posts)
each article , index in page.posts.data
+ - let link = article.link || article.path
+ - let lastPost = firstpost !== 1 && is_current('/') ? true : false
+ - var firstpost = 1
+ div(class = (lastPost === true ? 'recent-post-item firstpost-item' : 'recent-post-item') onclick=`pjax.loadUrl('${url_for(link)}')`)
- #recent-post-item
-
- let link = article.link || article.path
let title = article.title || _p('no_title')
...

1
2
3
4
5
6
7
8
9
mixin postUI(posts)
each article , index in page.posts.data
+ - let link = article.link || article.path
+ #recent-post-item(onclick=`pjax.loadUrl('${url_for(link)}')`)
- #recent-post-item
-
- let link = article.link || article.path
let title = article.title || _p('no_title')
...

然后在找到.article-meta__categories.article-meta__tags两个a标签后面添加onclick="window.event.cancelBubble=true;"

旧版(已失效)

因为上述我加了一个事件onclick=pjax.loadUrl('${url_for(link)}'),当我们点击文章卡片的时候,可以跳转至相应文章页,但是这会覆盖掉子元素a标签,所以我采用事件捕获的方法解决

修改[blogRoot]\themes\butterfly\source\js\main.js,添加以下函数

1
2
3
4
5
6
7
8
9
// 首页文章卡片阻断父元素的onclick事件传递
const recentPostItem = document.querySelector('.recent-post-item');
if (recentPostItem) {
recentPostItem.addEventListener('click', function (event) {
if (event.target.tagName === 'A') {
event.stopPropagation();
}
}, true);
}