此教程会向Solitude提交pr，可以升级主题的人可以等待主题更新，不可以升级主题的可以直接照着魔改
此教程是为Solitude主题的专项教程，其余Butterfly系主题代码相似，但不完全相同，可自行修改后食用
打开themes\solitude\source\css\_layout\recent-post.styl文件:
修改10-240行内容，将其全部替换为如下代码，注意代码的穿插位置:
styl
if hexo-config('index_post_list.direction') == "column"
#recent-posts
position relative
+minWidth1300()
display flex
flex-wrap wrap
gap .5rem
transition width .3s
+maxWidth768()
padding 0 1rem
> .recent-post-item
box-shadow var(--efu-shadow-light2black)
display flex
align-items center
animation slide-in .6s .4s backwards
transition all .3s ease 0s
overflow hidden
height fit-content
background var(--efu-card-bg)
border-radius 12px
cursor pointer
border var(--style-border)
+maxWidth1300()
margin-bottom .5rem
+maxWidth768()
border-radius 12px
border var(--style-border-always)
box-shadow var(--efu-shadow-border)
display block
position relative
clip-path inset(0 0 0 0 round 12px)
&:hover
box-shadow var(--efu-shadow-main)
border var(--style-border-hover)
.post_cover img.post_bg
transform scale(1.03)
transition .3s ease-in-out
filter brightness(.85)
.recent-post-info-top .article-title
color var(--efu-theme)
if hexo-config('google_adsense.enable')
+ .google-ads-warp
iframe
width: 100% !important
height: 100% !important
border: none !important
.post_cover
position relative
transition 1s
width 100%
overflow hidden
height 100%
+minWidth1300()
height 225px
+maxWidth1300()
width 75%
display flex
height 220px
+maxWidth768()
width 100%
height 170px
border-radius 5px 8px 0 0
a
min-width 100%
min-height 100%
img.post_bg
width 100%
height 100%
transition all .6s ease 0s
object-fit cover
+maxWidth1300()
min-width 100%
-webkit-backface-visibility hidden
-webkit-transform-style preserve-3d
min-height 100%
user-select none
+maxWidth768()
border-radius: 12px 12px 0 0
> .recent-post-info
height 174px
width 100%
cursor pointer
position relative
padding 0
display inline-block
overflow hidden
.content
-webkit-line-clamp 2
display -webkit-box
overflow hidden
-webkit-box-orient vertical
padding 5px 32px
opacity .8
font-size 14px
line-height 1.8
+maxWidth600()
-webkit-line-clamp 1
span.tags-punctuation
transition .3s
&:hover
color var(--efu-main)
.recent-post-info-top
position relative
transition .3s
padding 0 32px
width 100%
.article-title
line-height 30px
margin-top 0
font-weight 700
margin-bottom 0
width 100%
transition .3s
font-size 1rem
-webkit-line-clamp 2
display -webkit-box
overflow hidden
-webkit-box-orient vertical
.recent-post-info-top-tips
display flex
margin-top 20px
user-select none
> .sticky-warp
display flex
position relative
margin-right 8px
justify-content center
align-items center
font-size 0.5rem
i
font-size .5rem
margin-right 3px
.original
display flex
color var(--efu-secondtext)
font-size .5rem
position relative
margin-right 8px
.unvisited-post
display flex
color var(--efu-secondtext)
font-size .5rem
position relative
&:visited
color var(--efu-card-bg)
/.article-meta-wrap
position absolute
bottom 16px
transition .3s
display flex
flex-direction row
flex-wrap nowrap
justify-content space-between
width 100%
left 0
padding 0 32px
white-space nowrap
color var(--efu-fontcolor)
font-size .7rem
> .article-meta
margin 0 8px 0 0
white-space nowrap
overflow hidden
text-overflow ellipsis
display flex
> .article-meta__tags
margin-right 8px
padding 0 .2rem 0 0
color var(--efu-fontcolor)
> .post-meta-date
right 0
text-align right
i
display none
.article-meta__separator
display none
a:hover
background-color var(--efu-none)
color var(--efu-lighttext)
cursor pointer
border-radius 4px
i
margin 0 .4rem 0 0
.sticky
color var(--efu-fontcolor)
if hexo-config('index_post_list.direction') == "column" && hexo-config('index_post_list.column') == 2
#recent-posts
> .recent-post-item
+minWidth1300()
flex-direction column
width 100%
flex 1 1 40%
max-width 50%
box-shadow var(--efu-shadow-border)
else if hexo-config('index_post_list.direction') == "column" && hexo-config('index_post_list.column') == 3
#recent-posts
> .recent-post-item
+minWidth1300()
flex-direction column
width 100%
flex 1 1 33.3%
max-width 32.6%
box-shadow var(--efu-shadow-border)修改主题配置
修改第309-313行内容:
yml
index_post_list:
direction: column # row / column
column: 3 #2:2列 3:3列
content: false # 1: post.description / 2: 自动获取description或截取内容(Automatically get descriptions or screenshots) / 3: 只使用截取内容(Use only screenshots) / false: 不显示内容(No content is displayed)
length: 500 # 截取内容的长度 : The length of the screenshot content
cover: both # left: 在左侧 : left / right: 在右侧 : right / both: 两侧 : both当direction为column时，column设置为3即为首页三栏，column为2即为默认的两栏