青苑
0%

博客文章编写及站点优化

发表于 更新于 分类于
本文字数： 2k 阅读时长 ≈ 4 分钟

Abstract：博客文章的编写过程，及布局、美化

博客编写

新建文章

1
$ hexo n [layout_name] text_name #默认为post的布局

新建草稿

1
2
$ hexo n draft title
$ hexo publish title

可以在draft文件夹中新建一个title.md的文件，通过publish命令可以将其推送到_posts文件夹中
hexo的命令一般不处理草稿，不过可以通过静态页面显示草稿:
$ hexo s --draft

内容编写

参考文本测试

博客修饰

文章预览

在文章希望预览的内容后面输入：

1
<!--more-->

即可在首页完成预览

优化文章默认格式

scaffolds文件夹内存在三个自带的Front-matter文件，可自行修改，目前的布局设定为:

1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
tags:
abbrlink:
---
Abstract：
<!--more-->

其实就是文章建立后的默认属性和内容啦

优化文章永久链接为数字编号

安装abbrlink插件

1
npm install hexo-abbrlink --save

_config.yml修改配置

1
2
3
4
5
6
#permalink: :year/:month/:day/:title/
#permalink_defaults:
permalink: posts/:abbrlink/
abbrlink:
  alg: crc32 #support crc16(default) and crc32
  rep: dec   #support dec(default) and hex

重新部署后不同参数的链接可有如下效果

1
2
3
4
5
6
7
8
9
10
11
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

添加文章字数和阅读时长

安装hexo-symbols-count-time插件：

1
npm install hexo-symbols-count-time --save

修改hexo配置：

1
2
3
4
5
6
7
8
9
symbols_count_time:
  symbols: true                # 文章字数统计
  time: true                   # 文章阅读时长
  total_symbols: true          # 站点总字数统计
  total_time: true             # 站点总阅读时长
  exclude_codeblock: false     # 排除代码字数统计
  awl: 2                       # 字平均单词长度 - Average Word Length
  wpm: 275                     # 字/每份
  suffix: "mins."              # 后缀/单位

修改NexT主题配置：

1
2
3
4
5
6
7
8
9
10
11
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
# 设置博客单词统计
symbols_count_time:
  # 是否另起一行（true的话不和发表时间等同一行）
  separated_meta: true
  # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
  item_text_post: true
  # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
  item_text_total: false

效果图：

统计文章阅读人数

修改NexT主题配置：

1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

站点优化

新建边栏

参考文章：
1.Hexo博客进阶教程（一）| 优化文章永久链接为数字编号
2.个人博客第8篇——优化主题（持续更新）
3.Hexo+Next主题搭建个人博客+优化全过程（完整详细版）
4.【Hexo】nexT主题使用攻略基础——添加分类、标签及关于