blog问题总结

问题1 懒加载反应慢问题

# Lazyload

# https://github.com/verlok/vanilla-lazyload

lazyload:

enable: false

# Specify the field to use lazyload (site or post)

field: site

placeholder:

blur: false

开启之后会出现图片加载不了问题。即打开enable和blue（模糊效果）会导致图片加载不了

这里我需要说明一下，我不知道是什么情况，现在又好了，难道是网络问题？难受

问题2磁贴显示不了问题

2025年5月1号做分类磁贴这个功能时，当时没有线做分类标记，即

title: githup帮助文档
date: 2025-04-26 13:28:07
categories: git

这样的categories标记，然后在执行以下命令

1	npm install hexo-butterfly-categories-card --save

发现首页没有变化，我知道缺少东西，就去查询ai，然后得到了下面回答

hexo怎么建立分类磁贴，使用这个插件，有什么要注意的吗？
4 / 4
文档阅读完成
在Hexo中建立分类磁贴（通常指的是展示文章分类的页面或小工具），你可以使用hexo-generator-category插件来生成分类页面。不过，更常见的是直接利用Hexo的主题功能和默认提供的标签与分类生成功能。以下是基于这两种方法的基本指南：

方法一：使用主题自带功能
许多Hexo主题都内置了对分类页的支持，你只需要确保你的站点配置文件正确设置了分类。

启用分类页：检查你的主题文档，看是否需要手动创建一个分类页面。对于一些主题，这可能只是一个简单的Markdown文件（如categories/index.md），内容如下：
深色版本
---
title: Categories
date: 2025-05-01 21:41:00
type: "categories"
---
更新菜单链接：如果主题支持，你还需要在主题配置文件中添加相应的菜单链接指向这个新创建的分类页面。
方法二：使用hexo-generator-category插件
如果你想要更多定制选项或者你的主题不直接支持分类页，可以考虑使用hexo-generator-category插件。

安装插件：
深色版本
npm install hexo-generator-category --save
配置插件：编辑站点的_config.yml文件，添加或修改以下配置项：
yaml
深色版本
category_generator:
  per_page: 10 # 每页显示的文章数量
创建分类页面：如同方法一所述，创建一个分类页面（source/categories/index.md），并设置其类型为categories。
注意事项
主题兼容性：确保所使用的主题支持你打算实施的更改。有些主题可能需要特定的设置或自定义模板来正确显示分类。
插件版本：根据你的Hexo版本选择合适的插件版本，以避免兼容性问题。
测试：在本地环境中测试所有更改，确保它们按预期工作，然后再部署到生产环境。
自定义样式：如果你对分类页的外观有特别要求，可能需要调整CSS或主题模板文件。
通过上述步骤，你应该能够成功地在Hexo博客中添加分类磁贴。如果有任何特定于主题的问题或需要进一步的定制，请参考相应主题的文档或社区支持资源。

我没有发现它给的是hexo自带或者是butterfly主题自带的hexo-generator-category插件，然后我就删除了这个插件，使用的是这个命令

1	npm uninstall hexo-generator-category

执行之后发现虽然就算再每篇文章标注了分类的类别，但是进入不了分类页面。如图：

加回来之后，就恢复正常了。

问题3 Gitcalendar爬取githup数据的爬虫是失效的。

安装

安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：
1
2
bash
npm install hexo-filter-gitcalendar --save

添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件如_config.butterfly.yml中添加

yaml

# hexo-filter-gitcalendar
# see https://akilar.top/posts/1f9c68c9/
gitcalendar:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  # butterfly挂载容器
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  # volantis挂载容器
  # layout:
  #   type: class
  #   name: l_main
  #   index: 0
  # matery挂载容器
  # layout:
  #   type: id
  #   name: indexCard
  #   index: 0
  # mengd挂载容器
  # layout:
  #   type: class
  #   name: content
  #   index: 0
  user: Akilarlxh #git用户名
  apiurl: 'https://gitcalendar.akilar.top'
  minheight:
    pc: 280px #桌面端最小高度
    mibile: 0px #移动端最小高度
  color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']" #橘黄色调
  # color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" #浅紫色调
  # color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']" #翠绿色调
  # color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']" #天青色调
  container: .recent-post-item(style='width:100%;height:auto;padding:10px;') #父元素容器，需要使用pug语法
  gitcalendar_css: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.css
  gitcalendar_js: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.js

参数释义

参数	备选值/类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable	true/false	【必选】控制开关
enable_page	path/all	【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为’/‘
layout.type	id/class	【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name	text	【必选】挂载容器名称
layout.index	0和正整数	【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
user	text	【必选】git用户名
apiurl	url	【可选】默认使用提供文档提供的api，但还是建议自建api，参考教程：自建API部署
minheight.pc	280px	【可选】桌面端最小高度，默认为280px
minheight.mobile	0px	【可选】移动端最小高度，默认为0px
color	list	【可选】一个包含11个色值的数组，文档给出了四款预设值
container	pug	【可选】预留的父元素容器，用以适配多主题，需要用pug语法填写，目前已适配butterfly，volantis，matery，mengd主题，这四个主题，插件会自自动识别`_config.yml`内填写的`theme`配置项。其余主题需要自己填写父元素容器。
gitcalendar_css	URL	【可选】自定义CSS样式链接
gitcalendar_js	URL	【可选】自定义js链接

自建API

虽然Vercel的访问应当没有次数限制，但是不排除存在因访问次数过多而限流等限制。所以还是建议各位自建API。使用Vercel部署，完全免费。且无需服务器。

以下是具体部署教程。与部署静态网站基本一致。因此配图沿用了站内教程使用Vercel来加速Hexo博客的内容。

注册时极有可能遇到的bug

访问Vercel官网，点击右上角的sign up进行注册
注册完成后选择新建一个项目

填入@冰老师提供的自建API项目地址

1 2	bash https://github.com/Zfour/python_github_calendar_api.git

此时会提示这是否是你的仓库。

选No，Vercel会自动帮你fork这个仓库到你的Github账号里。

</li>

导入静态页面仓库之前，需要为你的Github安装Vercel，此处建议选择All repositories，意为为所有仓库安装，当然，你也可以选择只为当前仓库安装，也就是Only select repositories。

如果哪天反悔了，可以在github->头像(右上角)->settings->Applications（列表下数上第四个）->Installed Github Apps里修改。

</li>

之后会识别出项目文件，单击Continue

Vercel的PROJECT NAME可以自定义，不用太过在意，但是之后不支持修改，若要改名，只能删除PROJECT以后重建一个了。下方三个选项保持默认就好。

</li>

到此时，Vercel的部署已经完成，可以使用Vercel提供的默认域名来访问api链接。例如我获取到的默认域名为github-calendar-api.vercel.app,则用它来替换冰老师教程中的自建API，填写到[Blogroot]\_config.butterfly.yml中关于gitcalendar的apiurl中。注意源码修改版不要带协议，不要带后缀。就填写给你的默认域名就好。而插件版需要带协议
1
2
3
4
5
6
7
8
diff

gitcalendar:
enable: true
simplemode: true
user: Akilarlxh
apiurl: github-calendar-api.vercel.app
color: "['#e4dfd7', '#f9f4dc', '#f7

存在问题

就是这个方法应该也是失效了的

连接不到。所以这里我就不做了

问题4分栏显示不了

这里是实现步骤：

在博客根目录[BlogRoot]下打开终端，运行以下指令：
1
2
bash
npm i hexo-butterfly-article-double-row --save
在网站配置文件_config.yml新增以下项 (注意不是主题配置文件)：
1
2
3
yml
butterfly_article_double_row:
enable: true
这时候插件有个bug，就是最后一页文章数目为奇数的时候，会出现这种情况

会显得很不舒服，感谢唐志远大佬修复了这个bug，只需要在custom.css文件添加以下代码即可：
1
2
3
4
5
6
css
/* 翻页按钮居中 */
#pagination {
width: 100%;
margin: auto;
}
执行 hexo 三连：
1
2
3
4
bash
hexo clean
hexo g
hexo s

这里我不知道为什么，就是死活出不了双栏。不知道为什么，可能配置没做好吧。

问题5我要进行改造，这里做个标记。

问题6怎么修改音乐播放器为自己的，还没解决

这是作者的，我需要修改成自己的，这里是步骤

自定义配置（3.0 新功能）

现在你可以在 Hexo 配置文件 _config.yml 中配置本插件：

aplayer:
  script_dir: some/place                        # Public 目录下脚本目录路径，默认: 'assets/js'
  style_dir: some/place                         # Public 目录下样式目录路径，默认: 'assets/css'
  cdn: http://xxx/aplayer.min.js                # 引用 APlayer.js 外部 CDN 地址 (默认不开启)
  style_cdn: http://xxx/aplayer.min.css         # 引用 APlayer.css 外部 CDN 地址 (默认不开启)
  meting: true                                  # MetingJS 支持
  meting_api: http://xxx/api.php                # 自定义 Meting API 地址
  meting_cdn: http://xxx/Meing.min.js           # 引用 Meting.js 外部 CDN 地址 (默认不开启)
  asset_inject: true                            # 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
  externalLink: http://xxx/aplayer.min.js       # 老版本参数，功能与参数 cdn 相同

问题7关于魔改博客完成

魔改总结三中只做了直达底部按钮何文章加密插件。

魔改总结二中做了大部分，还有小部分比较有意思