2023最新hexo-theme-3-hexo安装教程：5分钟打造高颜值个人博客

2023最新hexo-theme-3-hexo安装教程：5分钟打造高颜值个人博客

【免费下载链接】hexo-theme-3-hexohexo主题：三段式设计、极简、方便 Hexo theme: three-stage design项目地址: https://gitcode.com/gh_mirrors/he/hexo-theme-3-hexo

hexo-theme-3-hexo是一款采用三段式设计的极简Hexo主题，以其简洁美观的界面和便捷的配置深受博客爱好者喜爱。本教程将带你快速完成安装配置，轻松拥有一个高颜值的个人博客。

准备工作：环境搭建

在开始安装hexo-theme-3-hexo主题前，需要确保你的电脑已经安装了以下环境：

• Node.js（建议v14及以上版本）
• Git
• Hexo博客框架

如果你还没有安装Hexo，可以通过以下命令快速安装：

npm install -g hexo-cli hexo init my-blog cd my-blog npm install

快速安装：3步完成主题部署

第一步：克隆主题仓库

进入你的Hexo博客目录，执行以下命令克隆主题仓库：

git clone https://gitcode.com/gh_mirrors/he/hexo-theme-3-hexo themes/3-hexo

第二步：修改博客配置

打开Hexo根目录下的_config.yml文件，将主题设置修改为3-hexo：

theme: 3-hexo

第三步：启动本地服务

执行以下命令启动Hexo本地服务，预览你的博客效果：

hexo clean && hexo s

打开浏览器访问http://localhost:4000，你就能看到hexo-theme-3-hexo主题的默认效果了。

hexo-theme-3-hexo主题采用极简三段式设计，界面清新美观

基础配置：个性化你的博客

站点信息设置

打开主题目录下的_config.yml文件（路径：themes/3-hexo/_config.yml），修改基本信息：

• 头像设置：avatar: /img/avatar.jpg（默认使用主题自带头像）
• 网站标题：修改title字段
• 作者信息：修改author相关配置

导航菜单配置

主题支持自定义导航菜单，在_config.yml的menu部分可以设置：

menu: about: on: true url: /about type: 1 friend: on: true

评论系统集成

hexo-theme-3-hexo支持多种评论系统，包括Gitalk、Disqus、utteranc等。以Gitalk为例，在_config.yml中配置：

comment: on: true type: gitalk gitalk: githubID: 你的GitHub用户名 repo: 你的仓库名 ClientID: 你的ClientID ClientSecret: 你的ClientSecret

高级优化：提升博客体验

代码高亮设置

主题内置多种代码高亮主题，在_config.yml中可以切换：

highlight: theme: atom-light # 可选atom-dark、github等多种主题 lineNum: true # 显示行号

数学公式支持

如果需要在博客中插入数学公式，可以启用MathJax：

mathjax: on: true per_page: false

阅读量统计

主题集成了不蒜子统计功能，默认开启：

visit_counter: on: true site_visit: true page_visit: true

常见问题解决

静态资源路径错误

如果博客部署在子目录下，需要在_config.yml中设置blog_path：

blog_path: /blog # 假设博客部署在/blog路径下

评论系统不显示

确保评论配置中的on字段设置为true，并且相关API密钥正确无误。如果使用Gitalk，需要确保仓库是公开的，并且你是仓库的所有者。

样式自定义

如果需要自定义主题样式，可以修改source/css/_partial/目录下的Stylus文件，例如：

• post.styl：文章页面样式
• nav-left.styl：左侧导航样式
• font.styl：字体相关样式

通过以上步骤，你已经成功安装并配置了hexo-theme-3-hexo主题。这个极简而强大的主题将帮助你打造一个既美观又实用的个人博客。开始创作你的第一篇文章吧！

hexo new "我的第一篇博客"

希望本教程能帮助你快速上手hexo-theme-3-hexo主题，享受愉快的博客写作体验！

【免费下载链接】hexo-theme-3-hexohexo主题：三段式设计、极简、方便 Hexo theme: three-stage design项目地址: https://gitcode.com/gh_mirrors/he/hexo-theme-3-hexo