前言 这里主要借鉴了時光心向阳大佬的博客来配置完成，预览图如下： 配置步骤 1 创建统计页面 新建一个分类： 1hexo new page charts 前往博客根目录下 source/charts/index.md，直接替换全部内容： 123456789101112131415---title: 统计type: "charts"comments: falseaside: false---<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js"></script><!-- 文章发布时间统计图 --> <!-- 2025-04是从2024年4月开始计算 --><div id="posts-chart" data-start="2025-04" style="border-radius: 8px; height: 3 ...

前言 随着博客的不断更新迭代，我们经常会对网站进行各种优化和改进。为了让读者和自己能够清晰地了解网站的发展历程，添加一个网站更新日志页面是个不错的选择。这样不仅可以记录网站的成长，还能展示我们对博客的用心维护。 本文将详细介绍如何为Hexo博客添加一个美观实用的网站更新日志页面，包括页面创建、数据配置、样式美化等全过程。 实现思路 要实现网站更新日志页面，我们需要完成以下几个步骤： 创建页面文件和数据文件 编写页面布局模板 修改主题配置，添加菜单项 美化页面样式 下面我们一步步来实现。 创建必要文件 创建页面文件 首先，我们需要创建一个新的页面文件。在博客根目录下执行以下命令： 1hexo new page changelog 这将在 source/changelog/ 目录下创建一个 index.md 文件。打开该文件，修改其内容如下： 12345678910111213141516---title: date: 2025-08-13 16:31:00type: changelogupdated: 2025-08-13 16:31:00comments: truedesc ...

效果演示 这里由于原主题没有添加直达底部按钮，为了操作更编辑，需要我们自己添加。 实现步骤 1 修改rightside.pug 我们定位到 \themes\anzhiyu\layout\includes\rightside.pug 文件； 找到#rightside-config-show 这个 div 标签； 在这个 div 标签下添加如下代码： 12button#go-down(type="button" title="直达底部" onclick="anzhiyu.scrollToDest(document.body.scrollHeight, 500)") i.anzhiyufont.anzhiyu-icon-arrow-down 2 修改主题配置文件 找到 _config.anzhiyu.yml 文件； 找到 rightside_item_order 这个配置项； 在 rightside_item_order 这个配置项下修改： 1234rightside_item_order: enab ...

前言 这里主要参考了梦爱吃鱼大佬的博客完成，主要效果如下： 顶部挂件 安知鱼主题，那么直接替换themes\anzhiyu\layout\includes\bbTimeList.pug文件就行了，代码放下面了： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140if site.data.essay each i in site.data.essay if i.home_essay - l ...

前言 这里主要参考 梦爱吃鱼 的文章，感谢梦爱吃鱼的分享。 实现效果如下： 配置流程 1 申请 API 密钥 申请地址：https://api.nsmao.net/register 申请完成后，登录账号，点击个人中心，密钥管理，即可查看 API 密钥。 2 创建 JS 文件 在博客目录的 source 文件夹下创建 static 目录，在 static 目录下创建 card-welcome.js 文件。 3 配置信息 可以通过下表获取经纬度信息： 获取地址 获取方式 百度地图 1. 访问百度地图拾取坐标系统 2. 在搜索框输入地址 3. 点击地图上的点获取经纬度 4. 复制对应的经度(lng)和纬度(lat)值 高德地图 1. 打开高德地图 2. 在搜索框输入地址 3. 点击地图上的点获取经纬度 4. 复制对应的经度(lng)和纬度(lat)值 将以下内容复制到 card-welcome.js 中，并修改文件顶部配置信息： 1234567891011121314151617181920212223242 ...

前言 这里主要是参考铭心石刻大佬的博客来完成，具体效果如下展示： 操作步骤 1 新增 css 内容 新建文件 source/css/home.css 文件，新增以下内容： 123456789101112131415#recent-posts > .recent-post-item:not(a)::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 200%; background: linear-gradient(to right, transparent, white, transparent); transform: translateX(-200%); transition: transform 0.5s linear; z-index: 1;}#recent-posts > .recent-post-item:not(a):hover::before { transfo ...

0 前言 这里主要参考了SNTube Studio大佬的博客实现了整体流程，演示效果如下： 浅色模式 深色模式 1 修改主题配置文件 _config.anzhiyu.yml 在主题配置文件里找到 inject 的 head，添加一行 link，如下： 123inject: head: - <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"> # loading用的fontawesome图标 2 建立新的 pug 文件 在 themes\anzhiyu\layout\includes\loading\ 文件夹里，新建文件 clickenter.pug，内容如下： 12345678910111213141516171819202122232425262728293031#loading-box(onclick='document.getElementById(&qu ...

前言 这里主要是参考梦爱吃鱼大佬的博客来完成的，具体效果如下： 具体流程 1 创建 JS 文件 在博客目录的 source 文件夹下创建 countdown.js 文件(也可以在 source 文件夹下另外新建文件夹)。 这里为了方便管理，我在 source 文件夹下新建了一个 static 文件夹，然后将 countdown.js 文件放在 static 文件夹下。 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371 ...