Setup hexo blog

First Post:

Last Update:

Word Count:
8.8k

Read Time:
37 min

Setup hexo blog

needs

git , nodejs, node, hexo, npm

前提准备：

linux下搭建hexo环境

1.node.js安装

从官网下载linux版本的node.js 或者直接采用wget方式下载
官网地址：http://nodejs.cn/download/

1
$ wget下载：wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz

解压：

1
$ tar xf node-v10.9.0-linux-x64.tar.xz

测试是否正确：

1
2
$ cd node-v10.9.0-linux-x64/
$ ./bin/node -v   // 如果出现版本号，说明安装成功

移动位置

1
2
3
$ cd ..
$ mv node-v10.9.0-linux-x64 nodejs # 修改node-v10.9.0-linux-x64文件夹名字为nodejs
$ mv nodejs /usr/share

设置软连接

1
2
$ sudo ln -s /usr/share/nodejs/bin/node /usr/local/bin/node
$ sudo ln -s /usr/share/nodejs/bin/npm /usr/local/bin/npm

设置npm加速

创建一个存放博客的文件夹，进入文件夹，右键选择 Git Bash Here，然后设置npm的镜像源为淘宝镜像源，这样能加快下载插件速度

1
2
$ npm config set registry https://registry.npm.taobao.org # 淘宝源
$ npm config set registry https://registry.npmjs.org/ # 官方源

安装hexo

1
$ sudo npm install hexo-cli -g

把hexo命令添加到全局,方式是采用软连接：

1
$ sudo ln -s /usr/share/nodejs/lib/node_modules/hexo-cli/bin/hexo /usr/local/bin/hexo

部署hexo博客环境

1
2
3
mkdir blog
cd blog    
hexo init //会自动把资源文件下载好

Hexo初始化后 ，有以下几个文件/文件夹。

  • scaffolds：生成文章的一些模板
  • source：用来存放你的文章
  • themes：主题
  • .gitignore Git忽略文件夹
  • _config.yml: 博客的配置文件
  • package.json 所需模块
  • node_modules: 依赖包
  • package-lock.json 记录了模块下载地址

安装依赖插件

1
npm install

测试运行

1
2
$ hexo generate      #或者简写hexo g
$ hexo server #hexo s
       输入 localhost:4000/
     如果是服务器，我的是阿里云服务器，需要配置安全组打开4000端口，这样就可以在本地访问
     或者linux虚拟机，需要测试内外能否正常通信
     输入ip:4000/ 即可访问hexo的初始页面


1
$ hexo clean && hexo g && hexo s

打开浏览器127.0.0.1:4000，就可以本地预览效果

hexo clean (清除缓存文件,可简写hexo cl)

hexo generate (生成网页,可简写hexo g)

hexo server (本地预览,可简写hexo s)

hexo deploy (部署到GitHub,可简写hexo d)

打开浏览器127.0.0.1:4000，就可以本地预览效果

部署到github中

需要 注意的是，仓库名有要求,要创建一个和你用户名相同的仓库，后面加github.io，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是[http://xxxx.github.io，其中xxx就是你注册gitHub的用户名。例如我的gitHub id为axh2018，那么我的仓库名必须为i0gan.github.io

配置Git账户和邮箱

在你的博客文件夹下右键Git Bash Here

1
2
$ git config --global user.name "I0gan" 
$ git config --global user.email "l418894113@gmail.com"

生成ssh密钥

1
$ ssh-keygen -t rsa -C "l418894113@gmail.com"

密钥上传到Github

1
$ cat ~/.ssh/id_rsa.pub

登录GitHub网站点右上角Settings->SSH and GPG Keys,新建一个key,将上面的结果复制填进去就好了

测试是否成功

下面的指令的输出能看到你Github账户名字就行了

1
$ ssh -T git@github.com

克隆项目

1
2
 git clone git@github.com:i0gan/hexo_blog.git   .    #克隆项目
$ npm i                                                #安装依赖插件和框架

部署到Github,修改你博客文件夹根目录下的_config.yaml文件的倒数第二行,repository的地址改成你的GitHub博客仓库地址

例如：

1
2
3
4
deploy:
type: git
repository: https://github.com/i0gan/i0gan.github.io
branch: master

到这基本就完成了，剩下你所需要的工作就是把配置文件(根目录下的_config.yaml和主题文件夹下的_config_yaml)的相关信息改为你自己的信息即可。

上传至github中

此时，大部分工作已经做完了，接下来就是将hexo g生成的静态页面上传到GitHub上

安装deploy-git 插件

1
$ npm install hexo-deployer-git --save

修改_config.yaml文件最后几行

1
2
3
4
deploy:
  type: git
  repository: https://github.com/i0gan/i0gan.github.io
  branch: master
1
2
3
$ hexo clean        #删除原来生成的pubic文件夹
$ hexo g            #生成新的页面
$ hexo d            #部署到GitHub

部署成功后可以通过 https://i0gan.github.io访问

创建文章

新建一篇文章时：

1
$ hexo new XXX

它其实默认使用的是post这个布局，也就是在source文件夹下的_post里面。

Hexo有三种默认布局：post、page和draft，它们分别对应不同的路径，而您自定义的其他布局和post相同，都将储存到source/_posts文件夹。

而new这个命令其实是：

1
$ hexo new [layout] <title>

只不过这个layout默认是post

如果你想另起一页，那么可以使用

1
$ hexo new page newpage

系统会自动给你在source文件夹下创建一个newpage文件夹，以及newpage文件夹中的index.md，这样你访问的newpage对应的链接就是http://i0gan.github.io/newpage

draft是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以

1
$ hexo new draft newdraft

这样会在source/_draft中新建一个newdraft.md文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用

1
$ hexo server --draft

在本地端口中开启服务预览。

如果你的草稿文件写完了，想要发表到post中，

1
$ hexo publish draft newdraft

就会自动把newdraft.md发送到post中。

跟换主题

进入博客根目录下

1
$ git clone -b develop https://github.com/blinkfox/hexo-theme-matery themes/matery

此时主题文件夹下会多出一个matery主题。

然后再更改根目录下的_config.yml配置文件。找到themes:，将他的值改为matery。

此时你可以hexo clean && hexo g && hexo s

本地预览matery主题的效果

关于matery主题：

特性：

  • 简单漂亮，文章内容美观易读
  • Material Design 设计
  • 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
  • 首页轮播文章及每天动态切换 Banner 图片
  • 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替）
  • 时间轴式的归档页
  • 词云的标签页和雷达图的分类页
  • 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）
  • 可自定义的数据的友情链接页面
  • 支持文章置顶和文章打赏
  • 支持 MathJax
  • TOC 目录
  • 可设置复制文章内容时追加版权信息
  • 可设置阅读文章时做密码验证
  • Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk）
  • 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能
  • 支持在首页的音乐播放和视频播放功能
  • 支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。
  • 支持 DaoVoice、Tidio 在线聊天功能。

Laylout

新建分类categories

categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：

1
$ hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：

1
2
3
4
5
6
---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

新建标签 tags 页

tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：

1
$ hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

1
2
3
4
5
6
---
title: tags
date: 2020-04-04 18:23:38
type: "tags"
layout: "tags"
---

新建about关于我页

about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：

1
$ hexo new page "about"

编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：

1
2
3
4
5
6
---
title: about
date: 2020-04-04 18:23:38
type: "about"
layout: "about"
---

新建留言板contact页

contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：

1
$ hexo new page "contact"

编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容：

1
2
3
4
5
6
---
title: contact
date: 2020-04-04 18:23:38
type: "contact"
layout: "contact"
---

注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的 _config.yml 文件中，第 19 至 21 行的“菜单”配置，取消关于留言板的注释即可

新建友情链接friends页

friends 页是用来展示友情连接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：

1
$ hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

1
2
3
4
5
6
---
title: friends
date: 2020-04-04 18:23:38
type: "friends"
layout: "friends"
---

同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "1FONLY",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "https://hack-for.fun",
    "title": "查看大佬"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "V1cuna",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "http://hackyangtuo.top/",
    "title": "查看大佬"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "cT_Hc",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "https://blog.csdn.net/qq_35289660",
    "title": "查看大佬"
}]

菜单导航配置

  • 配置基本菜单导航的名称、路径url和图标icon.

菜单导航名称可以是中文也可以是英文(如：Index或主页) 2.图标icon 可以在[Font Awesome] 中查找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Friends:
    url: /friends
    icon: fas fa-address-book
  • 二级菜单配置方法

如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
1.在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)
2.在children下创建二级菜单的 名称name,路径url和图标icon.
3.注意每个二级菜单模块前要加 -.
4.注意缩进格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle-o
  Friends:
    url: /friends
    icon: fas fa-address-book
  Medias:
    icon: fas fa-list
    children:
      - name: Musics
        url: /musics
        icon: fas fa-music
      - name: Movies
        url: /movies
        icon: fas fa-film
      - name: Books
        url: /books
        icon: fas fa-book
      - name: Galleries
        url: /galleries
        icon: fas fa-image

执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用emoji语法写的表情了

代码高亮

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 [hexo-prism-plugin]的 Hexo 插件来做代码高亮，安装命令如下：

1
$ npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

1
2
3
4
5
6
7
8
highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

搜索

本主题中还使用到了 [hexo-generator-search] 的 Hexo 插件来做内容搜索，安装命令如下：

1
$ npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

1
2
3
search:
  path: search.xml
  field: post

中文链接转拼音

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 [hexo-permalink-pinyin]Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下：

1
$ npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

1
2
3
permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

注：除了此插件外，[hexo-abbrlink] 插件也可以生成非中文的链接

文章字数统计插件

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 [hexo-wordcount]插件

安装命令如下：

1
$ npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可：

1
2
3
4
5
6
7
postInfo:
  date: true
  update: false
  wordCount: true # 设置文章字数统计为 true.
  totalCount: true # 设置站点文章总字数统计为 true.
  min2read: true # 阅读时长.
  readCount: true # 阅读次数.

添加emoji表情支持

本主题新增了对emoji表情的支持，使用到了 [hexo-filter-github-emojis]的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：

1
$ npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

1
2
3
4
5
6
githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

添加 RSS 订阅支持

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

1
$ npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

1
2
3
4
5
6
7
8
9
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了

添加 DaoVoice 在线聊天功能

前往 DaoVoice 官网注册并且获取 app_id，并将 app_id 填入主题的 _config.yml 文件中。

添加 Tidio 在线聊天功能

前往 Tidio 官网注册并且获取 Public Key，并将 Public Key 填入主题的 _config.yml 文件中。

修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

修改社交链接

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：

1
2
3
4
5
<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>
<% } %>

其中，社交图标（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考：

  • Facebook: fab fa-facebook
  • Twitter: fab fa-twitter
  • Google-plus: fab fa-google-plus
  • Linkedin: fab fa-linkedin
  • Tumblr: fab fa-tumblr
  • Medium: fab fa-medium
  • Slack: fab fa-slack
  • Sina Weibo: fab fa-weibo
  • Wechat: fab fa-weixin
  • QQ: fab fa-qq
  • Zhihu: fab fa-zhihu

注意: 本主题中使用的 Font Awesome 版本为 5.11.0

修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。

文章加密

主题 config.yml 配置文件中激活 verifyPassword.enable: true

在你所需要加密的文章中的 Front-Matter 中添加 password 属性，password的值为你的原密码经过 SHA256 加密后的值。访问文章就需要输入密码了，输入的为原密码。

配置音乐播放器

要支持音乐播放，在主题的 _config.yml 配置文件中激活music配置即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
music:
  enable: true
  title: 听听音乐 #非吸底模式有效
    enable: true
    show: 听听音乐
  server: netease   #require    music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    #require song, playlist, album, search, artist
  id: 503838841     #require    song id / playlist id / album id / search keyword
  fixed: false       # 开启吸底模式
  autoplay: false   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠

server可选网netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），

baidu（百度音乐）。

type可选song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）

id获取方法：网页打开例如网易云音乐，点击一个推荐的歌单，地址栏会有一个id，id即为这串数字。其中search的id为搜索的关键字

文章 Front-matter 介绍

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

配置选项 默认值 描述
title Markdown 的文件标题 文章标题，强烈建议填写此选项
date 文件创建时的日期时间 发布时间，强烈建议填写此选项，且最好保证全局唯一
author 根 _config.yml 中的 author 文章作者
img featureImages 中的某个值 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top true 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
cover false v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg 无 v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password 无 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc true 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax false 是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary 无 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories 无 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags 无 文章标签，一篇文章可以多个标签
keywords 文章标题 文章关键字，SEO 时需要
reprintPolicy cc_by 文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

注意:

  1. 如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。
  2. date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
  3. 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
  4. 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

以下为文章的 Front-matter 示例

最简示例

1
2
3
4
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---

最全示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分：

  • 菜单
  • 我的梦想
  • 首页的音乐播放器和视频播放器配置
  • 是否显示推荐文章名称和按钮配置
  • favicon 和 Logo
  • 个人信息
  • TOC 目录
  • 文章打赏信息
  • 复制文章内容时追加版权信息
  • MathJax
  • 文章字数统计、阅读时长
  • 点击页面的’爱心’效果
  • 我的项目
  • 我的技能
  • 我的相册
  • Gitalk、Gitment、Valine 和 disqus 评论配置
  • 不蒜子统计和谷歌分析（Google Analytics）
  • 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图

修改主题颜色

主题会有一层变换的颜色笼罩在背景图上，在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}

@keyframes rainbow {
    /* 动态切换背景颜色. */
}
/*如果不需要，可以将上面三个注释掉*/

如果不需要的话，直接将上面三个注释掉即可。

修改 banner 图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 `` 代码中：

1
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

如想每小时切换,将getDay()改为getHours()即可,但是需要增加图片的数量为24，且在_config.yml中做修改相应。

在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改

添加文章评论插件

主题自带gittalk,gitment,valine等评论插件，只需要去相应的官网注册，然后将相应的配置填入到主题的_config.yml中相应位置即可。

注：gitalk评论模块对文字表格有影响，并且经常加载不出来

优化

配置CDN

cdn加速，只需要将主题文件夹下的_config.yml最后遗一行配置即可。后面填https://cdn.jsdelivr.net/gh/加上你的github账户名和你的博客地址，例如我的：

1
2
I0gan:
  url: https://cdn.jsdelivr.net/gh/I0gan/I0gan.github.io

在根目录配置文件 _config.yml 末尾加入以下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#hexo-neat 优化提速插件（去掉HTML、css、js的blank字符）
neat_enable: true
neat_html:
  enable: true
  exclude:
    - '**/*.md'
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/**/instantpage.js'
    - '**/matery.js'

新建404页面

主题并没有404页面，所以我们来添加一个，source目录下新建一个404.md，内容：

1
2
3
4
5
title: 404
date: 2020-2-22 19:20:00
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面 :("

接着在/matery/layout/新建一个404.ejs文件，内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>
<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // 每天切换 banner 图. 
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>

文章生成永久链接

主题默认的文章链接配置

1
premalink: :year/:month/:day/:title

这种生成的链接地址很长，我们可以修改文章生成链接的格式。

首先再根目录下执行下面的命令：

1
$ npm install hexo-abbrlink --save

在博客文件夹根目录下_config.yml添加如下配置

1
2
3
4
abbrlink:
    alg: crc16   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex: dec 
                #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制

再将站点配置文件的permalink的值修改为：

1
permalink: posts/:abbrlink.html

生成文章的链接格式格式如下（官方样例）:

1
2
3
4
5
6
7
8
9
10
crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

生成完后，原md文件的Front-matter 内会增加abbrlink 字段，值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址

图片懒加载

懒加载一般是当图片滚动进可视窗口内才加载图片，可视窗口之外的图片则不加载

本主题图片进行懒加载，这样做效果就是 html、css、js 加载之后，图片再加载。既保证了网页的打开速度，也不会因图片的庞大体积而拖累了整个页面的加载。

先安装插件：

1
npm install hexo-lazyload-image --save

然后到博客根目录下_config.yml中加入以下字段：

1
2
3
4
5
# 懒加载
lazyload:
  enable: true # 是否开启图片懒加载
  onlypost: false # 是否只对文章的图片做懒加载
  loadingImg: /images/loading.gif

其中gif图的位置应该放在source/images/下

设置文字模板

Hexo的页面是包括一个md文件和ejs文件结合而成的，md文件中的内容是页面配置，基本信息，和显示的内容。而ejs文件就是js逻辑代码了。

我们在scaffolds/post.md中设置文章的默认模板，这样以后创建文章的时候，这些信息就默认添加上了，不同文章你也可以修改这些信息。上面Front-matter已经介绍过了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: {{ title }}
date: {{ date }}
author: 布莱恩特科比酱
img:
top:
cover:
coverImg:
password:
toc:
mathjax:
summary:
categories:
tags:
---

图片添加水印

为了防止别人抄袭你文章，直接用你文字的图片，可以把所有的图片都加上水印。在博客根目录下新建一个watermark.py，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# -*- coding: utf-8 -*-
import sys
import glob
from PIL import Image
from PIL import ImageDraw
from PIL import ImageFont

def watermark(post_name):
    if post_name == 'all':
        post_name = '*'
    dir_name = 'source/_posts/' + post_name + '/*'
    for files in glob.glob(dir_name):
        im = Image.open(files)
        if len(im.getbands()) < 3:
            im = im.convert('RGB')
            print(files)
        font = ImageFont.truetype('STSONG.TTF', max(30, int(im.size[1] / 20)))
        draw = ImageDraw.Draw(im)
        draw.text((im.size[0] / 2, im.size[1] / 2),
                  u'@hiyoung', fill=(0, 0, 0), font=font)
        im.save(files)

if __name__ == '__main__':
    if len(sys.argv) == 2:
        watermark(sys.argv[1])
    else:
        print('[usage] <input>')

字体也放根目录下，自己找字体。然后每次写完一篇文章可以运行python3 watermark.py postname添加水印，如果第一次运行要给所有文章添加水印，可以运行python3 watermark.py all

这个代码的逻辑就是从文章目录下拿到图片，添加水印。这个前提是要文章的图片放在source/_posts/下，所以如果在文章中直接引用了其他地方的图片链接，那么这个脚本不会去给那个图片加水印了

动态标签栏

在theme/matery/layout/layout.ejs下添加如下代码：

1
2
3
4
5
6
7
8
<script type= "text/javascript" >
    var OriginTitile=document.title,st;
    document.addEventListener("visibilitychange",function()
     {
        document.hidden?(document.title="ヽ(●-`Д´-)ノ你要玩捉迷藏嘛",clearTimeout(st)):(document.title="(Ő∀Ő3)ノ被发现啦！",st=setTimeout(function(){
            document.title=OriginTitile},3e3))
    })
</script>

修改导航栏颜色以及透明效果

themes/matery/source/css/matery.css文件中，有一个.bg-color属性，修改其属性值即可，代码如下：

1
2
3
4
5
6
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); 
    //修改成自己喜欢的颜色值
    opacity: 0.8;  
    //透明效果 值范围 0~1
}

外链跳转插件

跳转外链相关插件。自动为所有html文件中外链的a标签生成对应的属性。 比如 设置 target='_blank', rel='external nofollow noopener noreferrer' 告诉搜索引擎这是外部链接,不要将该链接计入权重。 同时自动生成外链跳转页面,默认在根目录下go.html;

安装插件：

1
$ npm install hexo-external-link --save

配置插件：

在Hexo根目录的_config.yml文件中添加如下配置。

1
2
3
4
5
6
7
8
9
hexo_external_link:
  enable: true
  enable_base64_encode: true
  url_param_name: 'u'
  html_file_name: 'go.html'
  target_blank: true
  link_rel: 'external nofollow noopener noreferrer'
  domain: 'your_domain' # 如果开启了防盗链
  safety_chain: true
  • enable - 是否开启hexo_external_link插件 - 默认 false
  • enable_base64_encode - 是否对跳转url使用base64编码 - 默认 fasle
  • url_param_name - url参数名,在跳转到外链传递给html_file_name的参数名 - 默认 ‘u’
  • html_file_name - 跳转到外链的页面文件路径 - 默认 ‘go.html’
  • target_blank - 是否为外链的a标签添加target='_blank' - 默认 true
  • link_rel - 设置外链的a标签的rel属性 - 默认 ‘external nofollow noopener noreferrer’
  • domain - 如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host
  • safety_chain - go.html 为了防止外链盗用 对域名进行的判断 - 默认 false

添加鼠标点击烟花爆炸效果

themes/matery/source/js目录下新建fireworks.js文件，打开将内容复制粘贴到fireworks.js。

然后在themes/matery/layout/layout.ejs文件内添加以下内容：

1
2
3
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/fireworks.js"></script>

添加樱花飘落效果

在themes/matery/source/js目录下新建sakura.js文件，打开
将内容复制粘贴到sakura.js。

然后在themes/matery/layout/layout.ejs文件内添加以下内容：

1
2
3
4
5
6
7
<script type="text/javascript">
//只在桌面版网页启用特效
var windowWidth = $(window).width();
if (windowWidth > 768) {
    document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
}
</script>

添加鼠标彩虹星星掉落跟随效果

在themes/matery/source/js目录下新建cursor.js文件，打开
将内容复制粘贴到cursor.js。

然后在themes/matery/layout/layout.ejs文件内添加以下内容：

1
<script src="/js/snow.js"></script>

添加雪花飘落效果

在themes/matery/source/js目录下新建cursor.js文件，打开https://github.com/axh2018/script/blob/master/snow.js
将内容复制粘贴到cursor.js。

然后在themes/matery/layout/layout.ejs文件内添加以下内容：

1
<script src="/js/snow.js"></script>

添加鼠标点击文字特效

主题文件下的/source/js/下新建click_show_text.js，以下代码添到js中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var a_idx = 0;
jQuery(document).ready(function ($) {
    $("body").click(function (e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
            y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FF0000"
        });
        $("body").append($i);
        $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            3000,
            function () {
                $i.remove();
            });
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

增加建站时间

只需将主题的_config.yml中的time设置为true即可：

1
2
3
4
5
6
7
8
9
10
# Website start time.
# 站点运行开始时间.
time:
  enable: trues
  year: 2019 # 年份
  month: 11 # 月份
  date: 30 # 日期
  hour: 17 # 小时
  minute: 30 # 分钟
  second: 00 # 秒

添加博客天气插件

去中国天气网https://cj.weather.com.cn/plugin/pc可以获取一段定制的天气代码，将这段代码添加到

/themes/matery/layout/layout.ejs即可，例如：

1
2
3
4
5
6
<!-- my_weather天气 -->
    <script type="text/javascript">
        WIDGET = {FID: 'QIqG0hDUBi'}
    </script>
    <script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111">
    </script>

添加live2d模型

安装插件：

1
npm install --save hexo-helper-live2d

安装模型：

1
npm install --save hexo-helper-live2d

配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
    enable: true
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    tagMode: false
    log: false
    model:
        use: live2d-widget-model-shizuku
    display:
        position: right
        width: 150
        height: 300
    mobile:
        show: false
    react:
        opacity: 0.7

其中模型你可以更改，想了解更多，请移步官网https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md

背景动态彩带

只需将matery/_config.yml中canvas_nest设置为true即可：

1
2
3
4
5
6
7
# 背景静止彩带.
ribbon:
  enable: true
  size: 150 # 彩带大小, 默认: 90.
  alpha: 0.6 # 彩带透明度 (0 ~ 1), 默认: 0.6.
  zIndex: -1 # 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1.
  clickChange: false  # 设置是否每次点击都更换彩带.

背景动态线条

只需将matery/_config.yml中ribbon_dynamic设置为true即可：

1
2
ribbon_dynamic:
  enable: true

注：加载这些样式非常耗资源

添加反爬虫协议

robots是网站跟爬虫间的协议，用简单直接的txt格式文本方式告诉对应的爬虫被允许的权限，也就是说robots.txt是搜索引擎中访问网站的时候要查看的第一个文件。当一个搜索蜘蛛访问一个站点时，它会首先检查该站点根目录下是否存在robots.txt，如果存在，搜索机器人就会按照该文件中的内容来确定访问的范围；如果该文件不存在，所有的搜索蜘蛛将能够访问网站上所有没有被口令保护的页面。

我们在hexo 根目录下的 public 目录下新建一个robots.txt文件，内容如下：

1
2
3
4
5
6
7
8
9
10
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/
DisAllow: /about/
Disallow: /friends/
Disallow: /contact/
Sitemap: https://axh2018.cn/sitemap.xml
Sitemap: https://axh2018.cn/baidu_sitemap.xml

你可自定义哪些内容可以被爬取，哪些内容不能

参考:

打赏点小钱
支付宝 | Alipay
微信 | WeChat