关于本hexo主题

head

anonymous

发布于:2020年07月10日

更新于:2020年08月04日


欢迎star,fork。如使用中有问题请仔细阅读下面说明信息。

模板仓库:https://github.com/hdxw/hexo-theme-prowiki
在线demo:http://prowiki.demopage.icu/

已知问题

BUG

  1. 代码复制按钮占用代码宽度,代码块出现横向滚动条时比较明显。

未支持的功能

  1. 添加分享功能/文章底部打赏/访客统计
  2. 支持文章搜索
  3. 支持RSS,并添加header<link rel="alternate" href="path/of/rss" type="application/atom+xml">

更新日志

feature-v1.2

1.fix:加密文章右侧目录定位略有偏移;加密文章标题前加锁标志
2.fix:只放大查看无嵌套格式下的图片;返回顶部改为向上箭头
3.支持gitalk留言功能

release-v1.1

修bug,加功能

1.修复加密文章中table/img样式问题,img点击不放大问题
2.fix配置信息。默认作者为主题中配置的第一个,网页header添加根目录配置中的站点信息
3.顶部菜单支持新标签页跳转
4.文章右侧目录显示当前所处位置,并随着页面自动变化、移动
5.代码块,添加一键复制功能

release-v1.0

第一个正式发布版本

1.适配hexo-theme-unit-test所有样式
2.调整发现的其余css样式问题
3.支持图片查看大图

develop-v0.9

1.完成基础页面内容展示,基础样式初设
2.支持创建:分类、标签、友链页面
3.预设兼容hexo-blog-encrypt插件
4.为了方便,简化掉了首页中文章开头可有可无的摘要

安装与配置

傻瓜教程

hexo新建项目

初始化项目

1
hexo init hexo-theme-prowiki-demo

复制prowiki到/themes/中,并修改hexo-theme-prowiki-demo/_config.yml的配置如下

1
2
3
4
5
6
7
8
9
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: true # 修改为true,开启代码高亮

theme: prowiki # 修改主题为prowiki

然后安装依赖,安装完成就能启动简单的hexo项目了

1
2
3
cd hexo-theme-prowiki-demo
npm install
hexo s

hexo版本更新

默认支持版本为4.2.1+,可以通过下面命令更新

1
npm update hexo --save

开启菜单

首先需要修改显示的菜单配置,配置信息如下,默认全显示,如不想使用某个菜单可以注释或者删除

/themes/prowiki/_config.yml
1
2
3
4
5
6
7
menus: 
首页: /
归档: /archives
分类: /categories
标签: /tags
友链: /friends
关于: /about

开启categories

1
hexo new page "categories"

在hexo-theme-prowiki-demo/_config.yml中添加以下内容(可选,有默认值)

1
2
3
category_generator: 
per_page: 25 # 单个分类下每页显示文章数
order_by: title # 文章排序方式

在文章内容中添加分类,然后需要重启hexo服务,重启后categories菜单就可以正常访问了

开启tags

1
2
npm install --save hexo-tag-cloud # 安装插件
hexo new page "tags"

其他步骤和categories的基本相同,不同的是配置信息如下

1
2
3
4
5
6
7
8
9
10
11
12
tag_generator:
per_page: 30 # 单个标签下每页显示文章数
order_by: -date # 文章排序方式

# hexo-tag-cloud
tag_cloud:
textFont: 'Trebuchet MS, Helvetica'
textColor: '#33FFBB'
textHeight: 12
outlineColor: 'rgba(51, 255, 187, 0.3)'
maxSpeed: 0.1 # range from [0.01 ~ 1]
pauseOnSelected: true # true means pause the cloud tag movement when highlight a tag

开启friends

1
hexo new page "friends"

然后编辑/source/friends/index.md,内容和post相同,增加了links友链信息属性,具体格式见 友情链接

开启about

1
hexo new page "about"

然后编辑/source/about/index.md即可,和普通的post一样,区别是有单独的url

修改配置信息

可选的个人建议插件

1
2
# 文章自动生成hash链接,可以规范和缩短链接长度,防止文章url中出现中文
npm install --save hexo-abbrlink

然后需要修改配置信息

hexo-theme-prowiki-demo/_config.yml
1
2
3
4
5
6
7
# 添加配置信息
abbrlink:
alg: crc32
rep: hex

# 修改原有配置,title替换为abbrlink
permalink: :year/:month/:day/:abbrlink/

已有的文章可以hexo s启动服务后打开文章Ctrl+S自动生成一下

hexo-filter-image

当Hexo配置文件的属性root值变化时,无需改变Markdown内容的图片地址,此插件会自动将图片映射成绝对路径

1
npm install --save hexo-filter-image
可选配置项:hexo或者主题的_config.yml都可以
1
2
3
filter_image:
# 日志是否启用
log: true

服务重启前最好hexo clean一下

hexo-blog-encrypt

可选的文章加密插件

1
npm install --save hexo-blog-encrypt

然后需要添加配置信息如下

hexo-theme-prowiki-demo/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Security
encrypt: # hexo-blog-encrypt
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
tags:
- {name: VIP, password: adgjmptw}
template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}">
<div class="hbe-input-container">
<input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label>
<div class="bottom-line"></div>
</div>
<script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script>
</div>
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

在想要加密的文章头部添加password值即可,或者可以通过上面的配置为有某标签的文章自动加密

hexo-plugin-gitalk(评论)

gitalk是一个基于Github Issue的评论插件。由于面向的是技术博客,这个留言的实现方式很舒服。

1
npm install --save hexo-plugin-gitalk
  1. 在github创建一个repository,或者使用已存在的仓库
  2. 创建一个application用于用户授权,创建成功后可以得到Client ID和Client Secret。callback URL配置为博客的网址,本地调试时可设置为http://localhost:4000/hexo-theme-prowiki-demo/。后续可在Settings - Developer settings - OAuth Apps中找到

然后把得到的参数填写到下面配置中,更多配置参数详见gitalk

hexo-theme-prowiki-demo/_config.yml
1
2
3
4
5
6
7
8
9
plugins:
gitalk:
clientID: Application的Client ID
clientSecret: Application的Client Secret
repo: repository的名字
owner: repository的所有者,可以是个人或者组织
admin:
- repository的所有者和合作者(对这个repository有写权限的用户)
distractionFreeMode: false 默认值false,类似Facebook评论框的全屏遮罩效果

如果需要开启某一篇文章的评论,需要在文章中使用管理者账号登陆一下(会自动创建Issue),否则会显示“请联系@owner初始化创建”

建议修改的配置信息

主题中的配置文件很通俗易懂,还有详细的注释,这里说一下根目录配置文件中的一些配置项

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# 网站基础配置信息(一般在header里)
title: Hexo #这个是站点名称会显示在顶部导航栏
subtitle: '' # 在title下,一般是一句话,此处没用
description: 'Hexo博客' # 站点描述信息
keywords: '' # 站点内容关键词
author: John Doe # 站点作者
language: zh-CN # themes\landscape\languages中的文件名,此处没用
timezone: 'Asia/Shanghai' # 网站时区

url: http://yoursite.com # 部署的网站的域名,会影响文章底部的版权信息
root: / # 部署时不是在url的根目录,填写对应的子目录名

# 目录名,会影响url中的值,建议保持默认
tag_dir: tags
archive_dir: archives
category_dir: categories

new_post_name: :title.md # 新建post的文件名,title会被自动替换,请保持默认值
default_layout: post # 默认的layout,请保持默认值

# 主页的分页配置信息
index_generator:
path: ''
per_page: 15
order_by: -date

# 归档分页、分目录配置信息
# category_generator和tag_generator在上面的“开启菜单”中已经说了,这里不再重复
archive_generator:
enable: true
per_page: 25
yearly: true
monthly: true
daily: false
order_by: -date

default_category: 未分类 # 文章无分类时自动添加的分类名称,需要hexo s后Ctrl+S一下
category_map: # 分类名的映射,可以把分类名映射为其他字符,主要用于去掉中文
未分类: wfl
tag_map: # 类似上面,是标签名的映射
测试标签1: test1
测试标签2: test2

per_page: 10 # 默认分页大小,设置为0表示不分页
pagination_dir: page # 分页目录名,可以保持默认值

# 支持hexo d上传代码,npm install --save hexo-deployer-git
deploy:
type: git
repository: https://gitee.com/whools/hexo-theme-prowiki-demo.git
branch: master

post.md

1
2
3
4
5
6
7
---
title: {{ title }}
date: {{ date }}
tags:
categories:
author:
---

其他说明

自动生成的文章“Hello World”中代码样式有问题是因为

1
```和bash中间不能有空格

写在最后

下面是一些没用的话

主题制作目的

想写一些类似wiki、说明书、操作手册之类有较强类别区分的说明性文章,模板要支持多功能分类,还要卸去浮华,不要一切花里胡哨。
官方主题库里没有找到合适的,一时手贱就随便写了这个。
作为一个非专业的业余前端开发,自己做的再丑也要以为妙极。

取个名字吧

原本想写一些web漏洞、软件破解、硬件利用的文章所以以黑色为主色调,示例博客名字就叫
HTW:hack the world

wiki的名字被占用了,所以添字母后主题就叫 ProWiki ,全名:hexo-theme-prowiki

需求设计

  1. 强化分类和标签的使用
  2. 文章内标题有锚点
  3. 风格简约,文字清晰,代码舒适

菜鸟开发笔记

  1. hexo实际上只有三个主页面:index(首页)、post(文章内容)、archive(归档),新建page默认解析到post
  2. 添加自定义页面需要先hexo new page "page-path",然后在theme/layout根目录下添加page-path.ejs,最后在post中添加判断解析index.html

参考链接

版权声明:本文为「河东小伍」的原创文章,博客内容遵循 署名-非商业性使用-相同方式共享 协议。
本文永久链接是:http://prowiki.demopage.icu/about/index.html

  1. 已知问题
    1. BUG
    2. 未支持的功能
  2. 更新日志
    1. feature-v1.2
    2. release-v1.1
    3. release-v1.0
    4. develop-v0.9
  3. 安装与配置
    1. hexo新建项目
    2. hexo版本更新
    3. 开启菜单
      1. 开启categories
      2. 开启tags
      3. 开启friends
      4. 开启about
    4. 修改配置信息
      1. hexo-abbrlink
      2. hexo-filter-image
      3. hexo-blog-encrypt
      4. hexo-plugin-gitalk(评论)
      5. 建议修改的配置信息
      6. post.md
    5. 其他说明
  4. 写在最后
    1. 主题制作目的
    2. 取个名字吧
    3. 需求设计
    4. 菜鸟开发笔记
  5. 参考链接