主题魔改-文章容器布局

水一篇吧，记得之前有人问过这个，现在才想起来

显示效果

这个又分成双栏和分栏，左右布局的直接看本站效果吧

[{"url":"https://lib.bsgun.cn/2025/04/30/421058.webp","alt":"双栏效果"},{"url":"https://lib.bsgun.cn/2025/04/30/904430.webp","alt":"分栏靠左"},{"url":"https://lib.bsgun.cn/2025/04/30/498703.webp","alt":"分栏靠右"}]

修改方法

本次修改替换一个文件，添加一个文件，请注意备份

第一步：替换文件

直接覆盖 themes/anzhiyu/layout/includes/mixins/post-ui.pug目录下post-ui.pug文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
- let maxDate = 0
each item in site.posts.data
  if item.date > maxDate
    - maxDate = item.date
mixin postUI(posts)
  each article , index in page.posts.data
    - let link = article.link || article.path
    div(class = (index === 0 ? 'recent-post-item lastestpost-item' : 'recent-post-item') onclick=`pjax.loadUrl('${url_for(link)}')`)
      -
        let title = article.title || _p('no_title')
        const position = theme.cover.position
        let leftOrRight = position === 'both'
          ? index%2 == 0 ? 'left' : 'right'
          : position === 'left' ? 'left' : 'right'
        let post_cover = article.cover
        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
      -
      - const new_post = is_current('/') && (maxDate === article.date)

      if post_cover && theme.cover.index_enable
        .post_cover(class=leftOrRight)
          .recent-post-info-top-tips(class=leftOrRight)
            if (is_home() && (article.top || article.sticky > 0))
              span.article-meta.sticky-warp
                i.anzhiyufont.anzhiyu-icon-thumbtack.sticky
                span.sticky= _p('sticky')
            if (theme.post_meta.page.categories && article.categories.data.length > 0)
              each item, index in article.categories.data
                .article-categories-original
                  i.fas.fa-shapes
                  =item.name
            if new_post
              span.newPost
                i.fas.fa-star
                span 最新
            a.unvisited-post(href=url_for(link) title=title) 未读
          a(href=url_for(link) title=title style='display: flex;height: 100%;')
            img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title style='pointer-events: none')

      .recent-post-info(class=no_cover)
        .recent-post-info-top
          a.article-title(href=url_for(link) title=title)= title
        .article-meta-wrap
          if (theme.post_meta.page.date_type)
            span.post-meta-date
              if (theme.post_meta.page.date_type === 'both')
                i.anzhiyufont.anzhiyu-icon-calendar-alt(style=`${theme.post_meta.page.date_format==="simple" ? "display:none":""}`)
                span.article-meta-label=_p('post.created')
                time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date) time=full_date(article.date))=date(article.date, config.date_format)
                span.article-meta-separator
                i.anzhiyufont.anzhiyu-icon-history(style=`font-size: 15px; ${theme.post_meta.page.date_format==="simple" ? "display:none":""}`)
                span.article-meta-label=_p('post.updated')
                time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated) time=full_date(article.updated))=date(article.updated, config.date_format)
              else
                - let data_type_updated = theme.post_meta.page.date_type === 'updated'
                - let date_type = data_type_updated ? 'updated' : 'date'
                - let date_type_other = data_type_updated ? 'date' : 'updated'
                - let date_icon = data_type_updated ? 'anzhiyu-icon-history' :'anzhiyu-icon-calendar-days'
                - let date_title = data_type_updated ? _p('post.updated') : _p('post.created')
                - let date_title_other = data_type_updated ? _p('post.created') : _p('post.updated')
                i.anzhiyufont(class=date_icon style=`font-size: 15px; ${theme.post_meta.page.date_format==="simple" ? "display:none":""}`)
                span.article-meta-label=date_title
                time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type])  time=full_date(article[date_type]))=date(article[date_type], config.date_format)
                time(datetime=date_xml(article[date_type_other]), class="time_hidden", title=date_title_other + ' ' + full_date(article[date_type_other]) time=full_date(article[date_type_other]))=date(article[date_type_other], config.date_format)
          if (theme.post_meta.page.tags && article.tags.data.length > 0)
            span.article-meta.tags
              each item, index in article.tags.data
                a(href=url_for(item.path) event.cancelbubble onclick="window.event.cancelBubble=true;").article-meta__tags
                  span
                    i.anzhiyufont.anzhiyu-icon-hashtag
                    =item.name

          mixin countBlockInIndex
            - needLoadCountJs = true
            span.article-meta
              span.article-meta-separator
              i.anzhiyufont.anzhiyu-icon-comments
              if block
                block
              span.article-meta-label= ' ' + _p('card_post_count')

          if theme.comments.card_post_count
            case theme.comments.use[0]
              when 'Valine'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.valine-comment-count(data-xid=url_for(link))
                      i.anzhiyufont.anzhiyu-icon-spinner.anzhiyu-spin
              when 'Waline'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.waline-comment-count(id=url_for(link))
                      i.anzhiyufont.anzhiyu-icon-spinner.anzhiyu-spin
              when 'Twikoo'
                +countBlockInIndex
                  a.twikoo-count(href=url_for(link) + '#post-comment' tabindex="-1")
                    i.anzhiyufont.anzhiyu-icon-spinner.anzhiyu-spin
              when 'Artalk'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.artalk-count(data-page-key=url_for(link))
                      i.anzhiyufont.anzhiyu-icon-spinner.anzhiyu-spin

        //- Display the article introduction on homepage
        case theme.index_post_content.method
          when false
            - break
          when 1
            .content!= article.description
          when 2
            if article.description
              .content!= article.description
            else
              - const content = strip_html(article.content)
              - let expert = content.substring(0, theme.index_post_content.length)
              - content.length > theme.index_post_content.length ? expert += ' ...' : ''
              .content!= expert
          default
            - const content = strip_html(article.content)
            - let expert = content.substring(0, theme.index_post_content.length)
            - content.length > theme.index_post_content.length ? expert += ' ...' : ''
            .content!= expert

    if theme.ad && theme.ad.index
      if (index + 1) % 3 == 0
        .recent-post-item.ads-wrap!=theme.ad.index

第二步：添加样式

在 source/static/css目录下添加post-ui.css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/* 首页布局 摘要 标签 */
#recent-posts > .recent-post-item > .recent-post-info {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 32px !important;
    justify-content: center !important;
    gap: 8px;
}

#content-inner #recent-posts > .recent-post-item > .recent-post-info > .content {
    opacity: 1 !important;
    height: auto !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
    font-size: 15px !important;
}

.recent-post-info-top-tips {
    display: flex;
    gap: 10px;
    position: absolute;
    z-index: 999;
    background: rgb(255 255 255 / 20%);
    padding: 0 5px;
    margin: 10px !important;
    border-radius: 6px;
    color: var(--anzhiyu-white);
    backdrop-filter: blur(5px);
}

.recent-post-info-top-tips.right {
    right: 0;
}

.recent-post-info-top-tips.left {
    left: 0;
}

[data-theme='dark'] .recent-post-info-top-tips {
    filter: brightness(0.8);
}

.article-meta-wrap {
    position: inherit !important;
    padding: 0 !important;
}

.article-meta.sticky-warp,
span.newPost {
    color: #ff7242;
}

.article-categories-original,
span.newPost {
    display: flex;
    gap: 5px;
    align-items: center;
}

span.article-meta.tags,
span.post-meta-date {
    height: 26px;
    line-height: 26px;
}

.recent-post-info .recent-post-info-top {
    padding: 0 !important;
}

.unvisited-post {
    display: none !important;
}

@media screen and (max-width: 768px) {
    #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
        bottom: 0 !important;
    }
    .recent-post-info-top-tips.right {
        right: inherit;
    }
}

第三步：插入样式

在 _config.anzhiyu.yml 文件中搜索 inject 配置项，在 head 中插入CSS

static 是我在 source 文件夹下创建的文件夹，具体根据实际情况修改！

1
2
3
4
5
6
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/static/css/post-ui.css">

写在最后

博主是个马虎蛋，如果文章内容有错误地方，欢迎下方评论！！！