之前特别喜欢那种动态博客,因为它能够提供一种更加简洁直观的编辑页面,而不是像 Hexo 一样,要从一堆 .md 文件中找出自己需要编辑的那个。

当然, Hexo 下这个问题也不是无解,所以这篇文章就来简单的介绍下在 Hexo 的文章管理插件。

首先先要明确一下自己的需求:

  1. 界面好看,颜值高

  2. 能通过文章标题来检索文章而不是 markdown 文件的文件名

  3. 能够快捷的调整文章的日期、标签等设置

在 Github 上搜索 hexo admin ,我找到了一下几款插件:

  • hexo-admin
    • 优点:功能齐全,一键部署
    • 缺点:界面难看,有些时候会有些卡顿?(个人感觉)
  • hexo-local-admin
    • 装不起来,略
  • hexo-hey
    • 优点:界面好看,响应速度快
    • 缺点:不支持 Latex (不过这个问题我们马上解决),不能一键部署?

综上,我选择了 Hexo Hey。

安装

参考官方文档的 README.md 即可,并不难。

不要忘记去配置 _config.yml

使用前小修改

虽说界面好看,但还是有些我个人觉得反人类的小问题,比如:

  • Markdown 源码编辑框不是等宽字体

  • toolbar 的文字没有居中对齐?

  • sidebar 宽度太小,有些文章的标题太长显示不下...

  • 右侧预览的 margin 太少,看起来十分拥挤

所以自己加了点 CSS ,利用 Stylus.

pre, code {
    font-family: Menlo !important;
}

md-toolbar span.ng-scope {
    display: none;
}

md-sidenav {
    width: 600px !important;
}

.markdown-body {
    margin: 60px !important;
}

MathJax 公式支持

your-hexo-path/node_modules/hexo-hey/www/index.html 下粘贴以下代码

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';
    }
});

function funcDemo(){
    window.setInterval("MathJax.Hub.Typeset()", 500);
}

window.onload = funcDemo;

</script>

<script async src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML"></script>

由于不会检测 markdown 文件发生改变时渲染,所以默认是每隔 0.5s 重新渲染一次。

已知的小问题

分类和 tag 修改后无法保存...

↑ 好吧只是窝不会用...

Min-Max 容斥学习笔记
上一篇 «
BZOJ5404 party
» 下一篇