Hexo Usage and Theme Beautify

Blog

Learn

Publish Date: 2019-03-29

Hexo 搭建

Hexo 是一个基于 Node.js 的静态站点生成框架，快速、简洁且高效。Hexo 使用 Markdown 解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装Git

首先需要在系统中安装git并进行基本配置

sudo apt install git
git config --global user.name "username"
git config --global user.email "youremail"
git clone repo_url

安装Node.js 和 nvm

sudo apt install nodejs
# nodejs的管理工具
sudo apt install npm

安装Hexo 及初始化

npm install hexo -g
hexo init myblog
cd myblog
npm install
hexo server

如果报错执行代码,不报错忽略

sudo npm config set user 0
sudo npm config set unsafe-perm true
sudo npm install -g hexo-cli

访问http://localhost:4000，会看到生成好的博客。

github 配置

注册一个github账户，成为(re)poer。
打开个人的profile，点击右上角的+，new一个repository（新建一个仓库），注意，要将你的repository name设置为[username.github.io]，这一步很重要。然后其它的不用管，直接create repository。
配置ssh keys，在settings中打开SSH and GPG keys，new一个ssh key。在下面的输入框中填写的你本机的ssh公钥，使用ssh-keygen -t rsa -C “youremail”，在你的用户目录下找到.ssh目录中的id_rsa.pub的内容，也就是你本机ssh公钥，然后点击添加。可以使用cat id_rsa.pub查看其中的内容。
验证：ssh -T git@github.com，看到successfully就说明配置完成了。
修改Hexo部分默认配置

cd /opt/blog
vim _config.yml

#启动Git部署，位于Deployment部分
deploy:
    type: git
    repo: git@github.com:BoView/BoView.github.io.git #换成自己的用户名和仓库名
    branch: master

Hexo 常用指令

新建博客项目，默认为指定的folder文件夹;

hexo init [folder]

新建文章，总共有post、draft、page三种layout，文章以你指定的title名创建，title中如果有空格请使用“”括起来;

hexo new [layout] "title"

生成静态文件，下面的代码为简写，可以添加-w参数监视文件的变动;

hexo generate
hexo g

启动本地服务器，可以添加参数-p指定服务器的端口，默认在端口4000

hexo server
hexo s

博客项目部署

hexo deploy
hexo d

一键静态文件生成与部署

hexo g -d
hexo d -g

清楚缓存和生成的静态文件，对应于db.json和public目录下的文件

hexo clean
hexo cl

列出博客文件树

hexo list route

绑定域名（阿里云上申请的域名，解析到服务器）

添加三条解析：
前两条选择A记录类型，主机记录设置为@，线路选择默认，TTL选择600，记录值分别为192.30.252.153、192.30.252.154；
后一条选择CNAME记录类型，主机记录设置为www，线路选择默认，TTL选择600，记录值为github的仓库名boview.github.io。

在hexo里配置CNAME

vim /opt/blog/source/CNAME

www.sunlinbo.com

注：这里加上www，那么浏览器里就只有加上www才能够访问;这里不加www，那么浏览器里加不加上www都能够访问。

Hexo 的Next主题美化

主题安装及基本配置：

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

安装完成后，打开站点配置文件,找到 theme 字段，并将其值更改为 next，保存并依次执行git clean，git g,git s 然后查看运行结果。

nexT主题有四种选择，上面这个只是最简洁的一种，我选择的是Muse布局

顶部图片设置
设置头像及旋转
找一张你喜欢的头像图片放入 myblog/themes/next/source/images 目录中，例如我这里放了一张logo.jpg。然后打开 myblog/themes/next/_config.yml 主题配置文件。找到关键字 avatar, 在后面加入 logo.jpg 的路径地址（注意：是想相对路径）。

在~/hexo/themes/next/source/css/_custom文件夹下的costom.styl文件内添加以下代码：

// 侧栏头像圆形及旋转效果
.site-author-image {
    border: 0px solid rgb(255, 255, 255);
    border-radius: 100%;
    transition: transform 1.0s ease-out;
}
img:hover {
    transform: rotateZ(360deg);
}
.posts-expand .post-body img:hover {
    transform: initial;
}

设置网站的图标Favicon

下载一个32 * 32的图片，并改名为favicon.ico, 然后放到/blog/themes/next/source/images目录

修改主题配置文件

    favicon:
    　small: /images/favicon-16x16-next.png
    　medium: /images/favicon.ico
    　apple_touch_icon: /images/apple-touch-icon-next.png
    　safari_pinned_tab: /images/logo.svg

文章加密访问

在　/blog/themes/next/layout/_partials/head/head.swig 文件中添加：

  <script> 
   (function(){
          if('{{ page.password }}'){
              if (prompt('请输入文章密码') !== '{{ page.password }}'){
                  alert('密码错误！');
                  history.back();
              }
          }
      })();
  </script>

在需要加密的文章的页面顶部(Front matter区域)加入 “password : 设置密码值”

修改文章底部的那个带#号的标签
修改模板 /themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成
隐藏网页底部powered By Hexo / 强力驱动
打开themes/next/layout/_partials/footer.swig,使用””隐藏之间的代码即可，或者直接删除。
侧边栏社交链接

修改主题配置文件: 链接放置在 social 字段下，一行一个链接。其键值格式是显示文本: 链接地址


  #设置侧边栏社交链
  social:
    GitHub: https://github.com/zzwwqq || github
    E-Mail: mailto:zwq13264860490@gmail.com || envelope
    Weibo: https://weibo.com/u/5564810309/home?wvr=5 || weibo
    知乎: https://www.zhihu.com/people/shen-qiu-wu-hen-66/activities || snapchat
  
  #这里键的值必须和上面social中的 "||" 后面指定的名称一致，在fontawesome官网找喜欢的小图标，将名字复制在如下位置，如E-Mail:对应的图标名称为envelope。
  
  social_icons:
    enable: true    # `enable` 选项用于控制是否显示图标
    icons_only: false
    transition: false 
    #图标
    GitHub: github
    E-Mail: envelope
    Weibo: weibo
    知乎: snapchat

封面模式

需要安装一个小插件是：hexo-less，安装指令: $ npm install –save hexo-less

该插件解决了什么问题呢？

手动设置文章概要，但不影响章内䆟。只需在文章中写作为分割线，上面的内容会作为摘要，但不作为文章内容的一部分。

菜单栏添加菜单选项
next默认菜单栏只有home和archives菜单，你可以添加更多的菜单，比如这里我们添加tags和categories。只需打开myblog/themes/next/_config.yml主题配置文件，搜索关键字Menu Settings找到如下图代码块，然后将tags和categories选项前的注释符号#去掉就能启用这两个菜单。
头像设置为圆形
打开站点下的 myblog/themes/next/source/css/_common/components/sidebar/sidebar-author.styl文件 ,在.site-author-image选择器的末尾（右括号前）添加

border-radius: 50%;
transition: 2s all;

在.site-author-image选择器右括号后另起一行,加入以下代码：

.site-author-image:hover{
  transform: rotate(360deg);
}

或者你可以看下面的代码会更加直观。

原来的：

   .site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
}

修改后：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  opacity: hexo-config('avatar.opacity') is a 'unit' ? hexo-config('avatar.opacity') : 1;

  border-radius: 50%;
  transition: 2s all;
}
.site-author-image:hover{
  transform: rotate(360deg);
}

添加动态背景
打开myblog/themes/next/_config.yml主题配置文件，搜索关键字canvas找到如下位置：

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: false

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

看你喜欢哪种动态背景风格，分别有canvas_nest、three_waves、canvas_lines、canvas_sphere四种，选择一种然后将冒号后面的false改成true。这里我选择的是第一种canvas_nest，改成如下：

#Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: true

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

增加搜索功能

需要安装 hexo-generator-searchdb插件来实现这个功能，在站点的根目录下执行以下命令：

npm install hexo-generator-searchdb --save

编辑myblog/_config.yml全局配置文件，新增以下内容到任意位置：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

打开myblog/themes/next/_config.yml主题配置文件，搜索关键字local_search找到如下代码，enable默认是false，将enable设置为true，如下：

local_search:
  enable: true

实现字数统计和阅读时长的功能
需要安装hexo-wordcount这个插件来实现这个功能，在站点根目录下打开git bash，输入：

npm install hexo-wordcount --save

打开myblog/themes/next/_config.yml主题配置文件，搜索关键字post_wordcount。
将其配置修改成以下代码：

post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: false
  separated_meta: true

添加emoji
添加404
添加评论系统
添加看板娘

安装

npm install --save hexo-helper-live2d

在站点的 _config.yml 下配置

live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-miku
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

复制代码其中，live2d.model.use使用来配置对应的萌宠模型，我这边是live2d-widget-model-miku

插入音乐和视频
添加pdf
字数统计和阅读时长
鼠标点击特效
打字特效
代码块一键复制
个性化回到顶部
文章阅读统计及热度
设置阅读全文显示摘要图片

摘要配图，文章也有
在文章中使用手动进行截断

<div id="zhaiyao" style="width: 735px;height: 372px;">
<img src="image.jpg" style="width: 100%;height: 100%" alt="wechat_jump_game" align=center />
</div>
摘要内容
<!-- more -->

摘要配图，文章没有
在custom.styl(hexo/themes/next/source/css/_custom/custom.styl)里设计一个专有容器

//图片外部的容器方框 
.out-img-topic {
  display: block;
  max-height:300px;
  margin-bottom: 24px;
  overflow: hidden;
}
//图片
img.img-topic {
  display: block ;
  margin-left: .7em;
  margin-right: .7em;
  padding: 0;
  float: right;
  clear: right;
}

这里图片外部的容器用来限制图片显示的大小，最大的高度为300px，overflow: hidden;让多余部分隐藏。margin-bottom: 24px;确保图片和文章摘要部分空出一定空间。

修改/themes/next/layout/ _macro/post.swig，在if is_index与if post.description and theme.excerpt_description
之间添加以下代码:

{% if post.images %}
    <div class="out-img-topic">
        <img src="{{" post.images="" &#125;&#125;="" class="img-topic">
    </div>
{% endif %}

在front-matter中加一个images字段

images: "/images/摘要配图/"

主页文章添加边框阴影效果
打开 themes/next/source/css/_custom/ 下的 custom.styl，向里面加代码：

.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

添加背景图片
修改themes\next\source\css\ _custom\custom.styl文件，这个是Next故意留给用户自己个性化定制一些样式的文件，添加以下代码：

body {
    background:url(https://source.unsplash.com/random/1600x900);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

如果按照上一步添加完图片之后，发现出现了另外一个大问题，整个博客背景都是透明的，只能看见图片，看不清文章文字，这样绝对不行的，办法如下，照例在上面的文件下面继续追加如下代码：

.main-inner {
    margin-top: 60px;
    padding: 60px 60px 60px 60px;
    background: #fff;
    min-height: 500px;
}

Jun Wang

http://www.drjun.wang/2019/03/29/20190329-hexo-usage/

All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source Jun Wang !

Blog

Latex Presentation Notes

This article illustrates the usage of LaTeX.

2019-05-06 Learn

Latex

Markdown Template

This article illustrates the usage youdao markdown.

2019-03-26 Learn

Personal Blog

Hexo Usage and Theme Beautify

Hexo 搭建

安装Git

安装Node.js 和 nvm

安装Hexo 及初始化

github 配置

Hexo 常用指令

绑定域名（阿里云上申请的域名，解析到服务器）

Hexo 的Next主题美化

主题安装及基本配置：

Thanks for your donation!