关于本hexo主题 anonymous 发布于：2020年07月10日 更新于：2023年11月24日

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

模板仓库：https://github.com/hdxw/hexo-theme-prowiki
在线demo：https://demo.wujiaxing.com/prowiki

已知问题

BUG

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

未支持的功能

1. 添加分享功能/文章底部打赏/访客统计
2. 支持文章搜索，npm install hexo-generator-searchdb –save
3. 支持RSS，并添加header<link rel="alternate" href="path/of/rss" type="application/atom+xml">
4. …

更新日志

feature-v1.3

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

5.配置文件添加项，自定义配色方案

release-v1.2

未完，待续

1.优化作者头像垂直对齐
2.支持下拉菜单
3.更改demo域名：https://demo.wujiaxing.com/prowiki/
4.修改favicon.ico路径，/img/favicon.ico => /favicon.ico
5.更新普惠体字体文件puhuiti.ttf => puhuiti3.woff2

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新建项目

初始化项目

hexo init hexo-theme-prowiki-demo

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

highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: true # 修改为true，开启代码高亮

theme: prowiki # 修改主题为prowiki

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

cd hexo-theme-prowiki-demo
npm install
hexo s

hexo版本更新

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

npm update hexo --save

开启菜单

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

/themes/prowiki/_config.yml

menus: 
  首页: /
  归档: /archives
  分类: /categories
  标签: /tags
  友链: /friends
  关于: /about

开启categories

hexo new page "categories"

在hexo-theme-prowiki-demo/_config.yml中添加以下内容（可选，有默认值）

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

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

开启tags

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

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

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

hexo new page "friends"

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

开启about

hexo new page "about"

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

修改配置信息

hexo-abbrlink

可选的个人建议插件

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

然后需要修改配置信息

hexo-theme-prowiki-demo/_config.yml

# 添加配置信息
abbrlink:
  alg: crc32
  rep: hex

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

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

hexo-filter-image

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

npm install --save hexo-filter-image

可选配置项：hexo或者主题的_config.yml都可以

filter_image:
  # 日志是否启用
  log: true

服务重启前最好hexo clean一下

hexo-blog-encrypt

可选的文章加密插件

npm install --save hexo-blog-encrypt

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

hexo-theme-prowiki-demo/_config.yml

# 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的评论插件。由于面向的是技术博客，这个留言的实现方式很舒服。

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

plugins:
  gitalk:
    clientID: Application的Client ID
    clientSecret: Application的Client Secret
    repo: repository的名字
    owner: repository的所有者，可以是个人或者组织
    admin: 
      - repository的所有者和合作者(对这个repository有写权限的用户)
    distractionFreeMode: false 默认值false，类似Facebook评论框的全屏遮罩效果

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

建议修改的配置信息

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

# 网站基础配置信息（一般在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

---
title: {{ title }}
date: {{ date }}
tags:
categories:
author:
---

其他说明

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

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

写在最后

下面是一些没用的话

主题制作目的

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

取个名字吧

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

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

需求设计

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

菜鸟开发笔记

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

参考链接

• Hexo官方文档
• Hexo主题开发
• CSS3实现多种背景效果
• 解决锚点链接跳转后位置上下偏移的偏移的办法
• 原生js 平滑滚动到页面的某个位置
• html锚点 偏移问题
• JS：目录跟随定位效果的实现及锚点中使用name和id定位的区别

版权声明：本文为「阿巴阿巴」的原创文章，博客内容遵循 署名-非商业性使用-相同方式共享 协议。
本文永久链接是：https://demo.wujiaxing.com/prowiki/about/index.html