前言
修改即刻短文移动端样式，模仿微信朋友圈样式，效果查看
朋友圈，移动端才会改变样式
第一步：修改 essay.pug
直接覆盖 themes/anzhiyu/layout/includes/page目录下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 + "条短文 -"
第二步：新建essay-style.css
在博客根目录下的source文件夹中新建一个static文件夹，再新建一个essay-style.css，内容如下
.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文件夹下创建的文件夹，具体根据实际情况修改！
# 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文件，仅供参考
- 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.bsgun.cn
最后
效果可以看本站的朋友圈页面，如果有什么问题欢迎评论区交流！
评论区