前言

关于Hexo

Hexo文档（本文或许有大量文档引用此处）
什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装

准备工作

Node.js

Node.js(Node.js 版本需不低于 8.10，建议使用 Node.js 10.0 及以上版本)：Node.js 为大多数平台提供了官方的安装程序。对于中国大陆地区用户，可以前往淘宝 Node.js 镜像下载。

npm

允许用户从NPM服务器下载别人编写的第三方包到本地使用。

允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

npm命令

# 获取当前npm版本号（可用来测试npm是否安装成功）
$ npm -v

# 查看当前目录已安装的插件
$ npm list

# 为项目生成 node_modules 文件夹
$ npm install
$ npm i

# 安装指定插件
$ npm install <name> [ -g ][ --save-dev ]

# 卸载指定插件
$ npm uninstall <name> [ -g ][ --save-dev ]

# 更新全部插件
$ npm update [ --save-dev ]

# 指定插件更新
$ npm update <name> [ -g ][ --save-dev ]

# 全局安装 全局安装在C:\Users\Administrator\AppData\Roaming\npm\node_modules
#         非全局安装在 npm install生成的 node_modules 文件夹里
$ -global
$ -g

# 将安装的包写入package.json里面的 dependencies
# dependencies：生产环境需要依赖的库
$ --save
$ -S

# 将安装的包写入packege.json里面的 devDependencies
# devdependencies： 仅 开发环境下需要依赖的库
$ --save-dev
$ -D

cnpm

淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟一次以保证尽量与官方服务同步。
1
2
3
4
5
# 安装cnpm
$ npm install cnpm -g --registry=https://registry.npm.taobao.org

# 查看等级 cnpm和npm的命令区别只有 cnpm和npm 而已
$ cnpm -v

Git

Windows：下载并安装 git。

安装和部署

安装Hexo

#----------------------全局安装法----------------------#
$ npm install -g hexo-cli

# ----------------------局部安装法----------------------#
# 官方文档有提到局部安装方法（没用过，有兴趣的可以去尝试下）
$ npm install hexo
# 安装后有两种执行方式
# 1
$ npx install <command>
# 2 将Hexo所在目录下的node_modules添加到环境变量中即可直接使用hexo <command>:
$ echo 'PATH="$PATH:./node_moduls/.bin"' >> ~/.profile

建站

安装完成后，部署Hexo个人站点空间(以下称为 %HEXO_HOME%)（eg:E:\HexoBlog）
1
2
3
$ cd %HEXO_HOME%
$ hexo init
$ npm install

网站配置

站点配置文件：%HEXO_HOME%\_config.yml

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 墨染青葱几许烟 #博客网站名称
subtitle: 'yooking的个人博客' #博客副标题
description: ''
keywords:
author: yooking #作者名字
language: zh-CN #语言
timezone: ''

# 开启本地搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://blog.yookingh.cn/ #主页路径
root: /
#文档路径 我这里是 url/文档中category字段的值/文档中path_name字段的值.html
#默认路径为日期
permalink: :category/:path_name.html  
permalink_defaults:
pretty_urls:
  trailing_index: true # 是否显示xxx.html?我选择是
  trailing_html: true # 是否显示.html?我依然选择是

# 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:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: false # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# Home page setting 这是个插件 目的是隐藏某些文档不在首页战展示
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
# index2 generator是否包含官方的hexo-generator-index，默认true（包含）
index2_include_index: true
index2_generator:
  per_page: 10
  order_by: -date # 按发布时间排序
  exclude:
    - tag hide # 不包含标签为hide的文章
    - category 想丶把旅途画成色彩 # 不包含分类为hide的文章

# index_generator:
#  path: ''
#  per_page: 10
#  order_by: -date

# Category & Tag 默认：uncategorized
default_category: uncatalog
#categories 变量映射
category_map:
 想丶给代码码上诗意: dev
 想丶为旅途涂上颜色: travel
 想丶将博客写出精彩: blog
tag_map:
 浏览器: browser
 项目开发: proj
 学习笔记: study
 旅游: travel

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # 配置主题 我配置的是next 这个配置对应的路径为 %HEXO_HOME%/themes/next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: # 我这里配置了两个路径 一个是github 一个是coding
    github: # 填写自己的github路径
    coding: # 填写自己的coding路径
  branch: master # 提交的分支
  message: "博客更新:( {{ now('YYYY-MM-DD HH:mm:ss') }})" #提交时显示的文字
  
  #博客文字统计
symbols_count_time:
  symbols: false
  time: false
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  
 # mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "7.1.2" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

下载主题

以nexT为例：

$ cd %HEXO_HOME%

# 路径可能会发声改变 具体请看主题官网介绍
# 当前命令指定了安装位置 %HEXO_HOME%/themes/next
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

怎么配置主题文件

主题文件初级配置：官方文档（ps:如果在官方文档中找不到你想要的，Google it，关注自己的版本号，不要搜版本号之前的了…很多你想要的功能已经被加入主题中了）

主题文件自定义方法（首先你要有一定的编程基础）：Chrome 、Fire Fox 等浏览器 F12 进入控制台，找到要修改的对应控件的对应class文件在%HEXO_HOME%\themes\next\layout中去找到并修改它即可。

我的主题自定义配置(请注意E:HexoBlog 替换为自身的%HEXO_HOME%)

文章末尾增加自定义版权信息：(效果见本文底部 - 另附非自定义方法 - 相对自定义来说更省事)

路径E:\HexoBlog\themes\next\layout\_macro中新增my-copyright.swig

{% if page.copyright %}
<div class="my_post_copyright">
    <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
    <!-- JS库 sweetalert 可修改路径 -->
    <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
    <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
    <p>
        <span>本文标题:</span>{{ page.title }}
    </p>
    <p>
        <span>文章作者:</span>{{ theme.author }}
    </p>
    <p>
        <span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}
    </p>
    <p>
        <span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}
    </p>
    <p>
        <span>原始链接:</span>
        <a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
        <span class="copy-path"  title="点击复制文章链接">
            <i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i>
        </span>
    </p>
    <p>
        <span>许可协议:</span>
        ©<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。
    </p>
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
        $(".fa-clipboard").click(function(){
            swal({   
                title: "",   
                text: '复制成功',   
                html: false,
                timer: 500,   
                showConfirmButton: false\
            });
        });
    }));  
</script>
{% endif %}

在E:\HexoBlog\themes\next\layout\_macro\post.swig中引用

 <footer class="post-footer">
+    <div>
+        {% if not is_index %}
+            {% include 'my-copyright.swig' %}
+        {% endif %}
+    </div>
     {%- if post.tags and post.tags.length %}
         {%- if theme.tag_icon %}
             {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}
         {% else %}
             {%- set tag_indicate = '#' %}
         {%- endif %}
         <div class="post-tags">
             {%- for tag in post.tags.toArray() %}
             <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
             {%- endfor %}
         </div>
     {%- endif %}
     {{ partial('_partials/post/post-footer.swig', {}, {cache: theme.cache.enable}) }}
     {{ post_nav(post) }}
 </footer>

在E:\HexoBlog\themes\next\source\css\_common\components\post中新增样式文件my-post-copyright.styl

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #333333; // title color
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #0593d3; // link color
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

文章末尾增加版权信息 - 非自定义方法

在%HEXO_HOME%\themes\next\_config.yml中搜索creative_commons

配置如下：

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language: zh-CN

PS：对应的配置文件在%HEXO_HOME%\themes\next\layout\_partials\post\post-copyright.swig

设置透明背景：(为了让背景动画有用武之地）

路径：E:\HexoBlog\themes\next\source\css中的_colors.styl文件定义了全局颜色

:root {
  --body-bg-color: rgba(255,255,255,0.5); // 背景 影响sidebar
  --content-bg-color: rgba(255,255,255,0.5); // 文字背景 影响文章背景色
  --card-bg-color: $card-bg-color;
  --text-color: $text-color;
  --blockquote-color: $blockquote-color;
  --link-color: $link-color;
  --link-hover-color: $link-hover-color;
  --brand-color: $brand-color;
  --brand-hover-color: $brand-hover-color;
  --table-row-odd-bg-color: $table-row-odd-bg-color;
  --table-row-hover-bg-color: $table-row-hover-bg-color;
  --menu-item-bg-color: $menu-item-bg-color;
  --btn-default-bg: rgba(255,255,255,0); // 按钮背景 影响阅读全文 按钮
  --btn-default-color: $btn-default-color;
  --btn-default-border-color: $btn-default-border-color;
  --btn-default-hover-bg: $btn-default-hover-bg;
  --btn-default-hover-color: $btn-default-hover-color;
  --btn-default-hover-border-color: $btn-default-hover-border-color;
}

插入网易云音乐

打开%HEXO_HOME%\themes\next\layout\

在需要展示音乐的位置增加（歌曲：从前慢（歌手：宋玥 cover：林炫清））

这边是增加在E:\HexoBlog\themes\next\layout\_partials\sidebar\site-overview.swig中

<div id="music_163">
    <iframe frameborder="no" border="0" 
            marginwidth="0" marginheight="0" height=86 
            src="//music.163.com/outchain/player?type=2&id=1417959188&auto=1&height=66"
            >
    </iframe>
</div>

音乐播放器代码来源：网易云 - 生成外链即可

彩色标签页配置

在E:\HexoBlog\themes\next\layout新增tag-color.swig

<script type="text/javascript">
     var alltags = document.getElementsByClassName('tag-cloud-tags');
     var tags = alltags[0].getElementsByTagName('a');
     for (var i = tags.length - 1; i >= 0; i--) {
       var r=Math.floor(Math.random()*75+130);
       var g=Math.floor(Math.random()*75+100);
       var b=Math.floor(Math.random()*75+80);
       tags[i].style.background = "rgb("+r+","+g+","+b+")";
     }
</script>

<style>
  .tag-cloud-tags{
    font-family: Helvetica, Tahoma, Arial;
    font-weight: 100;
    text-align: center;
    counter-reset: tags;
  }
  .tag-cloud-tags a{
    border-radius: 6px;
    padding-right: 5px;
    padding-left: 5px;
    margin: 8px 5px 0px 0px;
  }
  .tag-cloud-tags a:before{
    content:  "🔖";
  }

  .tag-cloud-tags a:hover{
     box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
     transform: scale(1.1);
     /*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/
     transition-duration: 0.15s;
  }
</style>

在E:\HexoBlog\themes\next\layout\page.swig中引用

 <div class="post-block" lang="{{ page.lang or config.language }}">
       {% include '_partials/page/page-header.swig' %}
       {#################}
       {### PAGE BODY ###}
       {#################}
       <div class="post-body{%- if page.direction and page.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}">
         {%- if page.type === 'tags' %}
           <div class="tag-cloud">
             <div class="tag-cloud-title">
               {{ _p('counter.tag_cloud', site.tags.length) }}
             </div>
             <div class="tag-cloud-tags">
               {{ tagcloud({
                 min_font   : theme.tagcloud.min,
                 max_font   : theme.tagcloud.max,
                 amount     : theme.tagcloud.amount,
                 color      : true,
                 start_color: theme.tagcloud.start,
                 end_color  : theme.tagcloud.end})
               }}
             </div>
           </div>
+          {% include 'tag-color.swig' %}
         {% elif page.type === 'categories' %}
           <div class="category-all-page">
             <div class="category-all-title">
               {{ _p('counter.categories', site.categories.length) }}
             </div>
             <div class="category-all">
               {{ list_categories() }}
             </div>
           </div>
         {% elif page.type === 'schedule' %}
           <div class="event-list">
           </div>
           {% include '_scripts/pages/schedule.swig' %}
         {% else %}
           {{ page.content }}
         {%- endif %}
       </div>

添加sitemap

# sitemap插件 二选其一
$ cnpm install hexo-generator-sitemap -D
# 百度的sitemap
$ cnpm install hexo-generator-baidu-sitemap -D

执行hexo s后输入
sitemap地址：http://localhost:4000/sitemap.xml
百度sitemap地址：http://localhost:4000/baidusitemap.xml
sitemap可用于搜索引擎录入

最后

附上主题配置文件_config.yml