博客美化

下面给出一个详细的步骤教程，介绍如何在你的 Hexo 博客中安装安知鱼（AnZhiYu）主题，并进行个性化配置。整个过程包括主题的克隆、配置文件的覆盖、依赖安装、主题启用以及如何修改主题配置文件来自定义页面外观和功能。以下内容参考了 CSDN 以及 GitHub 上安知鱼主题的官方文档信息(, )。

1. 环境准备

确保你已经完成以下基础步骤：

  • 已安装 Node.js 与 npm（推荐 LTS 版本）；
  • 已安装 Git；
  • 已初始化 Hexo 博客（例如通过 hexo init my-blog 并运行 npm install）。

另外，为确保主题中的 Pug 和 Stylus 模板能正确渲染，如果尚未安装，请在博客根目录下执行：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

2. 安装安知鱼主题

2.1 克隆主题仓库

  1. 进入你的博客根目录，然后进入 themes 文件夹：
    1
    cd your-blog-folder/themes
  2. 使用 Git 克隆安知鱼主题仓库（推荐使用主分支）：
    1
    git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git anzhiyu
    这样会在 themes 下生成一个名为 anzhiyu 的文件夹，里面包含主题所有文件。

2.2 覆盖主题配置

为了防止主题更新时自定义配置丢失，建议将主题内的配置文件复制到博客根目录：

  • Linux/MacOS：
    1
    cp -rf ./anzhiyu/_config.yml ../_config.anzhiyu.yml
  • Windows：
    将 themes\anzhiyu\_config.yml 文件复制到博客根目录下，并重命名为 _config.anzhiyu.yml。

此文件将用来存放你所有关于安知鱼主题的个性化设置，修改后不会在主题更新时被覆盖。

2.3 修改 Hexo 全局配置

打开博客根目录下的主配置文件 _config.yml，找到 theme 项，将其值设置为 anzhiyu：

1
theme: anzhiyu

3. 个性化配置安知鱼主题

主题的所有个性化配置都集中在你刚刚复制到博客根目录的 _config.anzhiyu.yml 文件中。下面介绍几个常用的个性化配置项，你可以根据需要进行修改：

3.1 基础网站信息

修改站点标题、描述、作者、语言、时区等基本信息。例如：

1
2
3
4
5
6
7
# Site
title: 我的博客
subtitle: 分享技术与生活
description: 这是一个基于 Hexo 与安知鱼主题的个人博客
author: 张三
language: zh-CN
timezone: Asia/Shanghai

3.2 导航菜单配置

在 _config.anzhiyu.yml 中找到 menu 配置项，修改导航菜单内容。格式为：

1
2
3
4
5
6
7
8
menu:
  文章:
    隧道: /archives/ || icon-archive
    分类: /categories/ || icon-shapes
    标签: /tags/ || icon-tags
  关于:
    关于我: /about/ || icon-user
    留言板: /comments/ || icon-message

你可以添加、修改或删除菜单项，注意菜单项格式为 “显示名称: 路径 || 图标名称”。如果不需要图标，可以省略“||”及后续部分。

3.3 社交图标设置

修改社交图标信息，在配置文件中找到 social 部分：

1
2
3
4
social:
  Github: https://github.com/YourUsername || anzhiyu-icon-github
  Email: mailto:youremail@example.com || anzhiyu-icon-envelope
  RSS: atom.xml || anzhiyu-icon-rss

将链接替换为你自己的社交账号链接。图标名称可以参考官方文档，若你想使用其他图标（例如 FontAwesome 或阿里图标），也可以根据文档进行调整。

3.4 首页配置与其他功能

  • 首页顶部配置
    安知鱼主题支持自定义首页顶部的展示内容和风格，可以在配置文件中找到 home_top 相关配置项，根据需要修改轮播图、分区等设置。

  • 左下角音乐球
    如果你想启用音乐球（通常用于展示歌单），在配置文件中找到 nav_music 配置项，设置音乐平台和歌单 ID：

    1
    2
    3
    4
    nav_music:
      enable: true
      id: 8152976493  # 网易云音乐歌单ID示例
      server: netease  # 音乐平台，netease、tencent等

  • 其他扩展功能
    安知鱼主题还支持评论系统（如 Twikoo、Waline）、文章字数统计、AI 摘要、快捷键、搜索功能等。你可以根据需要在配置文件中启用并配置这些功能。详细配置说明请参照主题官方文档（）。

3.5 修改 CSS 或自定义样式

如果你希望对主题的样式进行个性化调整，可以在博客的 source/css 文件夹中新建或修改 CSS 文件（例如 custom.css），然后在 _config.anzhiyu.yml 文件中利用 inject 选项将其引入：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">

这样你可以覆盖默认样式，达到个性化效果。

4. 生成与预览

完成所有配置后，在博客根目录执行以下命令：

1
hexo clean && hexo generate && hexo server

在浏览器中访问 http://localhost:4000 预览你的博客效果。如果一切正常，再进行后续部署（例如部署到 GitHub Pages）。

5. 部署更新

每次修改完主题配置后，记得重新生成并部署博客：

1
hexo clean && hexo generate && hexo deploy

总结

  1. 克隆主题与覆盖配置

    • 将安知鱼主题克隆至 themes/anzhiyu。
    • 复制 themes/anzhiyu/_config.yml 到博客根目录并重命名为 _config.anzhiyu.yml。

  2. 修改 Hexo 主配置

    • 在 _config.yml 中设置 theme: anzhiyu。

  3. 安装依赖

    • 确保安装了 hexo-renderer-pug 和 hexo-renderer-stylus。

  4. 个性化配置

    • 编辑 _config.anzhiyu.yml 文件，调整站点信息、导航菜单、社交链接、首页配置、音乐球、评论系统等功能。
    • 如需修改样式，新增或覆盖自定义 CSS 文件，并在配置中引入。

  5. 生成、预览与部署

    • 使用 hexo clean && hexo generate && hexo server 查看效果。
    • 整体满意后，执行 hexo deploy 部署更新。

通过以上步骤，你可以在 Hexo 博客中安装并个性化配置安知鱼主题，使其完全符合你的审美和需求。更多详细设置和高级功能请参照安知鱼主题的官方文档()以及相关博主的实战分享()。