主题魔改-即刻短文

前言

修改即刻短文移动端样式，模仿微信朋友圈样式，效果查看朋友圈，移动端才会改变样式

第一步：修改 essay.pug

直接覆盖 themes/anzhiyu/layout/includes/page目录下essay.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
//- essay.pug 本人不太会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 + "条短文 -"

第二步：新建essay-style.css

在博客根目录下的source文件夹中新建一个static文件夹，再新建一个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
.author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    top: -35px;
    z-index: 3;
    margin-right: 25px;
}

.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;
    }

    .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;
    }
}

第三步：插入CSS和JS到Inject

在 _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/essay-style.css">

第四步：配置内容

另外贴出我的essay.yml文件，仅供参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- name: 梦爱吃鱼  # 姓名
  desc: 不负心灵，不负今生 # 个签
  avatar: https://lib.bsgun.cn/Hexo-static/img/avatar.256.avif # 头像
  avatarLink: /about/ # 点击头像跳转链接
  limit: 30
  home_essay: true
  top_background: https://lib.bsgun.cn/Hexo-static/img/essay-bg.avif #背景图
  essay_list:
  # - content:    # 内容
  #   date:       # 时间
  #   address:    # 位置
  #   link:       # 链接
  #   video:      # 视频链接 支持哔哩哔哩代码嵌入   控制视频是否自动播放&autoplay=0
  #     -
  #   image:      # 图片链接支持多个
  #     -
    - content: 看看我的新图床，在GitHub开源了OWO，演示站点下面链接
      date: 2024/07/10
      image:
        - https://lib.bsgun.cn/2024/07/27/597131.webp
      address: 郑州·金水区
      link: https://dev.ruom.top

最后

效果可以看本站的朋友圈页面，如果有什么问题欢迎评论区交流！