5.主题魔改：即刻短文朋友圈样式

4.主题魔改：即刻短文朋友圈样式

本指南将引导您修改“即刻短文 (/essay/)”页面，使其在移动端（手机等小屏幕设备）的显示效果，模仿成大家非常熟悉的微信朋友圈时间线样式。在PC端，它将保持原有的样式不变。

警告： 这同样是一项“魔改”操作，会覆盖主题的核心文件。在开始前，强烈建议您备份 themes/anzhiyu 文件夹，以便在出现问题时可以随时恢复。

第一步：替换“即刻短文”页面布局文件

此修改需要替换掉负责渲染 /essay/ 页面的核心模板。

  1. 找到目标文件：
    themes/anzhiyu/layout/includes/page/essay.pug

  2. 替换内容：将这个文件的全部内容，用下面提供的完整代码进行覆盖。

    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
    //- essay.pug 
    if site.data.essay
      each i in site.data.essay
        #essay_page
          .author-content.author-content-item.essayPage.single(style = i.top_background ? `background: url(${i.top_background}) left 28% / cover no-repeat;` : "")
          .author-info
            .msg
              .avatar
                  a.essay-avatar(href=i.avatarLink)
                    img(src=i.avatar)
              .eassy-name=i.name
            .desc=i.desc
          #bber
            section.timeline.page-1.content
              ul#waterfall.list
                each item, index in i.essay_list
                  if index < i.limit
                    li.bber-item
                      .user-avatar(style = i.top_background ? `background: url(${i.avatar}) left 28% / cover no-repeat #ffffffad;` : "")
                      .bber-content
                        .right
                          .bber-name=i.name
                          p.datacont= item.content
                            if item.image
                              .bber-container-img
                                each iten, indey in item.image
                                  a.bber-content-img(href=url_for(item.image[indey]), target="_blank",  data-fancybox="gallery", data-caption="")
                                    img(src=url_for(item.image[indey]))
                                .bber-content-noimg
                                .bber-content-noimg
                                .bber-content-noimg
                            if item.video
                              .bber-container-img
                                each iten, indey in item.video
                                  if (item.video[indey].includes('player.bilibili.com'))
                                    div(style="position: relative; padding: 30% 45%;margin-top: 10px;margin-bottom: 10px;")
                                      iframe(style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;margin: 0;border-radius: 12px;border: var(--style-border);" src=url_for(item.video[indey]) scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true")
                                  else
                                    a.bber-content-video(href=url_for(item.video[indey]) data-fancybox="gallery", data-caption="")
                                      video(src=url_for(item.video[indey]))
                                .bber-content-noimg
                                .bber-content-noimg
                                .bber-content-noimg
                            if item.aplayer
                              .bber-music
                                meting-js(id=item.aplayer.id, server=item.aplayer.server, type="song", mutex="true",preload="none", theme="var(--anzhiyu-main)", data-lrctype="0", order="list")
                          .bber-bottom
                            .bber-info-address
                              if item.address
                                  span=item.address
                            .bber-info-time
                              - var datedata = new Date(item.date).toISOString()
                              time.datatime(datetime= item.date)= datedata
                              .bber-info-link
                                if item.link
                                  a.bber-content-link(title="跳转到短文指引的链接", href=url_for(item.link),  rel="external nofollow")
                                    i.anzhiyufont.anzhiyu-icon-link
                                    | 链接
                              .bber-reply(onclick="rm.rightMenuCommentText(" + `'${item.content}'` + ")")
                                i.anzhiyufont.anzhiyu-icon-message
                      hr.essay-hr
          #bber-tips(style='color: var(--anzhiyu-secondtext);')
            ="- 只展示最近" + i.limit + "条短文 -"

第二步：添加自定义朋友圈样式

  1. 创建CSS文件

在 themes/anzhiyu/source/css/ 目录下，新建一个文件，命名为 essay-style.css。

  1. 粘贴CSS代码

    • 将下面的CSS代码完整复制到您刚创建的 essay-style.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
    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
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
      /* index */
      
      #essay_page .author-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: relative;
        top: -35px;
        z-index: 3;
    margin-right: 25px;
      }
      
      #essay_page .author-info .msg {
        display: flex;
        flex-direction: row-reverse;
    align-items: flex-start;
      }
      
      a.essay-avatar {
        height: 60px;
        width: 60px;
        display: block;
        border-radius: 10px;
    background: #fff;
      }
      
      [data-theme=dark] a.essay-avatar {
    background: #ffffffad;
      }
      
      .eassy-name {
        margin-right: 10px;
        padding-top: 2px;
        color: #eee;
        font-weight: 600;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
        display: -webkit-box;
    overflow: hidden;
      }
      
      .content.narrow-row {
    padding: 0 50px;
      }
      
      #bber {
    margin-top: -2rem;
      }
      
      #bber div.bber-content {
        position: relative;
    flex-direction: column;
      }
      
      #bber .bber-container-img {
    justify-content: flex-start;
      }
      
      #bber .bber-content-img,
      #bber .bber-content-video {
        width: 32%;
    margin-right: 1%;
      }
      
      #bber .bber-content .datacont {
        font-size: 14px;
        font-weight: 400;
    color: var(--font-color);
      }
      
      #bber .bber-content-img img {
    width: 100%;
      }
      
      #bber .bber-bottom {
    display: inline !important;
      }
      
      #bber>section>ul>li>div .bber-info-from,
      #bber>section>ul>li>div .bber-info-time {
        background: 0 0;
        padding: 0;
    height: 26px;
      }
      
      hr.essay-hr {
        margin: 25px auto;
    border: 1px solid var(--hr-border);
      }
      
      .bber-name,
      .user-avatar {
    display: none;
      }
      
      .bber-reply {
        position: absolute;
        right: 15px;
        bottom: 0;
        height: 26px;
    line-height: 26px;
      }
      
      time.datatime {
    font-size: 13px;
      }
      
      .bber-info-link {
        position: absolute;
        right: 40px;
        bottom: 0;
    line-height: 26px;
      }
      
      .bber-info-address {
        color: #4e9df8;
    font-size: .7rem;
      }
      
      div#bber-tips {
    padding-bottom: 20px;
      }
      
      @media screen and (max-width:900px),
      (max-height:580px) {
        body[data-type=essay] #body-wrap .layout #page {
      padding: 0 5px !important;
        }
      
        body[data-type=essay] div#post-comment {
      padding: 20px 15px !important;
        }
      
        body[data-type=essay] .layout {
      padding: 0 !important;
        }
      
        body[data-type=essay] .right {
      margin-left: 55px;
        }
      
        div#essay_page {
          border: var(--style-border);
          box-shadow: var(--anzhiyu-shadow-border);
      border-radius: 10px;
        }
      
        a.essay-avatar {
          height: 60px;
      width: 60px;
        }
      
        .author-content.author-content-item.essayPage.single {
          height: 16rem;
      border-radius: 10px;
        }
      
        #essay_page .desc {
      font-size: 14px;
        }
      
        #bber {
          margin-top: -3rem !important;
          width: 95%;
      margin: auto;
        }
      
        #bber .timeline ul li.bber-item {
          width: 95%;
          border: none;
          border-radius: 0;
          padding: 0;
          background: 0 0;
      box-shadow: none;
        }
      
        #bber .timeline ul li.bber-item:hover {
      border: none;
        }
      
        .bber-name {
          font-size: 16px;
          font-weight: 800;
      display: block;
        }
      
        .user-avatar {
          width: 45px;
          height: 45px;
          border-radius: 10px;
          overflow: hidden;
          position: absolute;
          display: block;
        }
      }
      
      /* 行内代码样式覆盖 - 去除背景，保持红色文字 */
      #article-container code {
        background: transparent !important;
        color: #d63200 !important;
        padding: 0 2px !important;
        margin: 0 2px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
      }
      
      /* 确保代码块内的代码不受影响 */
      #article-container figure.highlight pre code,
      #article-container figure.highlight code {
        background: transparent !important;
        color: inherit !important;
      }
      
      /* 深色模式下的适配 */
      [data-theme="dark"] #article-container code {
        color: #ff6b6b !important;
      }

第三步：在主题配置中注入新样式

  1. 打开主题配置文件 (themes/anzhiyu/_config.yml)。
  2. 找到 inject: 配置项，在 head: 列表中添加我们新建的CSS文件。
    1
    2
    3
    4
    inject:
      head:
        # - 其他 head 内容...
        - '<link rel="stylesheet" href="/css/essay-style.css">'

第四步：调整数据文件 (essay.yml)

为了匹配新的朋友圈样式（例如顶部的背景图、您的头像和昵称），我们需要在 source/_data/essay.yml 文件的配置部分，添加或修改一些字段。

  • 打开 source/_data/essay.yml 文件。

  • 在文件的最顶部的配置区（- 后面），确保包含以下字段：

    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
    # 这是一个列表，但通常我们只配置第一项作为整个页面的设置
    - 
      # --- 新增：用于朋友圈样式的顶部个人信息 ---
      name: "Prorise"                         # 【新增】您的昵称，会显示在背景图上方
      desc: "代码构建世界，思想驱动未来"     # 【新增】您的个性签名
      avatar: "/img/user/avatar.webp"      # 【新增】您的头像，请确保该路径下有您的头像图片
      avatarLink: /about/                  # 【新增】点击头像跳转的链接
      top_background: /img/background.png 

      # --- 页面原有配置 ---
      title: "即刻短文"                 # 页面大标题
      subTitle: "记录日常的灵感与碎碎念"   # 副标题
      tips: "随时随地，分享生活"            # 提示性文字
      buttonText: "关于我"                 # 页面顶部按钮的文字
      buttonLink: /about/                  # 页面顶部按钮的链接
      limit: 50                            # 首次加载显示的短文数量
      home_essay: true                     # 是否在首页也显示一个“即刻短文”的模块

      # --- 短文列表 (您的内容保持不变) ---
      essay_list:
        # 咖啡店的下午
        - content: "在街角的咖啡店码字，窗外雨滴敲击着玻璃，手边是一杯刚泡好的拿铁。这种氛围总是能激发创作灵感，也许这就是所谓的仪式感吧。"
          date: 2025-01-15 16:30:00
          image:
            - https://picsum.photos/800/600?random=2
          address: 上海, 淮海中路

        # 深夜debug
        - content: "终于解决了这个困扰我三天的bug！原来是一个逗号引起的血案...深夜调试虽然痛苦，但解决问题那一刻的成就感真的无价。"
          date: 2025-01-14 23:47:00
          from: VSCode

        # 旅行记录
        - content: "第一次来到这座城市，被古朴的建筑和现代化的天际线形成的对比深深震撼。每个城市都有自己的故事，而我正在成为这个故事的一部分。"
          date: 2025-01-13 19:20:00
          image:
            - https://picsum.photos/800/600?random=3
            - https://picsum.photos/800/600?random=4
          address: 成都, 春熙路

        # 读书感悟
        - content: "今天读完了《人类简史》最后一章，作者对未来的思考让我陷入了深思。技术进步的同时，我们是否也在失去什么珍贵的东西？"
          date: 2025-01-12 14:15:00
          link: https://book.douban.com/subject/25985021/

        # 美食分享
        - content: "试了家新开的日料店，师傅的手艺真的很棒！每一道菜都能感受到匠人精神，这种对细节的追求值得学习。"
          date: 2025-01-11 20:30:00
          image:
            - https://picsum.photos/800/600?random=5
          address: 北京, 三里屯

        # 技术分享
        - content: "发现了一个很有意思的开源项目，用AI生成像素艺术。技术与艺术的结合总是能创造出令人惊喜的作品。"
          date: 2025-01-10 11:00:00
          link: https://github.com/microsoft/Web-Dev-For-Beginners
          image:
            - https://picsum.photos/800/600?random=6

        # 运动记录
        - content: "今天晨跑5公里，看到了久违的日出。运动真的是最好的解压方式，身体和心情都变得轻松起来。"
          date: 2025-01-09 07:30:00
          image:
            - https://picsum.photos/800/600?random=7
          from: Nike Run Club

        # 音乐分享
        - content: "最近迷上了这首歌，旋律简单却很治愈。有时候音乐比任何语言都更能表达情感。"
          date: 2025-01-08 22:10:00
          aplayer:
            server: netease      
            id: '26664345'       

        # 工作感悟
        - content: "参加了团队的复盘会议，发现沟通真的是一门艺术。技术能力很重要，但如何有效传达想法同样关键。"
          date: 2025-01-07 17:45:00

        # 生活随想
        - content: "路过花店，被满店的向日葵吸引。它们总是朝向太阳，这种积极向上的态度值得学习。即使在阴霾的日子里，也要保持向光而行的心境。"
          date: 2025-01-06 13:20:00
          image:
            - https://picsum.photos/800/600?random=8
          address: 杭州, 西湖区

        # 学习笔记
        - content: "今天学了新的算法，递归的思想真的很巧妙。从复杂的问题中找到简单的规律，这或许就是编程的魅力所在。"
          date: 2025-01-05 16:00:00
          from: LeetCode

        # 周末时光
        - content: "周末在家做了顿丰盛的早餐，慢生活的节奏让人感到放松。有时候最简单的快乐就是一顿用心准备的饭菜。"
          date: 2025-01-04 09:30:00
          image:
            - https://picsum.photos/800/600?random=9