hexo 网站

网站建设

发布日期: 2020-02-04

文章字数: 1.9k

阅读时长: 7 分

阅读次数:

搭建个人`Hexo`网站

1. 环境安装

需要依赖node.js环境，下载node.js安装包，安装好以后会自动安装js和npm环境.

安装nodejs

下载node.js安装包，选择对应系统和版本，如果是win7，需要用nodejs 12的版本；

安装好以后需要重启下电脑，这样环境变量才能生效；

验证是否安装成功：

node -v
npm -v

安装hexo

国外的源常常无法安装，需要配置成淘宝的源。注意从2022.6.30开始统一切换为https://npmmirror.com/

npm config set registry https://registry.npm.taobao.org

然后安装

npm install -g hexo-cli

验证是否安装成功

hexo -v

建立本地目录

hexo init 
cd 
npm install

2. 安装合适的模板

我这里选用的是hexo-theme-matery

git clone https://github.com/blinkfox/hexo-theme-matery.git

其他说明见说明文档https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md

3. 修改及问题

修改

替换模板到hexo源码目录，修改成hexo-theme-matery这个模板

新建分类categories页
```
hexo new page "categories"
```
编辑/source/categories/index.md，修改内容为
```
---
title: categories
date: 2020-02-04 12:16:07
type: "categories"
layout: "categories"
---
```
同理，新建标签tags页，新建关于我about页，新建留言板contact页，新建友情链接friends页

插件安装

代码高亮

npm i -S hexo-prism-plugin

然后修改根目录的_config.yml文件中的highlight.enable为false，并新增prism插件相关设置

highlight:
  enable: false

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

搜索

npm install hexo-generator-search --save

新增配置项

search:
  path: search.xml
  field: post

中文链接转拼音

npm i hexo-permalink-pyinyin --save

新增配置项

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

文章字数统计

npm i --save hexo-wordcount

修改主题下面的_config.yml文件，开启相关选项

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

其他可选

添加emoji表情支持. hexo-filter-github-emojis
添加RSS订阅支持. hexo-generator-feed
添加DaoVoice在线聊天功能
添加Tidio在线聊天功能

修改页脚

修改位置为主题文件的/layout/_partial/footer.ejs, 包括站点、使用的主题、访问量等。
修改社交链接

主题默认支持qq/Github/邮箱等配置。可以在主题文件/layout/_partial/social-link.ejs文件中新增
修改打赏二维码图片

在主题文件的source/medial/reward中替换自己的

配置音乐播放器

在博客source目录下的_data下新建musics.joson文件，内容添加音乐

[{
    "name": "五月雨变奏电音",
    "artist": "AnimeVibe",
    "url": "http://xxx.com/music1.mp3",
    "cover": "http://xxx.com/music-cover1.png"
}, {
    "name": "Take me hand",
    "artist": "DAISHI DANCE,Cecile Corbel",
    "url": "/medias/music/music2.mp3",
    "cover": "/medias/music/cover2.png"
}, {
    "name": "Shape of You",
    "artist": "J.Fla",
    "url": "http://xxx.com/music3.mp3",
    "cover": "http://xxx.com/music-cover3.png"
}]

name: 音乐名称

artist: 音乐作者

url：音乐文件地址

cover：音乐封面

然后在主题的_config.yml中开启 music下的的enable即可

4. 文章`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 中的一个

注意:

如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。

date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。

如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。

您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

以下为文章的 Front-matter 示例。

最简示例

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

最全示例

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

问题记录

我在/source下新建了README.md，主要是为了能在github项目界面中显示，而不希望被hexo g解析成html的，我要怎么设置？

在根目录下的_config.yml中, 设置skip_render
```
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: README.md
```
每次hexo n 文章，都只有名字，后面多了也不好找怎么办？

可以根目录的_config.yml中，设置new_post_name,添加上日期
```
# Writing
new_post_name: :year-:month-:day-:title.md # File name of new posts
default_layout: post
```
每次hexo n 文章，默认文章的头属性选项修改

在hexo-source\scaffolds\post中，修改默认样式
```
---
title: {{ title }}
date: {{ date }}
author: Wang Kang
comments: true
types: 
categories:
tags:
---
```
windows中, 在git bash终端中git status 显示不了中文文件名,都是数字

主要是默认设置下,中文名显示的是八进制的字符编码. 只要把配置文件core.quotepath设置为false就可以解决

在git bash命令行中输入下面命令即可.
```
git config --global core.quotepath false
```