本文提供了一篇针对Solitude主题的专项教程，旨在帮助用户升级或魔改主题。教程中详细介绍了如何修改CSS文件，特别是recent-post.styl文件中的10-240行代码，以优化显示效果。此外，文章还指出Butterfly系主题代码相似但存在差异，用户可参考修改。教程还涉及修改主题配置文件，具体到第309-313行的内容，包括调整index_post_list的方向、列数、内容显示方式以及截取内容长度等，以实现个性化的布局和内容展示。
此教程会向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(
display flex
align-items center
animation slide-in .6s .4s backwards
transition all .3s ease 0s
overflow hidden
height fit-content
background var(
border-radius 12px
cursor pointer
border var(
+maxWidth1300()
margin-bottom .5rem
+maxWidth768()
border-radius 12px
border var(
box-shadow var(
display block
position relative
clip-path inset(0 0 0 0 round 12px)
&:hover
box-shadow var(
border var(
.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(
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(
.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(
font-size .5rem
position relative
margin-right 8px
.unvisited-post
display flex
color var(
font-size .5rem
position relative
&:visited
color var(
/.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(
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(
> .post-meta-date
right 0
text-align right
i
display none
.article-meta__separator
display none
a:hover
background-color var(
color var(
cursor pointer
border-radius 4px
i
margin 0 .4rem 0 0
.sticky
color var(
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(
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(
修改主题配置
修改第309-313行内容:
yml
index_post_list:
direction: column
column: 3
content: false
length: 500
cover: both
当direction为column时，column设置为3即为首页三栏，column为2即为默认的两栏
