安知鱼博客主题整改

该文章主要是基于安知鱼博客修改的

安知鱼博客Doc：https://docs.anheyu.com/

安知鱼博客：https://blog.anheyu.com/

添加即刻说说标签

效果

我添加了测试标签

标签效果图

开启Fontawesome图标引入

在icons中开启fontawesome引入，将false改为true，如下

1
2
3
4
icons:
  ali_iconfont_js: # 阿里图标symbol 引用链接，主题会进行加载 symbol 引用
  fontawesome: true #是否启用fontawesome6图标
  fontawesome_animation_css:

添加pug渲染

在themes/anzhiyu/layout/includes/page/essay.pug文件，大概63行下添加以下+号的内容（删除+号）

1
2
3
4
5
6
7
8
9
                      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文件，插入以下内容

1
2
3
4
5
6
7
8
9
10
11
/* 即刻说说的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文件

1
2
3
4
inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="/data/css/custom.css" media="defer" onload="this.media='all'">

添加tag

添加tag内容，渲染即可得到想要的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
- title: 即刻短文
  subTitle: 小码同学的日常生活。
  tips: 随时随地，分享生活
  buttonText: 关于我
  buttonLink: /about/
  limit: 30
  home_essay: true
  top_background: https://bu.dusays.com/2024/01/03/65955a96d927a.png
  essay_list: 
    - content: 毕业咯
      date: 2024/6/24
      tag: 测试
      link: https://baidu.com

解决DocSearch搜索按钮点击无反应

在点击搜索按钮是，在控制台会显示anzhiyu没有定义。

修改源码：~\themes\anzhiyu\layout\includes\third-party\search\docsearch.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
- 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

1
2
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：记得删除+号）

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
#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文件，写入以下内容：

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
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文件，写入以下内容：

1
2
3
4
5
.holiday-name {
	color: #2c3e50;
	font-weight: bold;
	margin-bottom: 5px;
}

引入资源

在配置文件_config.anzhiyu.yml文件中引入utils.js文件

1
2
3
4
5
6
7
8
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下，添加如下内容：

1
2
card_countdown: # 节假日倒计时
  enable: true

DocSearch参考：

定时爬取博客搜索

手动更新博客搜

本文章来源于我的博客：https://blog.hikki.site