Hexo Configuration

A fast, simple & powerful blog framework.

Posted by Dusign on 2019-10-14
Words 790 and Reading Time 3 Minutes
Viewed Times

Incredible generating speed powered by Node.js. Hundreds of files take only seconds to build.

All features of GitHub Flavored Markdown are supported, including most Octopress plugins.

You only need one command to deploy your site to GitHub Pages, Heroku or other platforms.

Features powerful APIs for limitless extensibility. Various plugins are available to support most template engines (EJS, Pug, Nunjucks, and many others). Easily integrate with existing NPM packages (Babel, PostCSS, Less/Sass, etc).

Mathjax

hexo 默认的渲染器是 marked,并不支持 mathjax。kramed 是在 marked 基础上修改的,支持了 mathjax。你的 hexo 工程目录下的 node_modules 中可以找到对应的渲染器文件夹。同时在你的工程目录下用以下命令安装 kramed。另外补充一个 Next 配置中推荐的渲染器 hexo-renderer-pandoc,功能很强大不仅可以渲染 markdown,还支持 textile、 reStructedText 等许多其他格式

卸载 marked
npm uninstall hexo-renderer-marked --save

安装 kramed
npm install hexo-renderer-kramed --save

如果你安装了 hexo-math 包,卸载再安装 hexo-renderer-mathjax 包
npm uninstall hexo-math --save

安装 mathjax
npm install hexo-renderer-mathjax --save

更新 mathjax 的 CDN 链接,打开 node_modules/hexo-renderer-mathjax/mathjax.html, 修改 <scripts> 标签

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Valine

Valine 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客,目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。

valine 基于 LeanCloud,使用的话需要通过支付宝实名认证,还要上传 面部照片,需要的信息太多,所以笔者没有注册,故 valine 的使用方法这里就不多介绍了,需要使用的话点击 valine 访问 valine 官网按照文档使用。

Gitment

访问 New OAuth App 注册新的 OAuth 应用程序
获得 Client IDClient Secret

修改主题模版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="blog_comments"></div>

<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>

<script>
const gitment = new Gitment({
id: '<%= page.date %>', // optional
owner: 'dusign',
repo: 'comments',
oauth: {
client_id: '14d5194dbf45604a7488',
client_secret: 'b85cb293d90c4ad7aec36fc4fb6aac7e4922b3cc',
},
// ...
// For more available options, check out the documentation below
})

gitment.render('blog_comments')
// or
// gitment.render(document.getElementById('comments'))
// or
// document.body.appendChild(gitment.render())
</script>

配置需要评论的页面,博客页面为 post.ejs, 需要评论的地方加
<%- partial('_partial/comment') %>

连接服务器上的 js 和 css 不太安全,有时候如果别人的服务器出错会导致你的页面出错,所以最好的办法是将 css 和 js 文件下载下来,本地引入,以 mac 系统为例,使用 wget 下载
wget https://imsun.github.io/gitment/style/default.css
wget https://imsun.github.io/gitment/dist/gitment.browser.js
下载之后放在 Blog/themes/source/cssBlog/themes/source/js 文件夹中,并改名为gitment.cssgitment.js

改名避免和本地文件冲突,本地引入代码如下

1
2
<link rel="stylesheet" href="/css/gitment.css">
<script type="text/javascript" src="/js/gitment.js"></script>

登录报错 [object XMLHttpRequestProgressEvent], 改用如下引入

1
2
<script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/gitment.browser.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/default.css"/>

然后就可以正确使用了


If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

...

...

00:00
00:00