butterfly主题-首页文章双栏布局

注意事项：

  • 魔改有一定的风险，请先备份，然后在跟着修改。
  • “+” 代表加上这行代码，“-” 代表删除这行代码，加上代码之后，请将“+”进行删除。由于有严格的缩进，可能会出现因为缩进的问题，而出现错误。
  • 需要具备掌握一定的html、css、javascript基础，hexo基本修改的能力，才可以进行。

css参考

https://cdn.jsdelivr.net/gh/Zfour/Butterfly-double-row-display@1.00/cardlistpost.css

先打开主题配置文件，位于根目录的_config.butterfly.yml文件

1
2
3
4
5
6
7
8
9
10
# Article layout on the homepage
# 1: Cover on the left, info on the right
# 2: Cover on the right, info on the left
# 3: Cover and info alternate between left and right
# 4: Cover on top, info on the bottom
# 5: Info displayed on the cover
# 6: Masonry layout - Cover on top, info on the bottom
# 7: Masonry layout - Info displayed on the cover
- index_layout: 1
+ index_layout: 6

找到 [Blog]\themes\butterfly\source\css\_page\homepage.styl

1
2
3
4
5
6
7
8
9
10
11
12
#recent-posts
  .recent-post-item
    @extend .cardHover
    position: relative
    overflow: hidden
    margin-bottom: 20px

    if $indexLayout == 6 || ($indexLayout == 7)
      display: inline-block
      width: calc(100% / 2 - 8px)
      vertical-align: top
+      margin-left: 0.46rem
1
2
3
4
5
6
7
8
9
10
11
12
13
  & > .article-title
    @extend .limit-more-line
    color: var(--text-highlight-color)
    font-size: 1.55em
    line-height: 1.4
    transition: all .2s ease-in-out
-   -webkit-line-clamp: 2
+    -webkit-line-clamp: 1
+    margin-top: 0.3rem; /*控制标题的上间距*/
+    margin-bottom: 0.3rem;/*控制标题的下间距*/
+    color: var(--text-highlight-color);
+    font-size: 1.3em; /*控制标题的字体大小*/
+    line-height: 1.4;/*控制标题的行高*/

最后 GitBash hexo 三连，在本地预览一下效果

1
2
3
hexo cl
hexo g
hexo s