该文章主要是基于安知鱼博客修改的
安知鱼博客Doc：https://docs.anheyu.com/
安知鱼博客：https://blog.anheyu.com/
添加即刻说说标签
效果
我添加了测试标签
开启Fontawesome图标引入
在icons中开启fontawesome引入，将false改为true，如下
yaml
icons:
ali_iconfont_js: # 阿里图标symbol 引用链接，主题会进行加载 symbol 引用
fontawesome: true #是否启用fontawesome6图标
fontawesome_animation_css:
添加pug渲染
在themes/anzhiyu/layout/includes/page/essay.pug文件，大概63行下添加以下+号的内容（删除+号）
if item.address
.bber-info-from
i.anzhiyufont.anzhiyu-icon-location-dot
span=item.address
//- 自定义新添加添加标签部分
+ if item.tag
+ .bber-info-from-tag
+ i.fa-solid.fa-wand-magic-sparkles
+ span=item.tag
添加CSS
在~/source/data/css/custom.css创建custom.css文件，插入以下内容
css
/* 即刻说说的tag标签颜色 */
#bber .bber-info-from-tag {
display: flex;
margin-left: 0.5rem;
font-size: 0.7rem;
align-items: center;
background-color: rgba(78, 181, 213, 0.13);
color: rgb(53, 163, 206);
padding: 0px 8px;
border-radius: 20px;
}
引入CSS
在博客根目录~/.anzhiyu.config.yml配置文件中，找到inject配置，在head引入刚刚新建的CSS文件
yaml
inject:
head:
# 自定义css
- <link rel="stylesheet" href="/data/css/custom.css" media="defer" onload="this.media='all'">
添加tag
添加tag内容，渲染即可得到想要的效果
yaml
- title: 即刻短文
subTitle: 小码同学的日常生活。
tips: 随时随地，分享生活
buttonText: 关于我
buttonLink: /about/
limit: 30
home_essay: true
top_background: https://images.hikki.site/blog-static/65955a96d927a-6UxdLn.png
essay_list:
- content: 毕业咯
date: 2024/6/24
tag: 测试
link: https://baidu.com
解决DocSearch搜索按钮点击无反应
在点击搜索按钮是，在控制台会显示anzhiyu没有定义。
修改源码：~\themes\anzhiyu\layout\includes\third-party\search\docsearch.pug文件
将以下代码替换成原来的代码
- const { appId, apiKey, indexName, option } = theme.docsearch
.docsearch-wrap
#docsearch(style="display:none")
link(rel="stylesheet" href=url_for(theme.asset.docsearch_css))
script(src=url_for(theme.asset.docsearch_js))
script.
(() => {
docsearch(Object.assign({
appId: '!{appId}',
apiKey: '!{apiKey}',
indexName: '!{indexName}',
container: '#docsearch',
}, !{JSON.stringify(option)}))
//- const handleClick = () => {
//- document.querySelector('.DocSearch-Button').click()
//- }
//- const searchClickFn = () => {
//- anzhiyu.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', handleClick)
//- }
const searchClickFn = () => {
document.querySelector('#search-button > .search').addEventListener('click', () => {
document.querySelector('.DocSearch-Button').click()
})
}
searchClickFn()
window.addEventListener('pjax:complete', searchClickFn)
})()
添加节假日倒计时
效果
添加card_countdown.pug
新建card_countdown.pug文件，如目录~\themes\anzhiyu\layout\includes\widget\card_countdown.pug
if theme.aside.card_countdown.enable
.card-widget#card-countdown
将card_countdown.pug引入到index.pug
编辑~\themes\anzhiyu\layout\includes\widget\index.pug文件，添加如下代码14行和27行，引入card_countdown.pug渲染模板到index.pug中。（tips：记得删除+号）
#aside-content.aside-content
//- post
if is_post()
- const tocStyle = page.toc_style_simple
- const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
if showToc && tocStyleVal
.sticky_layout
include ./card_post_toc.pug
else
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})
!=partial('includes/widget/card_weixin', {}, {cache: true})
!=partial('includes/widget/card_top_self', {}, {cache: true})
+ !=partial('includes/widget/card_countdown', {}, {cache: true})
.sticky_layout
if showToc
include ./card_post_toc.pug
!=partial('includes/widget/card_recent_post', {}, {cache: true})
!=partial('includes/widget/card_ad', {}, {cache: true})
else
//- page
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})
!=partial('includes/widget/card_weixin', {}, {cache: true})
!=partial('includes/widget/card_top_self', {}, {cache: true})
!=partial('includes/widget/card_categories', {}, {cache: true})
+ !=partial('includes/widget/card_countdown', {}, {cache: true})
.sticky_layout
if showToc
include ./card_post_toc.pug
.card-widget
!=partial('includes/widget/card_ad', {}, {cache: true})
!=partial('includes/widget/card_tags', {}, {cache: true})
!=partial('includes/widget/card_archives', {}, {cache: true})
!=partial('includes/widget/card_webinfo', {}, {cache: true})
!=partial('includes/widget/card_bottom_self', {}, {cache: true})
添加JavaScript脚本和CSS
js脚本
添加脚本在你想添加的js文件中，我这里添加到~\source\data\js\utils.js文件，写入以下内容：
javascript
const ddr = [
{ name: '清明节', time: '2025-04-04', desc: '放一天，连续三天，不调休' },
{ name: '劳动节', time: '2025-05-01', desc: '放五天，调休' },
{ name: '端午节', time: '2025-05-31', desc: '放一天，连续三天，不调休' },
{ name: '国庆节', time: '2025-10-01', desc: '连中秋一共8天，调休' },
{ name: '中秋节', time: '2025-10-06', desc: '连中秋一共8天，调休' },
{ name: '元旦', time: '2026-01-01', desc: '放一天，不调休' },
{ name: '除夕', time: '2026-02-16', desc: '放10天，调休' },
{ name: '春节', time: '2026-02-17', desc: '放10天，调休' }
];
function calculateRemaining(targetDate) {
const now = new Date();
const target = new Date(targetDate);
const diff = target - now;
if (diff <= 0) return null; // 已过时
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
return { days, hours, minutes, seconds };
}
function formatTime(unit, label) {
return unit > 0 ? `${unit.toString().padStart(2, '0')}${label}` : '';
}
function displayCountdowns() {
const container = document.getElementById('card-countdown');
container.innerHTML = '';
ddr.forEach(event => {
const remaining = calculateRemaining(event.time);
const item = document.createElement('div');
item.className = 'countdown-item';
if (remaining) {
item.innerHTML = `
<span class="holiday-name">
${event.name}
</span>
<span>
还有：${remaining.days}天
${remaining.hours}时
${remaining.minutes}分
</span>
`;
} else {
item.innerHTML = `
<div class="holiday-name" style="color:#95a5a6;">${event.name}</div>
<div style="color:#95a5a6;">已结束</div>
`;
}
container.appendChild(item);
});
}
// 初始加载
displayCountdowns();
ddr变量中有几个属性，icon图标，使用的是fontawesome图标库，name是节假日名称，time是未来的时间
CSS文件
添加css样式文件，我这里添加到~\source\data\css\custom.css文件，写入以下内容：
css
.holiday-name {
color: #2c3e50;
font-weight: bold;
margin-bottom: 5px;
}
引入资源
在配置文件_config.anzhiyu.yml文件中引入utils.js文件
yaml
inject:
head:
# 自定义css
- <link rel="stylesheet" href="/data/css/custom.css" media="defer" onload="this.media='all'">
bottom:
# 自定义js
- <script src="/data/js/utils.js"></script>
开启倒计时
在配置文件_config.anzhiyu.yml中找到aside下，添加如下内容：
yaml
card_countdown: # 节假日倒计时
enable: true
DocSearch参考：
本文章来源于我的博客：https://blog.hikki.site
本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自 小码同学
评论
隐私政策
0/500
滚动到此处加载评论...