前言

美化之前

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

引用站外地址
Hexo博客添加自定义css和js文件
Leonus

在添加完js、css后，一定要记得在_config.butterfly.yml的inject里引用

引用站外地址
Butterfly自用全局变量
June's Blog

效果

image-20240317172432766

参考链接

引用站外地址
Butterfly给首页首个文章卡片加个class
轻笑Chuckle

修改方案

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')
	...

image-20240401195256829

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;/*控制标题的行高*/
    }
}

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

引用站外地址
子级a标签href避免触发父级onclick的方法，子元素阻止冒泡
张洪Heo

添加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')
	...

image-20240401195332412

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')
	...

image-20240401195546647

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

image-20240325192519031

旧版（已失效）

因为上述我加了一个事件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);
}