如何搭建个人网页（四）—— Hexo-Next主题

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 1.2k 阅读时长 ≈ 2 分钟

开始

在第二章中，我们已经可以构建一个简单的网站，但用的是hexo的默认主题，并不是特别美观，同时扩展性也不强。本章会讲解如何通过Hexo-Next（一个hexo主题），来美化和丰富我们的网站。

安装

Hexo NexT 是 Hexo 框架下的一款极具人气的博客主题，以其 简约优雅的设计 和 强大的自定义功能 著称。NexT 提供了丰富的主题风格、响应式设计、模块化功能支持（如评论系统、搜索、社交图标等），并兼容各种插件和第三方服务。同时，它的配置简单直观，适合从技术新手到进阶用户使用，是追求高效与美观的博客创作者的理想选择。

hexo next有npm和git两种安装方法，前者比较简单（但是要求hexo 5.0以上版本），这里只介绍前者。

首先进入hexo根目录blog中，然后npm安装。

1
2
cd blog
npm install hexo-theme-next

然后为了配置方便，将next配置文件放到根目录下：

1
cp node_modules/hexo-theme-next/_config.yml _config.next.yml

这种情况下，_config.next.yml和原来hexo的_config.yml两个配置文件就都在根目录下了，这两个文件很关键。为了区分，我们把_config.yml叫做hexo站点配置文件，把_config.next.yml称为next主题配置文件。

在hexo配置文件中，我们将theme改为next：

1
theme: next

现在就算完成了next的安装，可以用我们hexo的命令三件套进行测试：

1
2
3
hexo clean
hexo g
hexo s

然后到localhost:4000中去查看界面。

进阶设置

进阶设置有很多很多，包括主题设置、侧边栏、logo、页脚、菜单栏、国际化、博客、评论等等等等，这里不赘述了，直接上教程(好吧我偷懒了)。

如果你是用npm install的方式安装的next，建议先将blog/node_modules/hexo-theme-next文件夹复制到blog/theme/中，并改名为next（即blog/theme/next），以后你对样式的修改可以直接操作该目录。

这里面hexo样式生效的顺序大致是 blog/source/_data > blog/theme/next > blog/node_modules/hexo-theme-next (前者会覆盖后者）。

继续

经过这些配置，网页基本就比较美观了，接下来会讲如何购买个性化的域名，以及如何绑定到GItlab Pages中，让我们可以通过域名直接访问网站。