基于hexo+github个人博客搭建2

wbtxld

##简单的说明

这里直接给大家推荐一个简约好用的主题，hexo原生简约主题NexT，是目前hexo搭建博客中使用人数最多的主题.且自由度很高，可以自己DIY独属于自己的博客样式，本博客也是采用Next主题

前言

Hexo静态博客本地配置中有两个重要的配置文件，分别是
- 位于根目录下的站点配置文件：/_config.yml
- 位于根目录/theme/你的主题下的主题配置文件：/theme/你的主题/_config.yml
两者的关系为前者优先于后者
本文介绍Next主题的基础配置。

安装

hexo 默认主题为landscape，新主题需要我们自己下载

最简单的是通过git（也可以去官网下载源码）

$ git clone https://github.com/theme-next/hexo-theme-next themes/next

切换主题

通过更改

站点配置文件

进行主题选择。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

语言选择

该主题默认语言为英语，按照需要进行语言切换
找到 \themes\next\languages 下支持的文件列表。（例如汉化的zh-CN）

再对 站点配置文件 进行修改，找到关键词language并在后面做修改并保存退出

# Site 站点配置
title:                # 网站标题
subtitle:             # 副标题
description:          # 网站描述
keywords:             # 关键字
author:               # 你的昵称
language: zh-CN       # 网站语言
timezone:             # 时区

大部分的博客教程都是将language改为zh-hans，但是主题文件更新后该名称已经失效，望注意！

主题模板更换

next主题提供了四种风格的主题模板，可以自由切换，
至于四种模板的不同，请移步官方GitHub文档
在主题配置文件 中查找关键字Schemes

想要保留的模板前去掉

即可。

# Schemes
#scheme: Muse（默认主题）
scheme: Mist
#scheme: Pisces
#scheme: Gemini

目录自选

在主题配置文件中查找关键字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

在每篇文章末尾添加 “本文结束”

在路径\themes\next\layout\_macro中新建 passage-end-tag.swig文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，查找post-footer并在该 div 之前添加如下代码
```
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>
```

在\theme\_config.yml末尾添加以下代码

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

删除网页底部 “由hexo强力驱动、主题版本” 文字

打开

\themes\next\layout\_partials\footer.swig

文件,找到并删除以下部分。

{% if theme.footer.powered.enable %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'})) }}{#
  #}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.powered.enable and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} – {{ next_url('https://theme-next.org', 'NexT.' + theme.scheme, {class: 'theme-link'}) }}{#
  #}{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
{% endif %}

在网站底部加上访问量

打开\themes\next\layout\_partials\footer.swig文件,在第一行前加上以下代码

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

在上一步删除的代码位置添加以下代码：

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

新建标签页面

在根目录下进行
```
$ hexo new page tags
```

对生成的md文件进行编辑,系统将自动识别为标签页面
```
title: 标签
date: 2018-11-28 17:53:24
type: "tags"
---
```

修改主题配置文件，添加tags至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

如果有集成评论服务，页面也会带有评论。若需要关闭的话，请添加字段 comments 并将值设置为 false
```
title: 标签
date: 2018-11-28 17:53:24
type: "tags"
comments: false
```

设置头像

编辑
```
主题配置文件
```
，修改字段

avatar

，值设置成头像的链接地址。其中，头像的链接地址可以是：

完整的互联网URI: http://example.com/avatar.png

站点内的地址:放置在

主题文件夹

的 source/images/ 目录下配置为：avatar: /images/avatar.png

# Sidebar Avatar 头像
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url:  #/images/avatar.gif
  # If true, the avatar would be dispalyed in circle.
  rounded: false
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: false

设置网页标签页左侧标记

编辑主题配置文件，修改字段 favicon，文件放在主题文件夹的相对地址

# For example, you put your favicons into `hexo-site/source/images` directory.
# Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

以上的步骤结束后需要进行部署

根目录下执行(第二步本地预览可选)

$ hexo clean //消除大部分的缓存引起的更新未显示问题
$ //hexo s
$ hexo g -d //hexo generate + hexo deploy