博客个性化

更换主题

进入Hexo官方主题网址找到喜欢的主题，打开GitHub根据教程安装主题，或者把整个主题下载下来解压在你的博客目录下的themes文件夹下

下面以next主题为例子

然后修改_config.yml配置文件

theme:next #这里为你下载的主题文件夹名字

然后执行重新渲染部署即可，后文简称三步部署，不再做赘述。

hexo clean
hexo g
hexo d  

注：

当你在本地部署后，修改某篇文章或者配置，无需重新清除渲染部署，保存然后刷新本地界面就可看到效果。可节省时间。

配置文件设置

安装 Hexo 和 NexT 后，你可能会发现 Hexo 使用的两个配置文件，它们都称为：_config.yml

1. 第一个位于站点根目录下，其中包含 Hexo 的配置。
2. 第二个在主题根目录下，由 NexT 提供并包含主题的配置。themes/next/_config.yml或者node_modules/hexo-theme-next/_config.yml

后文我们称第一个 为Hexo 配置文件，第二个为NexT 配置文件，不在赘述。

备用主题配置

关于如何配置NexT主题？传统方法是编辑 NexT 配置文件。但是，通过 git 或 npm 升级 NexT 主题时，配置文件会被覆盖，这给主题的配置带来了不便。具体可看NexT文档。

1. 请确保您使用的是 Hexo 5.0 或更高版本。

2. 在站点的根目录中创建一个配置文件，例如 _config.next.yml

3. 将所需的 NexT 主题选项从 NexT 配置文件复制到此配置文件中。

4. 在所有这些设置上方添加参数。theme_config:next(你的主题文件夹名)

   NexT官方文档说的是，把所有配置代码后移，然后再上方加theme_config: 。我实操下来，这样是不行的。渲染后还是老的配置文件生效。所以改为我上面那样写。

网站页面设置

基本设置

在Hexo配置文件找到:

# Site
title: #网站名
subtitle: #副标题
description: #简介
keywords: #网站关键字
author: #作者
language: zh-CN
timezone: #时区

具体language的值可查看主题下language文件夹，如zh-HK，zh-TW等。

香港、台湾是我国不可分割的一部分。这里只是为了区分简体和繁体。

布局方案

方案是NexT支持的一项功能，通过使用Scheme，NexT提供不同的视图。几乎所有的配置都可以被这些方案使用。到目前为止，NexT支持4种方案，它们是：

• Muse→默认方案，这是NexT的初始版本。使用黑白色调，主要看起来干净。
• Mist→ Muse的紧凑版本，具有整洁的单列视图。
• Pisces→双列方案，像邻居的女儿一样新鲜。
• Gemini→ 看起来像双鱼座，但具有带有阴影的不同列块，以显示对视图更敏感。

可以通过编辑 NexT 配置文件、搜索关键字来更改方案。将看到 4 行方案设置，可以通过删除其中一行并添加到上一个来启用其中一行。

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

站点图标

图标存储在\themes\next\source\images下,选择你想要的图标后,在next配置文件下替换即可,此处我为了方便管理新建了favicon文件夹专门存放站点图标,读者根据自行需求更改.

favicon:
  small: /images/favicon/favicon-16x16-stars.png
  medium: /images/favicon/favicon-32x32-stars.png
  apple_touch_icon: /images/favicon/apple-touch-icon-stars.png
  safari_pinned_tab: /images/favicon/logo.svg

背景图像设置

在themes\next\source\css下创建文件夹\_custom然后在创建style.styl

添加:

body { 
    background: url(/images/background/planet1.png);//背景图片路径
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
    background-size: cover
}

图片放入themes\next\source\images\background，然后在themes\next\source\css\main.styl添加：

@import "_custom/style.styl"

三步操作部署渲染即可看到效果。

页脚

网站成立年份和作者

在next配置文件找到

footer:
  since: 2021 #年份 默认为当前年份，若填入年份小于当前年份，则显示为 2022-2023类似的格式
  icon:
    name: fa fa-star #中间的图标，可以自行替换
    animated: true #图标动画开关
    color: rgb(77, 116, 250) #图标颜色

注释页脚logo

在next配置文件找到

# Powered by Hexo & NexT
powered: false #值改为false

网站运行时间

在themes\next\layout\_partials\footer.njk增加

<div>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("01/04/2023 00: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>
</div>

访客量、网站浏览量和文章阅读数

在next配置文件打开busuanzi_count，_icon都为对应的图标，

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: far fa-eye

同时在这里简单介绍一下：

pv方式，统计单个用户连续点击N篇文章，记录N次访问量。

uv方式，统计单个用户连续点击N篇文章，但只记录1次访问量。

在themes\next\layout\_partials\footer.njk找到下面代码

{%- if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  {%- if theme.busuanzi_count.total_visitors %}
    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="{{ theme.busuanzi_count.total_visitors_icon }}"></i>
      </span>
      <span class="site-uv" title="{{ __('footer.total_visitors') }}">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_views %}
    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="{{ theme.busuanzi_count.total_views_icon }}"></i>
      </span>
      <span class="site-pv" title="{{ __('footer.total_views') }}">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
  {%- endif %}
</div>
{%- endif %}
#可根据需要修改为你需要的样式。

默认效果：

如果next的默认效果你很满意无需更改，可跳至下一步骤。

取消中间“|”，在 themes\next\source\css\_common\components\post\post-header.styl下找到下面代码，这是页脚的css样式。

// .post-meta-item exists in .post-meta and footer
:not(.post-meta-break) + .post-meta-item::before {
  content: '|';
  margin: 0 .5em;
}

因为这个样式多处共用，我们在他的下方写一段清除样式的css代码，然后在上方的页脚处复制class即可。class="post-meta-item clear-post-meta-item"达到清除的效果，详见下文。

.clear-post-meta-item::before{
  display: none;
}

注释掉图标，增加旋转等待特效<i class="fa fa-spinner fa-spin"></i>。当busuanzi_count数据未传送完成时，原先数字位置会出现旋转等待图标。

{%- if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  {%- if theme.busuanzi_count.total_visitors %}
    <span class="post-meta-item clear-post-meta-item" id="busuanzi_container_site_uv">
      <!--<span class="post-meta-item-icon">
        <i class="{{ theme.busuanzi_count.total_visitors_icon }}"></i>
      </span>-->
      一共有<span class="site-uv" title="{{ __('footer.total_visitors') }}">
        <span id="busuanzi_value_site_uv"><i class="fa fa-spinner fa-spin"></i></span>
      </span>个人类来跟我说过
    </span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_views %}
    <span class="post-meta-item clear-post-meta-item" id="busuanzi_container_site_pv">
      <!--<span class="post-meta-item-icon">
        <i class="{{ theme.busuanzi_count.total_views_icon }}"></i>
      </span>-->
      <span class="site-pv" title="{{ __('footer.total_views') }}">
        <span id="busuanzi_value_site_pv"><i class="fa fa-spinner fa-spin"></i></span>
      </span>次hello哦
    </span>
  {%- endif %}
</div>
{%- endif %}
</div>

首页和归档页面文章分页

安装插件

npm install --save hexo-generator-index
npm install --save hexo-generator-archive

在Hexo配置文件中修改下面代码，使得首页每间隔5篇文章就分页，归档页每间隔10篇文章才分页。

index_generator:
  path: ''
  per_page: 5 #文章间隔多少篇分页
  order_by: -date
#这段自己添加
archive_generator:
  per_page: 10 
  yearly: true
  monthly: true

标题徽章logo

在next配置文件，放入你喜欢的图标即可，注意Mist布局不支持此项。

custom_logo: /uploads/custom-logo.jpg

深色模式

在next配置文件打开,当用户操作系统为深色模式时网站会自动适配深色模式。

darkmode: true

书签

书签是一个插件，允许用户保存他们的阅读进度。用户只需单击页面左上角的书签图标（如🔖）即可保存滚动位置。当他们下次访问您的博客时，他们可以自动恢复每个页面的最后一个滚动位置。

您可以通过在 NexT 配置文件中将值设置为来启用它。bookmark.enable``true

bookmark:
  enable: false
  color: "#222"
  #如果是auto，关闭页面或点击书签图标时保存阅读进度。
  #如果是manual，只需单击书签图标保存即可。
  save: auto 

主菜单

在next配置文件中，找到

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

分别对应

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益 404

可以把你不需要的功能注释掉，也可以在对应名字那些修改成你想要的名字。

标签

使用 Hexo 命令新建一个名为 tags 的页面即可，值得一提的是，next的标签是以词云那种形式的，某个标签的文章越多，该标签显示效果越大，蛮有趣的。

hexo new page tags

该页面标题可以在文件 \hexo\source\tags\index.md 中修改

为文章添加标签

在文章的开头添加如下字段

tags:
- 标签一
- 标签二

然后在刚才生成的博客目录\source\tags\index.md指定其type为tags

title: 标签
date: 2023-04-03 17:36:06
type: "tags"

执行三步部署就能看到标签效果。

关于

使用 Hexo 命令新建一个名为 about 的页面即可

hexo new page about

该页面内容在文件 \hexo\source\about\index.md 中修改

搜索

通过在站点根目录目录中执行以下命令进行安装：hexo-generator-searchdb

npm install hexo-generator-searchdb

编辑 Hexo 配置文件并添加以下内容：

search:
  path: search.xml
  field: post
  content: true
  format: html

编辑 NexT 配置文件以启用本地搜索：

local_search:
  enable: true #打开本地搜索
  #auto:搜索框改变实时搜索，manual:按回车键或搜索按钮触发搜索
  trigger: auto 

还可以使用Algolia Search第三方搜索,具体可看官方文档

侧边栏设置

官方文档写的非常详细:NexT 侧边栏设置

代码块

在next配置文件找到：

codeblock:
  #主题
  theme: 
    light: a11y-dark
    dark: a11y-dark
  prism:
    light: prism
    dark: prism-dark
  #一键复制按钮
  copy_button:
    enable: true
   	#代码块风格
    style: default #default | flat | mac

可以在此选择你想要的主题风格Highlight (theme-next.js.org)

另外在hexo配置文件，选择打开highlight还是prismjs

highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

背景动画

背景动画使用Js来处理，会JS的同学可以自己写喜欢的动画，我这边就用了网上比较通用的动画。找到以下路径 themes\next\layout\_layout.njk 在文章 </body>的上面添加如下代码

<script type="text/javascript" color="255,255,255" opacity='1' zIndex="-2" count="100" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

重新部署后，网页出现粒子动画

文章设置

标签图标

默认情况下，帖子底部的标签左侧有一个符号 #。如果你更喜欢图标而不是符号，请编辑 NexT 配置文件，如下所示：

tag_icon: true

字数统计和阅读时间

安装插件

npm install hexo-word-counter

在hexo配置文件

symbols_count_time:
  symbols: true #文章字数
  time: true #文章阅读时间
  total_symbols: true #页脚全站字数
  total_time: true #页脚全站阅读时间

next配置文件

symbols_count_time:
  separated_meta: true #单独的行显示文章字数和估计阅读时间
  item_text_total: false #页脚部分中显示字数和估计阅读时间

球体滚动标签云

可以访问我的博客，打开侧边栏查看效果

首先安装插件npm install hexo-tag-cloud，在你想要添加标签云效果的页面加入以下代码，我添加在侧边栏，打开themes\next\layout\_macro\sidebar.njk

{% if site.tags.length > 1 %}
        <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
        <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
        <div class="widget-wrap">
          <div id="myCanvasContainer" class="widget tagcloud" style="height: 100px;width: 100px;margin: 0 auto;">
              <canvas width="250" height="250" id="resCanvas" style="width:100%">
                 {{ list_tags() }}
              </canvas>
          </div>
        </div>
      {% endif %}

在hexo配置文件加入

tag_cloud:
    textFont: Trebuchet MS, Helvetica #字体
    textColor: '#333' 
    textHeight: 25
    outlineColor: '#E2E1D1' #选中字体时背景颜色
    maxSpeed: 0.1 #运行速度

三步部署即可看到效果。

提交博客到搜索引擎

提交到百度

博客验证

访问百度搜索资源平台官网，注册或者登陆百度账号，依次选择 用户中心 –> 站点管理 输入你的网站，协议头推荐是https协议的，如果你没有https协议后面可能会出现报错，因为hexo会强制把你的链接转为https协议

选择文件验证，下载验证文件，放到blog的 source 目录中，如下设置hexo配置文件，防止这个html被 hexo g 命令重新渲染。

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: 
    - <你的百度验证html名>.html

然后 hexo clean; hexo g; hexo d ，完成验证。

主动提交

安装插件 npm install hexo-baidu-url-submit --save，设置hexo配置文件，

baidu_url_submit:
  count: 99              # 提交最新的多少个链接
  host: lantary.cn       # 在百度站长平台中添加的你的博客域名
  token: [your_token]    # 秘钥
  path: baidu_urls.txt   # 文本文档的地址， 新链接会保存在此文本文档里

token在 普通收录 -> API提交 中能看到

在hexo配置文件加入你的站点、加入新的deploy

# URL
url: http://helloworldeng.github.io # 你的博客网站

# deploy
deploy:
- type: git
  repo: https://github.com/HelloWorldENG/HelloWorldENG.github.io.git
  branch: main
- type: baidu_url_submitter         # 新加的推送

最后运行 hexo clean; hexo g; hexo d，显示

{"remain":2965,"success":33}

说明成功推送33个链接，remain是当天剩余可推送的条数

sitemap提交

推荐sitemap提交和主动提交一起部署，先安装一下插件

npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save

然后使用命令 hexo clean; hexo g; hexo d 就在首页生成了sitemap.xml文件，其中，sitemap.xml是通用的站点地图，而baidusitemap.xml是百度专用的站点地图。

提交到谷歌、必应

谷歌和必应的步骤相同，这里就一起讲了。进入Google搜索管理后台和bing搜索管理后台。选择网站模式，输入博客域名，next集成了站长工具验证，接下来我们使用其的配置方法。

选择HTML验证，你将得到<meta name="google-site-verification" content="xxxxxxxxxx" />，将xxxxxx填入next配置文件中，

google_site_verification: xxxxxxxxxxxxxxxxxxx
bing_site_verification: xxxxxxxxxxxxxxxxxx

百度验证也可使用这种办法，对应的填入 baidu_site_verification:即可

然后执行hexo clean; hexo g; hexo d在回到站长平台验证即可，验证后提交站点地图。用前文说到的，sitemap.xml文件。

评论系统

next集成了许多评论系统，这里我们选择畅言系统。进入畅言云评，注册你的账号获得密匙。然后填入next配置文件，同时你也可在畅言后台设置一些你的个性化设置，如登录账号限制等等。需要注意：发表评论后，网站需要一些时间才能看到评论数量的增加。

changyan:
  enable: false
  appid: xxxxxxx
  appkey: xxxxxx
  count: true