静态即刻备份
即刻短文迁移备份
因为静态的即刻加载太慢了，所以决定删去这一部分！
安知鱼的即刻方案
css
/* 颜色 */
:root {
--anzhiyu-theme-op: #4259ef23;
--anzhiyu-gray-op: #9999992b;
--anzhiyu-theme-top: var(--anzhiyu-theme);
--anzhiyu-white: #fff;
--anzhiyu-white-op: rgba(255, 255, 255, 0.2);
--anzhiyu-black: #000;
--anzhiyu-black-op: rgba(0, 0, 0, 0.2);
--anzhiyu-none: rgba(0, 0, 0, 0);
--anzhiyu-gray: #999999;
--anzhiyu-yellow: #ffc93e;
--anzhiyu-border-radius: 8px;
--anzhiyu-main: var(--anzhiyu-theme);
--anzhiyu-main-op: var(--anzhiyu-theme-op);
--anzhiyu-shadow-theme: 0 8px 12px -3px var(--anzhiyu-theme-op);
--anzhiyu-shadow-main: 0 8px 12px -3px var(--anzhiyu-main-op);
--anzhiyu-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
--anzhiyu-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);
--anzhiyu-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
--anzhiyu-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
--anzhiyu-shadow-red: 0 8px 12px -3px #ee7d7936;
--anzhiyu-shadow-green: 0 8px 12px -3px #87ee7936;
--anzhiyu-shadow-border: 0 8px 16px -4px #2c2d300c;
--anzhiyu-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, 0.15);
--anzhiyu-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
--style-border: 1px solid var(--anzhiyu-card-border);
--anzhiyu-blue-main: #3b70fc;
--style-border-hover: 1px solid var(--anzhiyu-main);
--style-border-dashed: 1px dashed var(--anzhiyu-theme-op);
--style-border-avatar: 4px solid var(--anzhiyu-background);
--style-border-always: 1px solid var(--anzhiyu-card-border);
--style-border-none: 1px solid transparent;
--anzhiyu-white-acrylic1: #fefeff !important;
--anzhiyu-white-acrylic2: #fcfdff !important;
--anzhiyu-black-acrylic2: #08080a !important;
--anzhiyu-black-acrylic1: #0b0b0e !important;
--anzhiyu-main-none: #b8b8b800 !important;
}
[data-theme="light"] {
--anzhiyu-theme: #3b70fc;
--anzhiyu-theme-deep: #1856fb;
--anzhiyu-theme-op: #4259ef23;
--anzhiyu-blue: #3b70fc;
--anzhiyu-red: #d8213c;
--anzhiyu-pink: #ff7c7c;
--anzhiyu-green: #57bd6a;
--anzhiyu-fontcolor: #363636;
--anzhiyu-background: #f7f9fe;
--anzhiyu-reverse: #000;
--anzhiyu-maskbg: rgba(255, 255, 255, 0.6);
--anzhiyu-maskbgdeep: rgba(255, 255, 255, 0.85);
--anzhiyu-hovertext: var(--anzhiyu-theme);
--anzhiyu-ahoverbg: #f7f7fa;
--anzhiyu-lighttext: var(--anzhiyu-main);
--anzhiyu-secondtext: rgba(60, 60, 67, 0.6);
--anzhiyu-scrollbar: rgba(60, 60, 67, 0.4);
--anzhiyu-card-btn-bg: #edf0f7;
--anzhiyu-post-blockquote-bg: #fafcff;
--anzhiyu-post-tabs-bg: #f2f5f8;
--anzhiyu-secondbg: #f1f3f8;
--anzhiyu-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
--anzhiyu-card-bg: #fff;
--anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
--anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
--anzhiyu-card-border: #e3e8f7;
}
[data-theme="dark"] {
--global-bg: #191919;
--anzhiyu-theme: #0084ff;
--anzhiyu-theme-deep: #0076e5;
--anzhiyu-theme-op: #0084ff23;
--anzhiyu-blue: #0084ff;
--anzhiyu-red: #ff3842;
--anzhiyu-pink: #ff7c7c;
--anzhiyu-green: #57bd6a;
--anzhiyu-fontcolor: #f7f7fa;
--anzhiyu-background: #18171d;
--anzhiyu-reverse: #fff;
--anzhiyu-maskbg: rgba(0, 0, 0, 0.6);
--anzhiyu-maskbgdeep: rgba(0, 0, 0, 0.85);
--anzhiyu-hovertext: #0a84ff;
--anzhiyu-ahoverbg: #fff;
--anzhiyu-lighttext: #f2b94b;
--anzhiyu-secondtext: #a1a2b8;
--anzhiyu-scrollbar: rgba(200, 200, 223, 0.4);
--anzhiyu-card-btn-bg: #30343f;
--anzhiyu-post-blockquote-bg: #000;
--anzhiyu-post-tabs-bg: #121212;
--anzhiyu-secondbg: #30343f;
--anzhiyu-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
--anzhiyu-card-bg: #1d1b26;
--anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
--anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
--anzhiyu-card-border: #42444a;
}
创建数据
创建 source/_data/essay.yml
- class_name: 即刻短文
essay_list:
- content: 朋友圈钓鱼样式修复
date: 2024/6/17 16:45:00
from: 安小歪
- content: 高考结束了，等待出分！
date: 2024/6/9 19:45:00
from: 安小歪
- content: 下午就要开学了！面临高考，要加油了~
date: 2024/2/25 10:45:00
from: 安小歪
- content: 15天假期过完了，要开学了！（哭死）
date: 2023/8/22 20:40:00
from: 安小歪
- content: 山东平原发生了6.4级地震，周围部分地区有震感，我也是半夜被震醒了，当时以为做梦火车从旁边经过捏emmm，迷迷糊糊的我感觉到地和床晃了。希望大家都平安~
date: 2023/8/6 02:33:59
from: 安小歪
- content: 用vercel部署了一个uptimerobot(*^▽^*)
date: 2023/7/15 08:00:00
from: 安小歪
- content: 在SZ・Ninty的帮助下，也是把即刻短文整好了，(｡◕◡◕｡)ﾉ
date: 2023/7/14
link: https://blog.sinzmise.top/
- content: 遇见彩虹🌈吃定彩虹
date: 2022/10/23 10:00:00
image:
- https://img02.anheyu.com/adminuploads/1/2022/10/23/6354ea92960ef.webp
- content: ThreeJs API真多丫
date: 2022/10/19
- content: 歌曲推荐
date: 2022/09/25
aplayer:
server: tencent
id: 001FGQba3i10mw
创建 md 页面文件
创建source/essay/index.md来生成页面 page
---
title: 即刻短文
date: 2020-07-22 22:06:17
comments: true
aside: false
top_img: false
type: essay
---
创建 dom 文件
创建themes/butterfly/layout/includes/page/essay.pug, 页面内容, 注意该页面中可能存在部分fontawesome 图标需要自行替换。
#essay_page
.author-content.author-content-item.essayPage.single
.card-content
.author-content-item-tips 即刻短文
span.author-content-item-title 安小歪的日常生活。
.content-bottom
.tips 使用 即刻短文静态部署版 构建
.banner-button-group
a.banner-button(onclick='pjax.loadUrl("/about/")', data-pjax-state)
i.fas.fa-circle-right(style='font-size: 1.5rem')
span.banner-button-text 关于我
#bber
section.timeline.page-1
ul#waterfall.list
each i in site.data.essay
each item, index in i.essay_list
if index < 30
li.bber-item
.bber-content
p.datacont= item.content
if item.image
.bber-container-img
each iten, indey in item.image
a.bber-content-img(href=item.image[indey], target="_blank", data-fancybox="gallery", data-caption="")
img(src=item.image[indey])
.bber-content-noimg
.bber-content-noimg
.bber-content-noimg
if item.aplayer
.bber-music
.aplayer.no-destroy(data-id=item.aplayer.id data-server=item.aplayer.server data-type="song" data-order="list" data-preload="none" data-autoplay="false" data-mutex="true" data-theme='var(--anzhiyu-main)')
hr
.bber-bottom
.bber-info
.bber-info-time
- var datedata = new Date(item.date).toISOString()
i.far.fa-clock
time.datatime(datetime= item.date)= datedata
if item.link
a.bber-content-link(target="_blank", title="跳转到短文指引的链接", href=item.link, rel="external nofollow")
i.fas.fa-link
| 链接
if item.from
.bber-info-from
i.fas.fa-fire
span=item.from
.bber-reply(onclick="anzhiyu.commentText(" + `'${item.content}'` + ")")
i.fa-solid.fa-message
#bber-tips(style='color: var(--anzhiyu-secondtext);')
| - 只展示最近30条短文 -
修改 Page 文件
修改themes/butterfly/layout/page.pug来使页面内容匹配
在 case page.type子项里面添加, 注意缩进
extends includes/layout.pug
block content
#page
if top_img === false
h1.page-title= page.title
case page.type
when 'essay'
include includes/page/essay.pug
when 'tags'
include includes/page/tags.pug
when 'about'
include includes/page/about.pug
when 'tags'
include includes/page/tags.pug
when 'link'
include includes/page/flink.pug
when 'categories'
include includes/page/categories.pug
default
include includes/page/default-page.pug
if page.comments !== false && theme.comments && theme.comments.use
- var commentsJsLoad = true
!=partial('includes/third-party/comments/index', {}, {cache: true})
加入 css
创建source/css/essay_page/essay_page.css, 然后在_config.butterfly.yml中的inject下的head引入, 注意缩进
#page:has(#essay_page) {
border: 0;
box-shadow: none !important;
padding: 0 !important;
background: transparent !important;
}
#page:has(#essay_page) .page-title {
display: none;
}
#web_bg ~ .page:has(#essay_page) {
background: var(--anzhiyu-background);
}
#bber .bber-container-img {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
flex-wrap: wrap;
margin-bottom: 0.3rem;
}
#bber .bber-container-img .bber-content-noimg {
width: calc(100% / 4 - 5px);
}
#bber .bber-content-img img {
object-fit: cover;
max-height: 100%;
border-radius: 12px;
}
#bber .bber-content-img {
height: 100px;
border-radius: 12px;
overflow: hidden;
display: flex;
position: relative;
width: calc(100% / 4 - 5px);
margin-bottom: 10px;
}
#bber .bber-content .datacont {
order: 0;
font-size: 0.8rem;
font-weight: 700;
color: var(--anzhiyu-fontcolor);
width: 100%;
line-height: 1.38;
border-radius: 12px;
margin-bottom: 0.5rem;
display: flex;
flex-direction: column;
text-align: justify;
}
#bber p {
margin: 0px;
}
#bber div.bber-content {
display: flex;
flex-flow: wrap;
border-radius: 12px;
width: 100%;
height: 100%;
}
#bber .timeline ul li.bber-item {
position: relative;
width: 32%;
border: var(--style-border-always);
border-radius: 12px;
padding: 1rem 1rem 0.5rem;
transition: all 0.3s ease 0s;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: flex-start;
background: var(--anzhiyu-card-bg);
box-shadow: var(--anzhiyu-shadow-border);
margin-right: 2%;
}
#bber .timeline #waterfall.show {
opacity: 1;
}
#bber .timeline #waterfall {
opacity: 0;
transition: all 0.3s ease 0s;
}
#bber ul.list {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#bber {
margin-top: 1rem;
width: 100%;
}
#bber > section > ul > li.bber-item {
margin-bottom: 1rem;
}
#bber-tips {
font-size: 14px;
display: flex;
justify-content: center;
margin-top: 1rem;
}
#bber .timeline ul li.bber-item hr {
display: flex;
position: relative;
margin: 8px 0px;
border: 1px dashed var(--anzhiyu-theme-op);
width: 100%;
}
#bber .bber-info {
display: flex;
align-items: center;
}
#bber > section > ul > li > div .bber-info-time,
#bber > section > ul > li > div .bber-info-from {
color: var(--anzhiyu-fontcolor);
font-size: 0.7rem;
background-color: var(--anzhiyu-gray-op);
padding: 0px 8px;
border-radius: 20px;
cursor: default;
display: flex;
align-items: center;
}
#bber .bber-info .far.fa-clock {
margin-right: 4px;
}
#bber > section > ul > li > div .bber-info-from span,
#bber > section > ul > li > div .bber-info-from {
margin-left: 4px;
}
#bber .bber-bottom {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 10px;
}
#bber .bber-bottom .bber-reply {
cursor: pointer;
}
#bber .timeline ul li.bber-item:hover {
border: var(--style-border-hover);
}
#bber .bber-content-link {
display: flex;
margin-left: 0.5rem;
font-size: 0.7rem;
align-items: center;
background-color: rgba(245, 108, 108, 0.13);
color: rgb(245, 108, 108);
padding: 0px 8px;
border-radius: 20px;
}
#bber .bber-content-link i {
margin-right: 3px;
}
#bber .bber-content-link:hover {
background-color: var(--anzhiyu-main);
color: var(--anzhiyu-white);
}
#bber .bber-music {
width: 100%;
height: 90px;
margin: 0.5rem 0;
border-radius: 8px;
overflow: hidden;
border: var(--style-border-always);
background: var(--anzhiyu-secondbg);
}
#bber .aplayer {
margin: 0;
}
#bber .aplayer.aplayer-withlrc .aplayer-pic {
height: 82px;
width: 82px;
margin: 4px;
border-radius: 4px;
}
.bber-music .aplayer.aplayer-withlrc .aplayer-info {
padding: 5px 7px 0;
}
#bber .aplayer .aplayer-info .aplayer-music {
height: 23px;
}
#bber .aplayer .aplayer-info .aplayer-music .aplayer-title {
font-size: 0.8rem;
font-weight: 700;
margin: 0;
color: var(--anzhiyu-fontcolor);
}
#bber .aplayer .aplayer-info .aplayer-controller {
align-items: center;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
padding: 0;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
position: initial;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
background: var(--anzhiyu-gray);
height: 8px;
border-radius: 12px;
transition: 0.3s;
overflow: hidden;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
height: 100%;
border-radius: 12px;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
height: 100%;
border-radius: 12px;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
display: none;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
position: initial;
}
/* 顶部样式 */
.author-content.author-content-item.essayPage {
height: 19rem;
background: url(https://hexo.shangskr.top/img/guangyu.jpg) left 28% / cover no-repeat;
color: var(--anzhiyu-white);
overflow: hidden;
margin-top: 0px;
}
#page:has(#essay_page) .author-content-item .card-content .banner-button-group .banner-button:hover {
color: var(--anzhiyu-white);
border-radius: 20px !important;
}
/* 响应式 */
@media screen and (max-width: 1300px) {
#bber .timeline ul li.bber-item {
width: 49%;
margin-right: 1%;
}
}
@media screen and (max-width: 768px) {
#bber .timeline ul li.bber-item {
width: 100%;
margin-right: 0px;
}
}
[data-theme="dark"] #bber .bber-music .aplayer,
[data-theme="dark"] #bber .aplayer .aplayer-lrc:before,
[data-theme="dark"] #bber .aplayer .aplayer-lrc:after {
background: var(--anzhiyu-card-bg);
color: var(--anzhiyu-fontcolor);
}
#bber .aplayer .aplayer-lrc p {
color: var(--anzhiyu-fontcolor);
}
inject:
head:
- <link rel="stylesheet" href="/css/essay_page/essay_page.css">
js 处理
新建一个 js 文件用来处理即刻短文的逻辑, 或者写在公共 js 中也可以, 博主写在公共 js 中, 即custom.js, 该 js 在_config.butterfly.yml中的inject使用如下方式引入, 加入了data-pjax, 并且开启了站点的pjax, 然后再引入waterfall.js用于处理瀑布流。
inject:
bottom:
- <script async data-pjax src="/js/custom.js"></script>
# 即刻依赖waterfall
- <script async data-pjax src="/js/waterfall/waterfall.js"></script>
# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
enable: true
exclude:
新建 source/js/waterfall/waterfall.js 内容如下
function waterfall(a) {
function b(a, b) {
var c = window.getComputedStyle(b);
return parseFloat(c["margin" + a]) || 0;
}
function c(a) {
return a + "px";
}
function d(a) {
return parseFloat(a.style.top);
}
function e(a) {
return parseFloat(a.style.left);
}
function f(a) {
return a.clientWidth;
}
function g(a) {
return a.clientHeight;
}
function h(a) {
return d(a) + g(a) + b("Bottom", a);
}
function i(a) {
return e(a) + f(a) + b("Right", a);
}
function j(a) {
a = a.sort(function (a, b) {
return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a);
});
}
function k(b) {
f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a));
}
"string" == typeof a && (a = document.querySelector(a));
var l = [].map.call(a.children, function (a) {
return (a.style.position = "absolute"), a;
});
a.style.position = "relative";
var m = [];
l.length && ((l[0].style.top = "0px"), (l[0].style.left = c(b("Left", l[0]))), m.push(l[0]));
for (var n = 1; n < l.length; n++) {
var o = l[n - 1],
p = l[n],
q = i(o) + f(p) <= f(a);
if (!q) break;
(p.style.top = o.style.top), (p.style.left = c(i(o) + b("Left", p))), m.push(p);
}
for (; n < l.length; n++) {
j(m);
var p = l[n],
r = m.pop();
(p.style.top = c(h(r) + b("Top", p))), (p.style.left = c(e(r))), m.push(p);
}
j(m);
var s = m[0];
a.style.height = c(h(s) + b("Bottom", s));
var t = f(a);
window.addEventListener ? window.addEventListener("resize", k) : (document.body.onresize = k);
}
custom.js内容如下
var percentFlag = false; // 节流阀
function essayScroll() {
let a = document.documentElement.scrollTop || window.pageYOffset; // 卷去高度
const waterfallResult = a % document.documentElement.clientHeight; // 卷去一个视口
result <= 99 || (result = 99);
if (
!percentFlag &&
waterfallResult + 100 >= document.documentElement.clientHeight &&
document.querySelector("#waterfall")
) {
// console.info(waterfallResult, document.documentElement.clientHeight);
setTimeout(() => {
waterfall("#waterfall");
}, 500);
} else {
setTimeout(() => {
document.querySelector("#waterfall") && waterfall("#waterfall");
}, 500);
}
const r = window.scrollY + document.documentElement.clientHeight;
let p = document.getElementById("post-comment") || document.getElementById("footer");
(p.offsetTop + p.offsetHeight / 2 < r || 90 < result) && (percentFlag = true);
}
function replaceAll(e, n, t) {
return e.split(n).join(t);
}
var anzhiyu = {
diffDate: function (d, more = false) {
const dateNow = new Date();
const datePost = new Date(d);
const dateDiff = dateNow.getTime() - datePost.getTime();
const minute = 1000 * 60;
const hour = minute * 60;
const day = hour * 24;
const month = day * 30;
let result;
if (more) {
const monthCount = dateDiff / month;
const dayCount = dateDiff / day;
const hourCount = dateDiff / hour;
const minuteCount = dateDiff / minute;
if (monthCount >= 1) {
result = datePost.toLocaleDateString().replace(/\//g, "-");
} else if (dayCount >= 1) {
result = parseInt(dayCount) + " " + GLOBAL_CONFIG.date_suffix.day;
} else if (hourCount >= 1) {
result = parseInt(hourCount) + " " + GLOBAL_CONFIG.date_suffix.hour;
} else if (minuteCount >= 1) {
result = parseInt(minuteCount) + " " + GLOBAL_CONFIG.date_suffix.min;
} else {
result = GLOBAL_CONFIG.date_suffix.just;
}
} else {
result = parseInt(dateDiff / day);
}
return result;
},
changeTimeInEssay: function () {
document.querySelector("#bber") &&
document.querySelectorAll("#bber time").forEach(function (e) {
var t = e,
datetime = t.getAttribute("datetime");
(t.innerText = anzhiyu.diffDate(datetime, true)), (t.style.display = "inline");
});
},
reflashEssayWaterFall: function () {
document.querySelector("#waterfall") &&
setTimeout(function () {
waterfall("#waterfall");
document.getElementById("waterfall").classList.add("show");
}, 500);
},
commentText: function (e) {
if (e == "undefined" || e == "null") e = "好棒！";
var n = document.getElementsByClassName("el-textarea__inner")[0],
t = document.createEvent("HTMLEvents");
if (!n) return;
t.initEvent("input", !0, !0);
var o = replaceAll(e, "\n", "\n> ");
(n.value = "> " + o + "\n\n"), n.dispatchEvent(t);
var i = document.querySelector("#post-comment").offsetTop;
window.scrollTo(0, i - 80),
n.focus(),
n.setSelectionRange(-1, -1),
document.getElementById("comment-tips") && document.getElementById("comment-tips").classList.add("show");
},
};
anzhiyu.changeTimeInEssay();
anzhiyu.reflashEssayWaterFall();
其中anzhiyu变量中存储的四个方法
diffDate为处理时间的方法,其实 btf 中也有,只是不太喜欢那个的显示方式,就改成现在这个了。changeTimeInEssay 初始化即刻时间reflashEssayWaterFall 处理瀑布流显示commentText 处理点击跳转评论并添加评论
方法essayScroll为检查滚动条卷去一个视口高度的 100 范围内执行一次, 滑动到底部或评论区取消监听执行。此处博主未做 else 处理取消监听, 如果有写percent函数监听滑动可以一起写在同一个方法里面。（博主就是写在同一个方法里面）, 如果即刻文章很少的话其实是可以不监听滑动的, 即只显示近 30 条, 因为进入页面后会执行一次瀑布流, 页面不会乱, 但是如果您把 essay.pug 中 17 行左右修改后可以达到无限的效果就会出现 dom 结构还没渲染瀑布流就已经执行完了的情况就需要监听滚动来再次执行瀑布流以完成布局。
首页滚动显示即刻(可选)
创建 themes/butterfly/layout/includes/bbTimeList.pug, 部分fontawesome图标可能需要您自行修改
#bbTimeList.bbTimeList.container
i.anzhiyufont.anzhiyu-icon-jike.bber-logo.fontbold(onclick=`pjax.loadUrl("/essay/")`,title="即刻短文", aria-hidden="true")
#bbtalk.swiper-container.swiper-no-swiping.essay_bar_swiper_container(tabindex="-1")
#bber-talk.swiper-wrapper(onclick=`pjax.loadUrl("/essay/")`)
each i in site.data.essay
each item, index in i.essay_list
if index < 10
- var contentText = item.image ? item.content + ' [图片]' : item.content
.li-style.swiper-slide= contentText
i.bber-gotobb.fas.fa-arrow-circle-right(onclick=`pjax.loadUrl("/essay/")`,title="查看全文")
引入到主页
修改themes/butterfly/layout/index.pug, 注意缩进
extends includes/layout.pug
block content
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts
include includes/categoryBar.pug
+postUI
include includes/pagination.pug
如果需要像本站一样在整个顶部引入的话可以参考下面的代码，修改themes/butterfly/layout/includes/layout.pug
- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
- page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
- var pageType = is_post() ? 'post' : 'page'
doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
head
include ./head.pug
body
if theme.preloader.enable
!=partial('includes/loading/index', {}, {cache: true})
if theme.background
#web_bg
!=partial('includes/sidebar', {}, {cache: true})
if theme.background
#svg_bg
!=partial('includes/sidebar', {}, {cache: true})
if page.type !== '404'
#body-wrap(class=pageType)
include ./header/index.pug
if (is_home())
include ./bbTimeList.pug
main#content-inner.layout(class=hideAside)
if body
div!= body
else
block content
if theme.aside.enable && page.aside !== false
include widget/index.pug
- var footerBg = theme.footer_bg
if (footerBg)
if (footerBg === true)
- var footer_bg = bg_img
else
- var footer_bg = isImgOrUrl(theme.footer_bg) ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
else
- var footer_bg = ''
footer#footer(style=footer_bg)
!=partial('includes/footer', {}, {cache: true})
else
include ./404.pug
include ./rightside.pug
include ./additional-js.pug
!=partial('includes/third-party/search/index', {}, {cache: true})
引入 swiper 依赖
在_config.butterfly.yml引入依赖, 如果有使用轮播图插件的话此处无需引入
inject:
head:
- <link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper.min.css">
bottom:
- <script data-pjax src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/swiper.min.js"></script>
添加自定义 css
创建source/css/essay_page/home_essay_bar.css, 然后在_config.butterfly.yml中的inject下的head引入, 注意缩进
inject:
head:
- <link rel="stylesheet" href="/css/essay_page/home_essay_bar.css">
#bbTimeList {
background: var(--anzhiyu-white);
color: var(--anzhiyu-fontcolor);
padding: 0.5rem 1rem;
border-radius: 30px;
box-shadow: var(--anzhiyu-shadow-lightblack);
display: flex;
transition: all 0.3s ease 0s;
margin: 1rem auto 0;
border: 3px solid #19a5c1;
align-items: center;
width: 75%;
padding: 8px 10px;
max-width: 1170px;
width: 97%;
}
[data-theme="dark"] #bbTimeList,[data-theme="dark"] #category-bar {
background: #000 !important;
}
#bbtalk {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#bber-talk {
width: 100%;
height: 25px;
line-height: 25px;
display: flex;
flex-direction: column;
}
.bber-logo {
font-size: 2rem;
line-height: 22px;
margin-right: 1rem;
transition: all 0.3s ease 0s;
cursor: pointer;
font-weight: 500;
}
.bber-gotobb {
line-height: 25px;
margin-left: 1rem;
transition: all 0.3s ease 0s;
cursor: pointer;
}
#bber-talk .li-style {
width: 100%;
max-width: 100%;
height: 25px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
transition: 0.3s;
font-weight: 700;
margin: auto;
cursor: pointer;
white-space: nowrap;
}
#bbTimeList:hover {
border: var(--style-border-hover);
box-shadow: var(--anzhiyu-shadow-main);
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-1turn);
transform: rotate(-1turn);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-1turn);
transform: rotate(-1turn);
}
}
修改自定义 js
修改custom.js
var percentFlag = false; // 节流阀
function essayScroll() {
let a = document.documentElement.scrollTop || window.pageYOffset; // 卷去高度
const waterfallResult = a % document.documentElement.clientHeight; // 卷去一个视口
result <= 99 || (result = 99);
if (
!percentFlag &&
waterfallResult + 100 >= document.documentElement.clientHeight &&
document.querySelector("#waterfall")
) {
// console.info(waterfallResult, document.documentElement.clientHeight);
setTimeout(() => {
waterfall("#waterfall");
}, 500);
} else {
setTimeout(() => {
document.querySelector("#waterfall") && waterfall("#waterfall");
}, 500);
}
const r = window.scrollY + document.documentElement.clientHeight;
let p = document.getElementById("post-comment") || document.getElementById("footer");
(p.offsetTop + p.offsetHeight / 2 < r || 90 < result) && (percentFlag = true);
}
function replaceAll(e, n, t) {
return e.split(n).join(t);
}
var anzhiyu = {
diffDate: function (d, more = false) {
const dateNow = new Date();
const datePost = new Date(d);
const dateDiff = dateNow.getTime() - datePost.getTime();
const minute = 1000 * 60;
const hour = minute * 60;
const day = hour * 24;
const month = day * 30;
let result;
if (more) {
const monthCount = dateDiff / month;
const dayCount = dateDiff / day;
const hourCount = dateDiff / hour;
const minuteCount = dateDiff / minute;
if (monthCount >= 1) {
result = datePost.toLocaleDateString().replace(/\//g, "-");
} else if (dayCount >= 1) {
result = parseInt(dayCount) + " " + GLOBAL_CONFIG.date_suffix.day;
} else if (hourCount >= 1) {
result = parseInt(hourCount) + " " + GLOBAL_CONFIG.date_suffix.hour;
} else if (minuteCount >= 1) {
result = parseInt(minuteCount) + " " + GLOBAL_CONFIG.date_suffix.min;
} else {
result = GLOBAL_CONFIG.date_suffix.just;
}
} else {
result = parseInt(dateDiff / day);
}
return result;
},
changeTimeInEssay: function () {
document.querySelector("#bber") &&
document.querySelectorAll("#bber time").forEach(function (e) {
var t = e,
datetime = t.getAttribute("datetime");
(t.innerText = anzhiyu.diffDate(datetime, true)), (t.style.display = "inline");
});
},
reflashEssayWaterFall: function () {
document.querySelector("#waterfall") &&
setTimeout(function () {
waterfall("#waterfall");
document.getElementById("waterfall").classList.add("show");
}, 500);
},
commentText: function (txt) {
const postCommentDom = document.querySelector("#post-comment");
var domTop = postCommentDom.offsetTop;
window.scrollTo(0, domTop - 80);
if (txt == "undefined" || txt == "null") txt = "好棒！";
function setText() {
setTimeout(() => {
var input = document.getElementsByClassName("el-textarea__inner")[0];
if (!input) setText();
let evt = document.createEvent("HTMLEvents");
evt.initEvent("input", true, true);
let inputValue = replaceAll(txt, "\n", "\n> ");
input.value = "> " + inputValue + "\n\n";
input.dispatchEvent(evt);
input.focus();
input.setSelectionRange(-1, -1);
if (document.getElementById("comment-tips")) {
document.getElementById("comment-tips").classList.add("show");
}
}, 100);
}
setText();
},
initIndexEssay: function () {
setTimeout(() => {
let essay_bar_swiper = new Swiper(".essay_bar_swiper_container", {
passiveListeners: true,
direction: "vertical",
loop: true,
autoplay: {
disableOnInteraction: true,
delay: 3000,
},
mousewheel: true,
});
let essay_bar_comtainer = document.getElementById("bbtalk");
if (essay_bar_comtainer !== null) {
essay_bar_comtainer.onmouseenter = function () {
essay_bar_swiper.autoplay.stop();
};
essay_bar_comtainer.onmouseleave = function () {
essay_bar_swiper.autoplay.start();
};
}
}, 100);
},
};
anzhiyu.initIndexEssay();
anzhiyu.changeTimeInEssay();
anzhiyu.reflashEssayWaterFall();
主要是新增了在anzhiyu变量中的initIndexEssay方法, 该方法用于初始化 swiper轮播。