使用hexo和github搭建静态博客网站(三)

89327060 2019-10-06

博客网站功能完善

这节我们只会介绍几个完善网站功能的方法,如果你还想增加其他功能,可以通读NexT 使用文档文档|hexo,根据自己的需要来增加功能。

设置语言

修改站点配置文件(_config.yml)的language字段,比如设置为简体中文

language: zh-Hans

此时页面变为
使用hexo和github搭建静态博客网站(三)

设置菜单

修改主题配置文件(/themes/next/_config.yml)的menu字段

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

修改为

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

创建tags页面

hexo new page "tags"

编辑/source/tags/index.md文件为

---
title: tags
date: 2019-10-05 16:02:39
type: "tags"
comments: false
---

创建categories页面

hexo new page "categories"

编辑/source/categories/index.md文件为

---
title: categories
date: 2019-10-05 15:59:54
type: "categories"
comments: false
---

配置根路径为

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://mfaying.github.io/hexo-test-deploy
root: /hexo-test-deploy/
permalink: :year/:month/:day/:title/
permalink_defaults:

访问页面如下
使用hexo和github搭建静态博客网站(三)

创建一篇文章

执行命令创建一篇文章

hexo new '测试文章'

我们发现在source/_posts/目录下生成了测试文章.md,编辑内容如下

---
title: 文章测试
date: 2019-10-05 16:20:04
tags:
    - hexo
categories: 其他
---
这是摘要
<!-- more -->
以下是正文
# 标题1
1
## 标题2
2

部署后可以发现一篇文章创建成功了。
使用hexo和github搭建静态博客网站(三)

push时自动部署

我们借助git的钩子实现在本地代码推送到远端时自动部署网站。

首先安装husky开发环境依赖包

npm install husky --save-dev

修改根目录package.json文件如下

"scripts": {
  "publish": "hexo clean && hexo d -g"
},
"husky": {
  "hooks": {
    "pre-push": "npm run publish"
  }
},

此时执行命令

git add .
git commit -m '自动部署'
git push origin master

我们会发现在代码提交时,自动执行了hexo clean && hexo d -g部署命令。

至此,我们使用hexo和github搭建静态博客网站的内容已经介绍完毕了,hexo其实还有很多相当多的功能可以使用,比如阅读人数统计、评论功能等等,你还可以根据自己的想法去修改源码完善自己的博客。

参考

  1. 文档|hexo
  2. hexo
  3. NexT 使用文档

欢迎微信关注前端阅读室

使用hexo和github搭建静态博客网站(三)

相关推荐

JingLisen / 0评论 2020-01-06