Build a blog with Hexo framework

偶然发现了Gitee也有Page功能，于是就想建立一个博客用来记录自己写的小应用的使用说明文档。

下面是我搭建博客的过程，采用Hexo框架。

概况 - Pre

系统：Debian 10 Buster GNU/Linux x86_64
托管平台：码云（Gitee.com）
博客框架：Hexo

上手 - Get Start

搭建环境 - Set Up Environment

更新系统(System Upgrade)：sudo apt update && sudo apt dist-upgrade
安装git(Install Git)：sudo apt install git
安装nodejs(Install nodejs)：sudo apt install nodejs
检查版本(Check nodejs version >= 10.13 ,and 12.0 is recommented)：nodejs -v (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
安装npm(Install npm)：sudo apt install npm
安装cnpm [For Chinese ,fast then npm]：npm install cnpm -g --registry=https://r.npm.taobao.org
安装Hexo(Install Hexo)：cnpm install -g hexo-cli

新建码云仓库 - New Gitee Repository

新建一个码云仓库，仓库名是你的用户名，比如我的码云地址是：https://gitee.com/rmshadows

所以我新建的仓库名是：rmshadows
新建一个分支，用于以后的源代码迁移，比如这里新建一个分支是hexo-src
创建SSH密钥：
- Linux Terminal : ssh-keygen -t rsa -C "xxxxxxxxx@xxxx.com"，这里请用你的Git Commit要用的邮箱。这个命令会在$Home目录下的ssh隐藏文件夹中（$HOME/.ssh/）生成一个id_rsa.pub钥匙。文件内容如下：
  1
  ssh-rsa xxxxxxxx...(一大堆字母就是了) xxxxxxxxxx@xxxx.com(Here is your E-mail)
- 然后复制这个文件里的所有内容到码云中，添加SSH公钥。
- 验证：添加完毕后在Terminal中尝试链接Gitee：ssh git@gitee.com
  
  成功的话会有下面中一段话：
  1
  2
  Hi 「Your Name」! You've successfully authenticated, but GITEE.COM does not provide shell access.
  Connection to gitee.com closed.
  然后咱们就可以愉快地提交代码啦。

本地工作区搭建 - Local Workplace

新建工作区文件夹 mkdir Gitee_Hexo_Blog_Project && cd ./Gitee_Hexo_Blog_Project
克隆远程仓库，记得复制的是仓库的SSH地址，不是HTTPS地址！而且，克隆的是hexo-src分支！不是Master分支哦

git clone git@gitee.com:「Your User Name」/「Your User Name」.git -b hexo-src
进入克隆好的仓库中 cd 「Your User Name」
新建Hexo文件夹，并初始化Hexo文件夹。
- mkdir Hexo && Hexo init ./Hexo
- 如果觉得init太慢了，可以修改下（这里假设你是全局安装，或者你可以自己找到Hexo安装目录type hexo）init脚本中的GIT_REPO_URL地址，改为我的克隆仓库的地址：https://gitee.com/rmshadows/hexo-starter.git
  
  vi /usr/lib/node_modules/hexo-cli/lib/console/init.js
  
  然后保存就行了。
初始化完成后，进入Hexo文件夹，执行npm install。
这边说下大概的情况：
- scaffolds：这里放的帖子初始模板。
- themes：这里是主题文件，你可以在这里找到你喜欢的主题。下面是我喜欢的主题：
  - TKL | 作者博客这是我用的第一个主题，非常棒，自带搜索功能一键启用很方便。
  - Bean Tech | 作者博客这是我用的第二个主题。
  - HUX Blog | 作者博客这个是我用的第三个主题。
  - Live My Life | 作者博客 - 这个是我当前用的主题，你看看就知道了，最先是HUX，然后Bean Tech基于HUX，LiveMyLife又基于BeanTech做了修改，哈哈哈哈。
  - NEXT 这个主题看样子非常火啊，你们可以看看。
  - 其他主题还有很多，你们自己去知乎搜索下推荐。
- source：这里是资源文件
  - _posts ：这里是你的博文，每次hexo new xxx就会在这里生成文件，来这里编辑就是了。用的是Markdown标记语言，就跟写README.md文件一样，so easy。
- public：这里是要发布到master分支的文件。

最后，修改配置文件_config.yml

配置文件如下 - 具体参数我后面讲(更换主题中讲，因为初始文件我没怎么改)：

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

# Site
title: 你网站的名字
subtitle: 网站副标题
description: 描述
keywords: 关键词
author: 你的名字
language: 语言
timezone: 时区

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: 你的网址URL
root: 根目录
permalink: 生成的链接格式
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# 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: true # 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
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# 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)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# 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
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

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

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 部署方式
  repo: 仓库SSH地址
  branch: 分支

然后安装自动部署插件：cnpm install hexo-deployer-git --save

现在基本配置完了，使用hexo new "新帖子" 发布第一篇博文。
hexo clean && hexo g 生成静态页面，在public文件夹中，这个就是要放到master分支上的文件。
使用hexo d进行部署。

Gitee Page

部署好后，在码云仓库页面Service中有个Gitee Pages服务，点进去，分支默认master，点击开始。最后会给你一个链接：https://「Your User Name」.gitee.io/
完成。务必记得每次部署完都要手动Update下Gitee Pages，除非你花钱了。

我的配置 - My Blog

好了，现在说下我的配置文件，其他主题大同小异，都可以参考的。

我这里用的是Live My Life主题。

主题搭建 - Hexo Theme

hexo init hexo
rm -rf _config.yml package.json scaffolds source themes yarn.lock 只保留node_modules文件夹
git clone https://github.com/V-Vincen/hexo-theme-livemylife.git
mv hexo-theme-livemylife/* ./
rm -rf hexo-theme-livemylife
npm install && npm audit fix && npm audit fix --force
cnpm install hexo-deployer-git --save
hexo clean && hexo g

主配置文件 - _config.yaml

注意：因为主题不同，配置文件也会有所不同，加上插件不同，配置文件页不同，没有的配置你忽略就行了，或者去插件市场找插件就有了。

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

# Site
title: Welcome to CIVICCCCC
subtitle: '醉后不知天在水  满船清梦压星河'
author: Ryan Yim
language: zh-CN
timezone: Asia/Shanghai


# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# url: http://yoursite-url      # Note: don't forget to modify the CNAME file to your url
url: https://rmshadows.gitee.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# CDN Setting
## Docs: https://www.jsdelivr.com/?docs=gh
## If Github Pages deploy，you can ues jsdelivr settings
#
# jsdelivr:
#   jsdelivr_url: https://cdn.jsdelivr.net/gh/
#   github_username: rmshadows
  

# Custom Setting Start

# Site settings
SEOTitle: RYAN | be yourself
email: justaaaa@163.com
description: "This is CIVICCCCC's blog..."
keyword: "rmshadows,civiccccc,blog,Blog"
header-img: img/header_img/newhome_bg.jpg
archives-img: img/header_img/archive_bg2.jpg


# Favicon settings
favicon: img/avatar/roguerabbit.jpg


# Signature Setup
signature: true # show signature
signature-img: img/signature/rmshadows.png


# Wave settings
wave: true


# SNS Settings
# RSS: true
github_username: rmshadows
#twitter_username: V_Vincen_
#instagram_username: v_vincen_
# facebook_username:  yourAccount
# linkedin_username:  yourAccount
zhihu_username: rmshadows
# weibo_username: WVincen


# Sidebar Settings
sidebar: true   # whether or not using Sidebar.
sidebar-about-description: "海纳百川 有容乃大"
sidebar-avatar: img/avatar/roguerabbit.jpg    # use absolute URL, seeing it's used in both `/` and `/about/`
widgets:
- visitor   # busuanzi: https://busuanzi.ibruce.info/
- featured-tags
- short-about
- recent-posts
- friends-blog
- archive
- category


# widget behavior
## Archive
archive_type: 'monthly'
show_count: true

## Featured Tags
featured-tags: true   # whether or not using Feature-Tags
featured-condition-size: 0    # A tag will be featured if the size of it is more than this condition value

## Friends
friends: [
    {
        title: "国庆电播小弟",
        href: "https://github.com/xjx0106"
    },{
        title: "itcast-ying",
        href: "https://github.com/itcast-ying"
    },{
        title: "Xeon-J",
        href: "https://github.com/cjj19970505"
    },{
        title: "Xeon-H",
        href: "https://github.com/XeonKHJ"
    },{
        title: "Gitee - Ryan Yim",
        href: "https://gitee.com/rmshadows"
    },{
        title: "404 No Found Page",
        href: "https://rmshadows.gitee.io/404"
    }
]

# Comment Settings——我自己修改了LifeMyLife主题评论部分内容->/hexo/themes/livemylife/layout/_partial/comment.ejs
# 来必力City版安装代码
livere:
  data_id: "city"
  data_uid: "MTAyMC81Mjk3MC8yOTQ0Ng=="

## Gitalk Settings
## Doc:https://github.com/gitalk/gitalk/blob/master/readme-cn.md
##
#gitalk:
#  owner: 'rmshadows'                         # 'GitHub repo owner'
#  admin: ['rmshadows']                         # 'GitHub repo'
#  proxy: https://netnr-proxy.cloudno.de/https://github.com/login/oauth/access_token
#  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
#  repo: '' # ['GitHub repo owner and collaborators, only these guys can initialize github issues']
#  clientID: ''                      # 'GitHub Application Client ID'
#  clientSecret: ''   # 'GitHub Application Client Secret'
#  perPage: 20                     # Pagination size, with maximum 100.
#  pagerDirection: last            # Comment sorting direction, available values are last and first.
#  createIssueManually: false      # By default, Gitalk will create a corresponding github issue for your every single page automatically when the logined user is belong to the admin users. You can create it manually by setting this option to true
#  language: zh-CN                    # Localization language key, en, zh-CN and zh-TW are currently available.
#  maxCommentHeight: 250           # An optional number to limit comments' max height, over which comments will be folded.Default 250.

## Gitment Settings
## Doc:https://github.com/imsun/gitment
##
# gitment:
#   owner:                          # Your GitHub ID. Required.
#   repo:                           # The repository to store your comments. Make sure you're repo's owner. Required.
#   client_id:                      # GitHub client ID. Required.
#   client_secret:                  # GitHub client secret. Required.
#   desc:                           # An optional description for your page, used in issue's body. Default ''.
#   perPage: 10                     # An optional number to which comments will be paginated. Default 20.
#   maxCommentHeight: 250           # An optional number to limit comments' max height, over which comments will be folded. Default 250.

## Disqus settings
##
# disqus_username: your-disqus-ID


# Analytics settings

## Google Analytics
# ga_track_id: UA-xxxxxx-xx   # Format: UA-xxxxxx-xx

## Baidu Analytics
# ba_track_id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

## Sitemap
sitemap:
  path: sitemap.xml

## Baidusitemap
baidusitemap:
    path: baidusitemap.xml
    baidu_push: true

# Custom Setting End



# 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
auto_spacing: true
titlecase: false    # Transform title into titlecase
external_link: true   # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: true
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:


# Category & Tag
default_category: uncategorized
category_map:
tag_map:
home_posts_tag: true    # show posts tags


# 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


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

archive_generator:
  per_page: 10
  yearly: true
  monthly: true
  daily: false


# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
##
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'


# Build Settings
anchorjs: true    # if you want to customize anchor. check out line:186 of `post.ejs`


# article top
top: true


# WordCount Settings
## Dependencies: https://github.com/willin/hexo-wordcount
## Docs: https://www.npmjs.com/package/hexo-wordcount
##
wordcount: true


# top scroll progress
scroll: true


# Tip
tip:
  enable: true
  copyright: If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !


# Social Share Post
## Docs:https://github.com/overtrue/share.js
##
socialshare: true


# Viewer config
## Docs:https://github.com/fengyuanchen/viewer
## Demo:https://fengyuanchen.github.io/viewer/
##
viewer: true


# ThemeColor config
themecolor: true


# Search Setting
## Search: https://go.kieran.top/post/45/
## Dependencies: https://github.com/V-Vincen/hexo-generator-zip-search
##
search:
  path: search.json
  zipPath: search.flv
  versionPath: searchVersion.json
  field: post
  trigger: auto   # if 'auto', trigger search by changing input;if 'manual', trigger search by pressing enter key or search button
  top_n_per_article: 1    # show top n results per article, show all results by setting to -1


# Theme config
## Themes: https://hexo.io/themes/
##
theme: livemylife


# Gitter
## Docs:https://gitter.im/?utm_source=left-menu-logo
##
gitter:
  room: SHDAOWSaaaA/community


# Deployment
## Docs: https://hexo.io/docs/deployment.html
##
deploy:
  type: git
  repo: git@gitee.com:rmshadows/rmshadows.git
  branch: master

博文加密——闹着玩

插件仓库：https://github.com/D0n9X1n/hexo-blog-encrypt/blob/master/ReadMe.zh.md

安装：npm install --save hexo-blog-encrypt

需要修改的地方：博客加密插件无法加密TOC，所以需要改主题文件：

hexo/themes/livemylife/layout/_partial/catalog.ejs

原文件内容：生成目录

<!-- Table of Contents -->
<% if (page.catalog) { %>
    <% if (is_post()){ %>
      <aside id="sidebar">
        <div id="toc" class="toc-article">
        <strong class="toc-title"><%= __('Contents') %></strong>
        <% if (toc(page.content) != ""){ %>
          <%- toc(page.content, { "class": "toc-nav" }) %>
        <% } else { %>
          <ol class="nav"><%= __('none') %></ol>
        <% } %>
        </div>
      </aside>
    <% } %>
<% } %>

修改为：

<!-- Table of Contents -->
<% if (page.catalog) { %>
    <% if (is_post()){ %>
      <aside id="sidebar">
        <!--如果想要加密文章不显示目录，则将下面一句取消注释，将下下句加上注释-->
        <!--div id="toc" class="toc-article" <% if (page.encrypt == true) { %> style="display:none" <% } %>-->
        <div id="toc" class="toc-article">
        <!--下一句是目录标题-->
        <strong class="toc-title"><%= __('Contents') %></strong>
        <!--如果文章加密，用page.origin生成目录-->
        <% if (page.encrypt == true) { %>
          <% if (toc(page.origin) != ""){ %>
            <%- toc(page.origin, { "class": "toc-nav" }) %>
          <% } else { %>
            <ol class="nav"><%= __('none') %></ol>
          <% } %>
        <% } else { %>
          <% if (toc(page.content) != ""){ %>
            <%- toc(page.content, { "class": "toc-nav" }) %>
          <% } else { %>
            <ol class="nav"><%= __('none') %></ol>
          <% } %>
        <% } %>
        </div>
      </aside>
    <% } %>
<% } %>

添加鼠标特效

将特效js放于：hexo/themes/livemylife/source/js中

特效文件，举个例子：

onload = function() {
 var click_cnt = 0;
 var $html = document.getElementsByTagName("html")[0];
 var $body = document.getElementsByTagName("body")[0];
 $html.onclick = function(e) {
 var $elem = document.createElement("b");
 $elem.style.color = "#E94F06";
 $elem.style.zIndex = 9999;
 $elem.style.position = "absolute";
 $elem.style.select = "none";
 var x = e.pageX;
 var y = e.pageY;
 $elem.style.left = (x - 10) + "px";
 $elem.style.top = (y - 20) + "px";
 clearInterval(anim);
 switch (++click_cnt) {
  case 10:
  $elem.innerText = "OωO";
  break;
  case 20:
  $elem.innerText = "(๑•́ ∀ •̀๑)";
  break;
  case 30:
  $elem.innerText = "(๑•́ ₃ •̀๑)";
  break;
  case 40:
  $elem.innerText = "(๑•̀_•́๑)";
  break;
  case 50:
  $elem.innerText = "（￣へ￣）";
  break;
  case 60:
  $elem.innerText = "(╯°口°)╯(┴—┴";
  break;
  case 70:
  $elem.innerText = "૮( ᵒ̌皿ᵒ̌ )ა";
  break;
  case 80:
  $elem.innerText = "╮(｡>口<｡)╭";
  break;
  case 90:
  $elem.innerText = "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃";
  break;
  case 100:
  case 101:
  case 102:
  case 103:
  case 104:
  case 105:
  $elem.innerText = "(ꐦ°᷄д°᷅)";
  break;
  default:
  $elem.innerText = "❤";
  break;
 }
 $elem.style.fontSize = Math.random() * 10 + 8 + "px";
 var increase = 0;
 var anim;
 setTimeout(function() {
  anim = setInterval(function() {
  if (++increase == 150) {
   clearInterval(anim);
   $body.removeChild($elem);
  }
  $elem.style.top = y - 20 - increase + "px";
  $elem.style.opacity = (150 - increase) / 120;
  }, 8);
 }, 70);
 $body.appendChild($elem);
 };
};

js来源：https://github.com/djzhao627/JSClickBubble

编辑hexo/themes/livemylife/layout/layout.ejs文件的Footer中添加：

<!--这里是自定义的代码-->
    <% if(config['mouse_clicked']) { %>
      <script type="text/javascript" src="/js/on_mouse_clicked/<%= config.mouse_clicked.effect %>.js"></script>
    <% } %>

配置文件添加：

1
2
3

# 鼠标特效
mouse_clicked:
  effect: emotions

添加ISSO评论系统

hexo/themes/livemylife/layout/_partial/comment.ejs

添加：

<!--ISSO-->
<% if(config['isso']){ %>
<!-- 4.isso安装代码 -->
<script data-isso="<%= config.isso.data_url %>"
        data-isso-css:="<%= config.isso.data_isso_css %>"
        data-isso-lang="<%= config.isso.data_isso_lang %>"
        data-isso-reply-to-self="<%= config.isso.data_isso_reply_to_self %>"
        data-isso-require-author="<%= config.isso.data_isso_require_author %>"
        data-isso-require-email="<%= config.isso.data_isso_require_email %>"
        data-isso-max-comments-top="<%= config.isso.data_isso_max_comments_top %>"
        data-isso-max-comments-nested="<%= config.isso.data_isso_max_comments_nested %>"
        data-isso-reveal-on-click="<%= config.isso.data_isso_reveal_on_click %>"
        data-isso-avatar="<%= config.isso.data_isso_avatar %>"
        data-isso-avatar-bg=<%= config.isso.data_isso_avatar_bg %>
        data-isso-avatar-fg=<%= config.isso.data_isso_avatar_fg %>
        data-isso-vote="<%= config.isso.data_isso_vote %>"
        data-vote-levels="<%= config.isso.data_vote_levels %>"
        src="<%= config.isso.src_url %>" ></script>
<section id="isso-thread"></section>
<!-- ISSO安装代码已完成 -->
<% } %>

主配置文件：

# isso
isso:
  data_url: "https://isso/"  # Isso 安装的 URI
  data_isso_css: true # 使用默认的 CSS 如果需要自己改 CSS 则设置成 false
  data_isso_lang: "en" # 默认语言，参考 ISO 639-1 编码，可选语言列表在https://github.com/posativ/isso/tree/master/isso/js/app/i18n
  data_isso_reply_to_self: true  # data-isso-reply-to-self，data-isso-require-author，data-isso-require-email 需按照 Isso 配置文件来，请保持一致
  data_isso_require_author: true
  data_isso_require_email: true
  data_isso_max_comments_top: 10 # 一页显示的评论数
  data_isso_max_comments_nested: 20 # 最多嵌套评论数
  data_isso_reveal_on_click: 20 # 超出评论数后点击显示的评论数
  data_isso_avatar: true # 显示头像
  data_isso_avatar_bg: '#f0f0f0' # 头像背景
  data_isso_avatar_fg: '#9abf88 #5698c4 #e279a3 #9163b6 ...' # 头像颜色
  data_isso_vote: true # 开启评论的支持和反对
  data_vote_levels: 0,25,50,75,100 # 评论支持和反对的等级算法，具体请参考官方的文档
  src_url: "https://isso/js/embed.min.js"

添加Livere和Gitalk`Proxy`参数

为什么从Gitalk转为Livere？

2021年初，突然发现Gitalk挂了，一直403，直到后来，看了Issue找到了答案，解决办法有，我也试过，可以用，但想到身边有Github的人好像不是很多，Gitalk评论需要登录Github，于是就转为韩国的Livere（来必力）评论系统了。

事情原由：

解决之道

hexo/themes/livemylife/layout/_partial/comment.ejs

<!--这里添加--Livere-->
<% if(config['livere']){ %>
<!-- 0.来必力City版安装代码 -->
<div id="lv-container" data-id="<%= config.livere.data_id %>" data-uid="<%= config.livere.data_uid %>">
  <script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];
       if (typeof LivereTower === 'function') { return; }
       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;
       e.parentNode.insertBefore(j, e);
   })(document, 'script');
  </script>
<noscript> 为正常使用Livere评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->
<% } %>
...
## Gitalk添加Proxy只需要添加一行：
proxy: '<%= config.gitalk.proxy %>',
即可。

_config.yml中如果要启用Livere，需要：

# Comment Settings
#来必力City版安装代码
livere:
  data_id: "你的id"
  data_uid: "你的uid"

Hexo主题开发

文章推荐：

https://www.cnblogs.com/yyhh/p/11058985.html

源代码备份 - Back Up Src

网页部署好了，源代码要备份在hexo-src分支，方便以后的迁移工作。

首先，新建忽略列表：
- vi ./hexo/.gitignore(放在hexo目录)
  1
  2
  3
  4
  5
  6
  7
  .DS_Store
  Thumbs.db
  db.json
  *.log
  node_modules/
  public/
  .deploy*/
git add . -A
git commit -m "提交注释"
git push origin hexo-src

搞定。

数学公式

转载自Sooda的博客

安装渲染器

hexo默认的渲染器是marked，并不支持mathjax。kramed是在marked基础上修改的，支持了mathjax。你的hexo工程目录下的node_modules中可以找到对应的渲染器文件夹。同时在你的工程目录下用以下命令安装kramed。另外补充一个NexT配置中推荐的渲染器hexo-renderer-pandoc，功能很强大不仅可以渲染markdown，还支持textile、reStructedText等许多其他格式。具体参见官方教程

1 2	npm uninstall hexo-renderer-marked --save cnpm install hexo-renderer-kramed --save

如果你安装了hexo-math包，卸载再安装hexo-renderer-mathjax包(用npm，不要用cnpm)

1 2	npm uninstall hexo-math --save npm install hexo-renderer-mathjax --save

更新mathjax的CDN链接，打开node_modules/hexo-renderer-mathjax/mathjax.html（这一步我没有，我没使用CDN）

但是，我把http改成https了：

1	<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

修改标签

1
2
3

vi node_modules/hexo-renderer-mathjax/mathjax.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

开启mathjax

打开主题的_config.yml文件，找到math字段，新版的NexT主题支持两个数学渲染引擎mathjax和katex，这里我们使用mathjax

math:
  enable: true
  // 省略很多注释
  engine: mathjax

文章中开启mathjax标签

为加快渲染速度，渲染器只会在标签中有mathjax: true的文章中使用利用mathjax渲染。例：

title: hexo支持mathjax
date: 2018-08-31 08:33:08
tags: [Web,hexo,mathjax]
mathjax: true // 开启后才会渲染数学公式

评论系统指南

如何选择请参考：

第三方评论系统之我见
静态博客评论系统的比较及选择
Talkyard——注意服务器资源占用
- https://github.com/debiki/talkyard-prod-one
- https://github.com/debiki/talkyard
Utteranc——注意Github API访问速度。
- https://utteranc.es/
Beaudar——中文版utteranc
- https://github.com/beaudar/beaudar
ISSO:https://posativ.org/isso/
- ISSO在线托管：https://open.saintic.com/openservice/isso
- 教学：https://ld246.com/article/1541493992633
- 教学：https://sb.sb/blog/debian-ubuntu-install-isso/
Livere:https://www.livere.com/——第三方

关于Hexo部分报错解决办法

官方文档 -> https://hexo.io/docs/troubleshooting.html

关于主题：

敏感标签

FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Nunjucks Error:  [Line 242, Column 31] expected variable end
    =====               Context Dump               =====
    === (line number probably different from source) ===
  237 | <p>()、[]和|表示自己，{}表示{}。当要显示大号的括号或分隔符时，要用\left和\right命令。</p>
  238 | <p>例子：</p>
  239 | <script type="math/tex; mode=display">f(x,y,z) = 3y^2z \left( 3+\frac{7x+5}{1+y^2} \right)</script><p>显示：</p>
  240 | <script type="math/tex; mode=display">
  241 | f(x,y,z) = 3y^2z \left( 3+\frac{7x+5}{1+y^2} \right)</script><p>有时候要用\left.或\right.进行匹配而不显示本身。</p>
  242 | <p>例子：<code>\left. \frac{{\rm d}u}{{\rm d}x} \right| _{x=0}</code></p>
  243 | <p>显示：</p>
  244 | <script type="math/tex; mode=display">
  245 | \left. \frac{{\rm d}u}{{\rm d}x} \right| _{x=0}</script><blockquote>
  246 | <p><strong>如何输入分数</strong></p>
  247 | </blockquote>
    =====             Context Dump Ends            =====
    at formatNunjucksError (hexo/node_modules/hexo/lib/extend/tag.js:99:13)
    at Promise.fromCallback.catch.err (hexo/node_modules/hexo/lib/extend/tag.js:121:34)
    at tryCatcher (hexo/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (hexo/node_modules/bluebird/js/release/promise.js:547:31)
    at Promise._settlePromise (hexo/node_modules/bluebird/js/release/promise.js:604:18)
    at Promise._settlePromise0 (hexo/node_modules/bluebird/js/release/promise.js:649:10)
    at Promise._settlePromises (hexo/node_modules/bluebird/js/release/promise.js:725:18)
    at _drainQueueStep (hexo/node_modules/bluebird/js/release/async.js:93:12)
    at _drainQueue (hexo/node_modules/bluebird/js/release/async.js:86:9)
    at Async._drainQueues (hexo/node_modules/bluebird/js/release/async.js:102:5)
    at Immediate.Async.drainQueues [as _onImmediate] (hexo/node_modules/bluebird/js/release/async.js:15:14)
    at runCallback (timers.js:705:18)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)

用{ { } }或{ ％％ }包装的内容将被解析，并可能导致问题。您可以使用原始标签插件包装敏感内容。

比如：

{% raw %}

这里是敏感内容 有{ { } } { { % % } } 

{% endraw %}

升级依赖包

更新有风险，升级需谨慎。

npm-check-updates

安装：sudo npm install -g npm-check-updates

使用：npm-check-updates 或者ncu

升级依赖包： ncu -u && npm install

一键升级： ncu -a

npm-check

选择性升级：npm-check -u

依次选择对应的依赖就行了。

文章推荐

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

我使用Gitte + Hexo建立此博客的过程 ....

概况 - Pre

上手 - Get Start

搭建环境 - Set Up Environment

新建码云仓库 - New Gitee Repository

本地工作区搭建 - Local Workplace

Gitee Page

我的配置 - My Blog

主题搭建 - Hexo Theme

主配置文件 - _config.yaml

博文加密——闹着玩

添加鼠标特效

添加ISSO评论系统

添加Livere和Gitalk`Proxy`参数

Hexo主题开发

源代码备份 - Back Up Src

数学公式

安装渲染器

开启mathjax

文章中开启mathjax标签

评论系统指南

关于Hexo部分报错解决办法

敏感标签

升级依赖包

npm-check-updates

npm-check

文章推荐

FEATURED TAGS

FRIENDS

概况 - Pre

上手 - Get Start

搭建环境 - Set Up Environment

新建码云仓库 - New Gitee Repository

本地工作区搭建 - Local Workplace

Gitee Page

我的配置 - My Blog

主题搭建 - Hexo Theme

主配置文件 - _config.yaml

博文加密——闹着玩

添加鼠标特效

添加ISSO评论系统

添加Livere和GitalkProxy参数

Hexo主题开发

源代码备份 - Back Up Src

数学公式

安装渲染器

开启mathjax

文章中开启mathjax标签

评论系统指南

关于Hexo部分报错解决办法

敏感标签

升级依赖包

npm-check-updates

npm-check

文章推荐

FEATURED TAGS

FRIENDS

添加Livere和Gitalk`Proxy`参数