为什么选择Hexo？

    Hexo 是一个基于 Node.js 的静态博客生成工具，它提供了简洁的命令行界面和易于理解的配置文件。

    Hexo 拥有活跃的社区，提供了大量的主题和插件，可以轻松实现各种功能和样式定制。

    Hexo 生成的是静态网页文件，不需要依赖数据库和服务器端代码，因此具有较高的安全性。

为什么选择Butterfly？

  我选择了Butterfly主题，Butterfly是一个自定义性非常高的主题，并且有大量的用户使用，生态非常完善。选取原因如下：

  • 美观现代化

        时尚、美观和现代化的设计风格，吸引人的界面和布局，能够给读者留下深刻的印象。

  • 响应式设计

        采用响应式设计，可以在各种设备和屏幕尺寸上提供良好的用户体验。可以在桌面、平板电脑和手机等设备上自适应地显示，读者可以随时随地访问你的博客。

  • 可定制性

        主题提供了丰富的定制选项，允许自定义博客的外观和功能.可以调整颜色、字体、布局等方面的设置。

  • 多样布局和组件

        Butterfly主题提供了多种布局和组件选项，如卡片式布局、侧边栏、标签云、作者简介等，根据内容类型和需要创建丰富多样的页面。

  • 文档和支持

        详细的文档和支持资源，支持 Latex 编写，Mermaid 流程图等附加的 Markdown 功能。

页面布局及实现

导航栏

    导航栏位于页面的顶部，用于提供网站的导航链接，快速导航到所需的内容，包括主页，博文（分类、标签、归档），生活（追番），友链，留言板，关于笔者。

    在设计导航栏时，考虑到用户的易用性和可访问性。导航链接应该清晰、易于理解和易于点击，确保用户能够顺利地导航到所需的页面。

点击查看 导航栏

    在主页上，我会突出显示最新或推荐的博客文章。用户可以立即看到我最新的更新或推荐的内容，引导他们进入完整的文章页面。

点击查看 主页

    设计博客的“归档、标签和分类”功能时，为用户提供一个方便的浏览和组织博客内容的方式。用户可以根据时间、主题或标签来快速找到他们感兴趣的博客文章，并探索更多相关的内容。

    首先是“归档”功能。我会创建一个按时间排序的博客归档页面，用户可以在该页面上查看按年份或月份分类的博客列表。可以轻松地浏览和回顾以前的博客文章，并快速找到特定时间段的内容.

    其次是“标签”功能。为每篇博客文章添加适当的标签，用户可以根据标签来查找相关的主题或内容。标签可以是关键词或短语，如技术、编程、设计等。点击标签，以快速筛选和浏览带有特定标签的博客文章。

    最后是“分类”功能。将博客文章按照主题或类别进行分类，例如技术、生活、旅行等。用户可以在博客页面上选择感兴趣的分类，以查看该分类下的所有相关文章。

    这个功能使博客页面更具导航性和可发现性，提升用户体验和博客的可用性。

点击查看 博文

分类

标签

归档

查看实现方法

丝滑配置

    在“追番”页面上，我会列出当前热门或最新的番剧列表，包括番剧名称、封面图、简介和更新状态等信息。当用户点击某个番剧的信息时，我会为其提供一个跳转链接，使他们可以直接跳转到Bilibili等视频平台的相关页面，以便观看该番剧的具体内容。我会定期更新番剧列表，确保提供最新和热门的番剧信息，让用户时刻了解最新的动画作品。“追番”功能是我个人博客中的一个特色功能，可以认识更多喜欢动漫的人。

点击查看 生活

    通过在首页右上角添加一个“友情链接”链接，用户可以点击该链接跳转到友情链接页面。展示与其他博客主或网站建立的友情链接以及有用的网站链接，并通过点击它们来了解更多关于链接指向网站或博客的信息和内容。

点击查看 友链

查看友链实现方法

Butterfly添加不同的友链预览并提供了详细的教程。步骤包括在友链页面中添加预览效果、配置默认友链页面以及在主题配置文件中进行参数设置等。同时，分享了自己写的教程。友链特效

1 新建友链页面。

前往你的 Hexo 博客的根目录打开终端

hexo new page link

找到 source/link/index.md

添加 type: “link”

---
title: 友情连接
date: 2023-07-15 22:17:49
type: "link"
---

2 新建文件[Blogroot]\source\_data\link.yml,没有_data文件夹的话也请自己新建。打开[Blogroot]\source\_data\link.yml，输入：

- class_name: 推荐博客
  flink_style: flexcard
  link_list:
    - name: 安知鱼`Blog
      link: https://blog.anheyu.com/
      avatar: https://img02.anheyu.com/adminuploads/1/2022/09/15/63232b7d91d22.jpg
      descr: 生活明朗，万物可爱
      siteshot: https://npm.elemecdn.com/anzhiyu-theme-static@1.1.6/img/blog.anheyu.com.jpg

取消[Blogroot]\_config.butterfly.yml中menu配置项内link页面的注释。

menu:
  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   - Music || /music/ || icon-music
  #   - Movie || /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart

    留言板是一个交流和互动的地方，让访问者可以留下他们的想法、意见、建议或问答等内容。在留言板页面上，访问者可以看到其他人已经留下的留言，并有机会自己发布新的留言。同时，我会确保留言板的安全性和可管理性。例如，我会添加人机验证，防止垃圾信息的发布。我还会定期审核留言，删除不适当或违反规定的内容，以保持留言板的秩序和友好氛围。（暂时还没添加）

点击查看 留言板

点击查看留言板实现方法

留言板

点击查看 关于笔者

查看导航栏实现方法

在主题配置文件修改目录

主页布局

    设计个人博客的“主页”功能时，除了展示最新的博客文章、标签和归档，我还会添加一个分类卡片区域，以提供更多的浏览和导航方式。

点击查看 主页详情

顶部缩略主页

随便逛逛

    当我设计个人博客的“主页”功能时，除了展示最新的博客文章、标签、归档和分类卡片，我还会添加一个“随机文章”功能，以提供一种有趣的浏览体验。

在主页的左上角突出位置，我放置了一张人潮汹涌的动图，鼠标移动到这会显示上面标有“随机逛逛”的文字。当用户点击这个按钮时，系统会随机选择并跳转到博客中的一篇文章。目的是让用户能够发现和阅读博客中的各种文章，而不仅仅局限于最新发布的或特定分类的文章。用户可以通过随机文章功能，获得意外的惊喜和新的阅读体验。

点击查看 随机逛逛

分类栏

    当用户将鼠标悬停在某个分类项目上时，我会为其添加一个动画效果，这可以是图标清晰效果或其他动画效果，以吸引用户的注意并提供更直观的反馈。

    当用户点击某个分类项目时，页面会相应地切换到相应分类的归档页面。在归档页面上，用户可以看到该分类下的所有相关博客文章，以便更方便地浏览和阅读感兴趣的内容。

点击查看 分类归档

轮播图

    添加一个“缩略的文章轮播图”功能，以吸引用户的注意力并展示多个精选文章。在主页的顶部，放置一个滑动或自动切换的轮播图，其中包含了几篇精选的博客文章。每篇文章都会以缩略图的形式呈现，配以简短的标题或摘要。创建一个轮播图组件，用户可以手动浏览或自动轮播，增加了他们留在博客网站上的时间和兴趣。

推荐文章

    下面四个小分栏是推荐文章列表，每个小分栏中会列出若干篇推荐文章的标题

    通过添加这样的推荐文章栏目功能，我为用户提供了一个突出展示和推荐精选内容的方式。这些推荐文章可以是最新的、最受欢迎的或我个人认为特别有价值的文章。这样的功能不仅可以提供有趣和有用的内容，还可以增加用户的参与和互动，提升整体的用户体验。

    当用户点击某篇推荐文章时，页面会相应地切换到该文章的详细页面。在详细页面上，用户可以阅读完整的文章内容，并在需要时进行评论、分享或其他交互操作。

实现

查看实现方法

本站首页 Swiper Bar 修改请参考 hexo-butterfly-swiper-anzhiyu-pro 文档自行修改。

npm install hexo-butterfly-swiper-anzhiyu --save

在_config.butterfly.yml加入以下配置项

# hexo-butterfly-categories-card
# see https://akilar.top/posts/a9131002/
categoryBar:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  column: odd # odd：3列 | even：4列
  row: 1 #显示行数，默认两行，超过行数切换为滚动显示
  message:
    - descr: 大学学习史
      cover: https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover1.webp
    - descr: 前端成长历程
      cover: https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover2.webp
    - descr: 生活欢乐多
      cover: https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover3.webp
    - descr:
      cover: https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover4.webp
    - descr:
      cover: https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover5.webp
    - descr:
      cover: https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover6.webp
  custom_css: https://cdn.cbd.int/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css

分类卡片

    分类卡片区域通常位于主页的显眼位置，可以展示我博客中的不同分类或主题。每个分类卡片会包含一个独特的图标或图片，以及相应的分类名称。用户可以点击这些分类卡片，以快速浏览特定主题的博客文章。

    点击可进入查看分类归档。

实现

查看实现方法

详情请看教程 Categories Magnet

灵感来源于原生主题的 gallery 以及在其他主题见到过的分类列表。

考虑到部分 tag 比较多，因此用 categories 为标准进行分类。

这里用到了 hexo 主题自带的帮助函数 list_categories ()。帮助函数的作用在于能够自动帮你生成一些信息。

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

在_config.butterfly.yml加入以下配置项

swiper:
  enable: true # 开关
  randomenable: true # 人潮汹涌开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  timemode: date #date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 1
  default_descr: 再怎么看我也不知道怎么描述它的啦！
  swiper_css: https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu/lib/swiper.min.css #swiper css依赖
  swiper_js: https://cdn.cbd.int/anzhiyu-blog@1.1.6/js/swiper.min.js #swiper js依赖 #swiper js依赖
  custom_css: https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu/lib/swiperstyle.css # 适配主题样式补丁
  custom_js: https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu/lib/swiper_init.js # swiper初始化方法
  gsap_js: https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js # gsap依赖 随机逛逛依赖
  people_js: https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu/js/people/people.js # 随机逛逛js

文章列表

在网页的主页上，我文章列表通常位于页面的中心，

    文章列表以简洁的方式呈现，每篇文章都包含了标题、摘要和发布日期和分类等基本信息。这样用户可以一目了然地浏览最新的文章。点击能够直接跳转到完整的文章页面，以阅读更多内容。可以每篇文章添加一个置顶标识或特殊样式，以区分置顶文章和普通文章。如果有多篇文章被置顶，我会根据置顶的优先级或发布日期对它们进行排序，以确定它们在列表中的顺序。这样可以确保置顶文章按照指定的顺序进行展示，让用户能够更好地浏览和阅读。

点击查看 文章列表

实现

    Butterfly自带。

音乐播放器

    考虑提供用户一个愉悦的音乐体验，我选择一个符合网页整体风格的音乐播放器样式，并确保其与网页其他元素相协调。播放器可以包括播放/暂停按钮、音乐进度条、音量控制等基本功能。根据个人喜好和网站主题，在播放器中添加了一些我喜欢的音乐。

点击查看 音乐列表

实现

查看实现方法

教程

设置

可设置为文章阅读模式，夜间模式，宽屏模式，评论和回到顶部。

实现

    Butterfly自带。

文章页面布局

    由大标题、中标题、小标题、链接以及代码块、正文组成。大标题和中标题帮助读者了解文章的主题，小标题和链接帮助读者快速导航到感兴趣的部分，代码块和正文则呈现了详细的内容。整体布局的目的是使读者能够轻松地阅读和理解文章的内容

版权说明

    为了保护原创内容的权益和尊重知识产权，我在网页的底部或侧边栏位置添加了版权说明。版权说明包括作者名称、发表日期和版权声明，以清晰地表明文章的版权归属和使用规则。这样可以避免他人未经授权使用或盗用文章内容，同时提醒读者尊重版权。

点击查看 详情

打赏功能

    为了支持作者的创作和激励更好的内容产出，我在网页中添加了打赏功能。通过该功能，以鼓励作者继续创作优质的内容。打赏功能通常包括不同金额的打赏选项和相应的支付方式，如支付宝、微信支付等。读者可以扫描二维码，跳转到支付页面完成打赏操作。

点击查看 详情

推荐文章模块

    上一篇和下一篇按钮：在文章页面的底部位置，我添加了”上一篇”和”下一篇”按钮。这样，读者可以通过点击这些按钮轻松地在文章之间进行导航，无需返回列表页面或使用搜索功能。

    推荐同义标签的文章模块：为了提供更多相关内容的阅读选择，我设计了一个推荐tag标签的文章模块。该模块会根据当前文章的标签信息，自动匹配同义标签或相关主题的其他文章

点击查看 详情

文章侧边栏

点击查看 文章详页面

实现

查看实现方法

教程

主页侧边栏

个人简介

点击查看 文章详页面

网站公告

点击查看 网站公告

电子钟

     在侧边栏上显示日期、当前时间、天气、地点、风向和降水等信息是一种常见的功能，可以为用户提供实时的环境信息。

     使用适合的天气数据接口或服务，通过 API 获取实时的天气数据。这些数据通常包括温度、天气状况、风向、降水量等信息。

    侧边栏上显示实时的日期、时间、天气、地点、风向和降水等信息。这样的功能可以让用户方便地了解当前的环境情况，并为他们提供有用的信息参考。

点击查看 电子钟

查看实现方法

电子钟配置

首先，我会使用适合的天气数据接口或服务，通过 API 获取实时的天气数据。和风天气key，高得地图web服务key可以去官网免费申请。再设置主题文件配置。

npm install hexo-butterfly-clock-anzhiyu --save

​ 设置配置项

# electric_clock
# see https://anheyu.com/posts/fc18.html
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu@1.1.6/lib/loading.gif #加载动画自定义
  clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu@1.1.6/lib/clock.min.css
  clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu@1.1.6/lib/clock.min.js
  ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
  qweather_key: # 和风天气key
  gaud_map_key: # 高得地图web服务key
  default_rectangle: true # 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气
  rectangle: 112.6534116,27.96920845 # 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置

分类标签归档

点击查看 详情

网站咨询

点击查看 详情

实现

查看实现方法

教程

涉及技术

博客框架：Hexo 6.3.0

主题：Butterfly 4.3.1

评论系统：valine系统

图床：安知鱼图床

开发语言：HTML5 + CSS3 + JavaScript + Pug + YML

GitHub Actions

    是一种在 GitHub 上自动化、定制和执行软件开发工作流程的功能。它可以帮助你在不同的事件（例如代码提交、拉取请求或标签创建）上触发不同的任务（例如构建、测试或部署）。

     每次部署 Hexo 都需要运行指令三件套，随着文章越来越多，编译的时间也随之越来越长，通过 Github Action，我们只需要在每次完成博客的编写或修改以后，将改动直接 push 到远程仓库，之后的编译部署的工作统统交给 CI 来完成即可，如果是看过 Coding 部署教程的，应该对这种持续部署的操作有所感触。

GitHub Page

    在基于 GitHub 使用 Hexo 框架构建个人网站的过程中，提供了静态网页托管、版本控制、自动化构建和部署等关键技术支持。GitHub Pages 基于 Git 版本控制系统。你可以将 Hexo 项目的源代码和配置文件提交到 GitHub 仓库中，并使用 Git 进行版本管理。这使得你可以跟踪和管理网站的变化，并方便地回滚到之前的版本。

博客制作过程中遇到的问题及其解决方法

问题1

    将基于hexo的博客部署到github的时候出现了下面Error: Spawn failed的错误。

fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Errors Spawn failed
    at ChildProcess,<anonymous> (/Users/quinn/Desktop/Blog/node_1/lib/spawn js:51:21)
    at ChildProcess,emit (node;events:513:28)
    at ChildProcess,_handle,onexit(node:internal/child_process:291:12)

查找问题

    根据报错信息，可能出现以下问题导致无法从远程仓库读取或发生生成错误：

  1. 访问权限问题：没具有正确的访问权限来读取远程仓库。私有仓库在终端中配置的用户名、密码、SSH 密钥或访问令牌是。
  2. 网络连接问题：报错中的 “Spawn failed” 可能是由于网络连接问题导致无法与远程仓库进行通信。请检查你的网络连接，并确保可以访问远程仓库的服务器。

解决措施

  1. 按照以下步骤重新添加ssh密钥

    git config --global user.name "****"
    git config --global user.email "****"

    按动三次回车出现下列类似显示

    The key fingerprint is:
    SHA256:CLLFyI7onqV2mDS9KRs3vKM1DgdUEyCYhwLM257sH1g 29****39@qq.com
    The key's randomart image is:
    +---[RSA 4096]----+
    |B+.+.            |
    |*+oo.            |
    |.o* +            |
    |o+ = . .         |
    |o.* .E. S        |
    |.oo=o            |
    |.+=Xo.           |
    |.=@*+ .          |
    |.*=oo.           |

    ————————————————

    生成一对密钥和公钥，id_rsa 和 id_rsa.pub，其中 id_rsa 为私钥，id_rsa.pub 为公钥，复制公钥上传至github上重新认证。问题依旧存在，无效。

  2. 首先，我检查了我的网络连接，确保网络连接正常且稳定。然后，我尝试了一种名为Surge的网络增强模式来访问远程仓库。通过使用Surge的网络增强模式，我能够成功地连接到远程仓库并完成相应的操作。

问题2

     在运行”hexo clean +hexo generate +hexo serve”命令后，出现ERROR输出一堆地址报错。

查找问题

    由于报错的文件路径我从未打开过并且代码正确，我从以下几个方面进行查找：

  1. 插件冲突：在Hexo中使用了多个插件，可能会发生插件之间的冲突或不兼容性。尝试禁用一些插件，然后逐个启用它们，以确定哪个插件引起了问题。
  2. 环境配置问题：是否安装了正确版本的Node.js和Hexo，并且环境配置正确。检查Node.js版本是否与Hexo兼容，并确保已正确安装Hexo的依赖包。

解决措施

    在经过配置文件代码的阅读，我注意到在我的博客配置文件中，有一些插件的启用选项被设置为”enable: true”，然而，在实际安装的插件列表中，并没有找到对应的插件安装记录。这导致在运行三件套命令时出现了一系列的错误输出。

按照以下步骤操作：

  1. 检查插件列表：运行命令”hexo list”，查看已安装的插件列表。
  2. 查找缺失的插件：在输出的列表中查找与配置文件中启用但未安装的插件对应的条目。
  3. 安装缺失的插件：使用命令”npm install 插件名称 —save”，安装缺失的插件。确保在命令中替换”插件名称”为实际插件的名称。
  4. 验证安装：运行命令”hexo clean + hexo generate + hexo serve”，检查是否仍然存在插件缺失的错误输出。如果没有出现错误，则表示插件安装成功。
  5. 配置文件检查：在修改配置文件时，请确保只启用已正确安装的插件，并仔细检查每个插件的安装状态。

问题3

    hexo安装音乐、追番页、live2d看板娘安装这里在hexo g的时候出现了以下报错:

TypeError: Cannot read properties of undefined (reading 'count')
    at module.exports (C:\Users\Chen\OneDrive\Digital Garden\node_modules\hexo-baidu-url-submit\lib\generator.js:4:41)

查找问题

    该报错与”hexo-baidu-url-submit”插件相关。该插件用于将博客链接自动推送给百度搜索引擎。部署器未找到该插件。

解决措施

   解决该问题的方法是卸载”hexo-baidu-url-submit”插件。

npm remove hexo-baidu-url-submit

    卸载后，再次运行”hexo g”命令，不会再出现报错。可以继续安装音乐、追番页和live2d看板娘功能了。

个人总结反思与收获

反思

     在开始构建个人网站之前，我对 Hexo 框架和 GitHub Pages 平台的配置和部署过程并不熟悉。因此，我花费了一些时间学习和了解如何正确配置和部署我的网站。有时候会遇到一些错误和问题，需要耐心排查和解决。

     在选择主题和插件时，我需要考虑到我的网站需求和个人喜好，同时要确保主题和插件的兼容性和稳定性。有时候需要尝试和调整不同的主题和插件，直到找到最适合我的网站的组合。

     内容创作和更新的持续性：构建个人网站需要不断地更新和发布内容，保持网站的活跃度和吸引力。这需要花费时间和精力来思考和编写有质量的文章，并保持定期的更新。现在网站的博客都是曾经在c s d n上编写过的

    遇到乱码报错时，我学到了排除错误的一些常见方法。首先，确保字符编码设置正确，这是解决乱码问题的第一步。其次，检查文件是否损坏，并尝试删除缓存文件来清除可能的问题。另外，保持Hexo和插件的版本更新也很重要，以确保兼容性。如果问题仍然存在，重新初始化Hexo项目可能是最后的解决办法。这个经验教训让我更加注重格式正确，终端和项目文件的完整性，并且需要记录每一步的操作过程，以避免类似的问题。

收获

     学习了新的技术和工具，通过构建个人网站，我学习并掌握了使用 Hexo 框架和 GitHub Pages 平台的技能。我了解了如何配置和管理 Hexo 的插件和主题，以及如何使用 Git 和 GitHub 进行版本控制和部署。这些技能对我的技术能力和个人发展能力都有很大的提升。

     通过个人网站，我能够展示我的作品、技能和个人品牌。这有助于建立自己在互联网上的专业形象，并与其他人分享我的知识和经验。我也能够通过网站与其他人互动和建立联系，扩大自己的社交网络。

     撰写博客文章和更新网站内容让我不断锻炼和提升自己的表达和写作能力。通过整理和分享我的想法和经验，我能够更清晰地表达自己的观点，并提升沟通的能力。这也有助于我在其他领域的工作和学习中更有效地表达和传达信息。