Hexo+Github Page｜基础教程(二)：NexT 主题基本美化｜全网最细致全面的教程

在Hexo+NexT主题搭建中我们已经学会了如何使用 Github 搭建 Hexo 博客了，那么在接下来的这篇文章中我将会介绍一下 Hexo 的基础使用与美化教程

注意事项

配置文件的位置

接下来我将会以站点配置文件和主题配置文件来说明两个需要使用的文件，如下：

站点配置文件

你博客目录下的_config.yml，例如我的站点配置文件就是D:\GithubBlog\MyBlog的_config.yml文件

主题配置文件

主题文件夹下的_config.yml，例如我的站点配置文件就是D:\GithubBlog\MyBlog\themes\next的_config.yml文件

空格问题

注意：编辑代码文件时，例如_config.yml文件，必须使用英文输入状态下的冒号，并且冒号后面必须有一个空格，否则会出现错误，例如language: zh-Hans

部署问题

每次使用
建议每次更改 Hexo 文件后，使用hexo g与hexo s进行编译与运行，并在http://localhost:4000中查看更改，确认更改无误后使用hexo d上传至网页

清除缓存: hexo clean
生成: hexo g
预览:  hexo s
部署:  hexo d

3. 其他详见Hexo 常用命令

使用基础

配置站点文件

打开站点配置文件
找到如下代码块

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

title 修改为自己想要的站点名称

subtitle 为显示在网站上的副标题

description 为显示在作者头像下的描述

keywords 为网站关键词，即用于优化网站的搜索率

author 为网站作者

language 为网站显示的语言

更换内置主题

在Schemes下可以看到这些主题，去掉想要的主题前面的 # 即可

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

更换语言

NexT支持多种语言，只需编辑站点配置文件下的 language 设置

语言	代码	设定示例
English	en	language: en
简体中文	zh-CN（注：zh-Hans已经无法使用）	language: zh-CN
Frangais	fr-FR	language: fr-FR
Portugues	pt	language: pt 或者 language:pt-BR
繁體中文	zh-hk 或者 zh-tw	language: zh-hk
Pycckmi 93bIK	ru	language: ru
Deutsch	de	language: de
日本語	ja	language: ja
Indonesian	id	language: id
Korean	ko	language: ko

菜单

增加菜单项目

NexT默认的菜单项有6个，初始只有home和archives，剩余菜单项需要在主题配置文件中的menu中编辑以开启。

初始状态如下：

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

新建菜单的步骤：

将你想要的菜单选项前的注释 # 去掉，这里以tags为例。

menu:
home: / || home
#about: /about/ || user
tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

在Git Bash执行下列命令，新建页面tags：hexo new page "tags"

完成2后Myblog/source/中会出现tags目录，该目录下有index.md文件，文件内容如下：

title: tags
date: 2019-02-18 16:40:41

在date字段下添加：type: tags

tags 的使用方法详见Hexo 常用命令

设置菜单名称

1. 打开next/languages/zh-CN.yml，更改以下字段

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
  something: 有料

例如你要将 about 的翻译“关于”改为“关于我”，直接更改为“about: 关于我”即可

添加个人介绍——关于

要先添加 about 菜单

打开\source\about下的index.md文件，在最后一个空行(即---的下方)添加你显示的个人信息。

添加额外菜单栏并显示多篇文章

假设你现在需要添加一个“日记”的菜单栏，步骤如下：

在Git Bash执行下列命令，新建页面diary：hexo new page "diary"

完成后Myblog/source/中会出现tags目录，该目录下有index.md文件，文件内容如下：

title: diary
date: 2019-02-18 16:40:41

在date字段下添加：type: diary

打开Myblog\themes\next\languages，找到zh-CN.yml。在 Menu字段下添加schedule: 日记，这样你的网站菜单栏就会显示“日记”项。

为了能让菜单显示多篇文章，就需要借用categories的分类功能

假设 _post 目录下有几篇文章想放到该菜单下，将这些文章移至新建文件夹 diary

打开主题配置文件，找到menu字段，添加日记: //categories/日记/ || fa fa-inbox

上传至github page后，就会发现博客的“日记”页面如下图所示。

点开目录菜单后，会发现多了一个分类 schedule，点击后也会跳转至本页面。

修改菜单栏图标

打开主题配置文件，找到menu字段
以about菜单项为例，可以看到about: /about/ || fa fa-user这一行，其中||后面的fa fa-user即为本菜单项的图标
如果需要更改图标，可以进入Font Awesome获取新图标，只需将文件改为“fa + 复制的图标”即可

去除底部“由 Hexo 强力驱动“

打开主题配置文件，找到Powered by Hexo & NexT字段，将powered: true改为powered: false

设置个人头像

在主题配置文件中找到如下代码：

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/头像名.后缀
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

url后接头像路径，一般将图片放在\MyBlog\themes\next\source\images下，并修改头像名.后缀即可
rounded即以圆圈方式显示头像
rotated即为当鼠标放置在头像上时头像会旋转

添加游客与访问量统计

打开主题配置文件，找到以下代码，并按照此方式更改代码

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://busuanzi.ibruce.info/
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

来到\themes\next\layout\_partials找到footer.swig文件，添加如下代码

{% if theme.footer.counter %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}

自动暗黑模式

找到如下代码块，改为true

# Dark Mode
darkmode: true

注意：此模式只有在系统切换至深色模式才会启动

添加其他频道的链接

找到如下代码块

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  #GitHub: https://github.com/yourname || fab fa-github
  E-Mail: mailto:3436583166@qq.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  Bilibili: https://space.bilibili.com/2106669000 || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

注意：B站是我自行添加的，你也可以选择自行添加其他网站链接

将需要显示的网站前的#去掉，并更改为你的链接即可

添加友链或其他链接

使用“查找”搜索links代码块，替换链接即可

添加赞赏功能

找到如下代码块

reward:
  #wechatpay: /images/wechatpay.jpg
  #alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

同样选择你想要的赞赏方式，也可以同时选择几个。并在images文件夹内添加赞赏图片

添加网站书签

书签是用于标记标记游客本次浏览的位置，方便下次进入网站时自动跳转至上次浏览的位置。当然默认是自动标记的，并不需要在使用书签了，但同样可以作为美化效果

找到如下代码块，并按如下代码修改

# Bookmark Support
bookmark:
  enable: true
  # Customize the color of the bookmark.
  color: "#222"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto

更改代码块样式并添加一键复制

找到如下代码块，并修改代码

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night bright
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

highlight_theme 代码块高亮样式

copy_button 一键复制按钮

show_result 复制时显示“已复制”

style 代码块样式

添加网站运行时间

来到\themes\next\layout\_partials找到footer.swig文件，添加如下代码

<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("7/18/2023 10:00:00"); //修改为你的网站开始运行的时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒.";
    }
setInterval("createtime()",250);
</script>

效果如下

尾声

本次Hexo的美化教程就到这里了，感谢你的观看！如果有疑问过错漏的地方欢迎在评论留言哟 (＾Ｕ＾)ノ~ＹＯ