Hexo Themes Configuration and Polishment

Hexo博客支持MathJax渲染,只需要做一些简单的安装和配置。

Hexo的配置

1
npm install hexo-math --save

开启数学公式支持

第一种方法:在next主题的文件夹下的_config.yml(不是hexo文件夹下的_config.yml)找到如下语句:

1
2
3
# Math Equations Render Support
math:
enable: true

将enable修改为true

第二种方法:在加入了LaTeX数学公式的文章开头加入声明 mathjax: true

数学公式使用方法:在两个双dollar符中输入latex数学公式

两种配置文件的区分

站点配置文件:Hexo博客根目录下的 _config.yml
主题配置文件:./themes/主题名/_config.yml

首页置顶文章功能

1
2
npm install hexo-generator-topindex --save
npm uninstall hexo-generator-index --save

通过在文章中添加 top: 数值 来设置优先值,默认优先值为0。

Markdown与MathJax冲突问题解决

网上有些做法是在写LaTeX的时候加入逃逸字符,但是这样做使得LaTeX只能在Markdown上渲染,在tex文件中还是要改回正常的状态,这样不具备拓展性。可以通过更改渲染引擎达到解决冲突的目的。

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

hexo-renderer-marked是Hexo自带的默认渲染引擎(注意,如果使用了其他的渲染插件,请卸载对应的插件),没有针对MathJax的改进。而hexo-renderer-kramed这个渲染插件针对MathJax支持进行了改进,对于Markdown和MathJax会分别渲染。尽管如此,对于行内公式有时还是会出现误将下划线识别为 Markdown 语法的情况。这时需要参考官方文档修改 escape 字符:https://hexo-guide.readthedocs.io/zh_CN/latest/theme/[NexT]%E9%85%8D%E7%BD%AEMathJax.html

NexT主题的配置

修改字体大小 / 修改文章页面宽度

在next主题文件夹下, 进入 source/css/_variables/base.styl, 找到

1
2
// Font size
$font-size-base = 14px

将 14px 的大小修改为16或者18px.

修改文章页面宽度

1
$content-desktop                = 700px

to 800 px or larger.

图片居中显示

Hexo中使用的markdown渲染引擎为 marked. 想让图片居中显示, 可以修改主题渲染文件.

修改底部#标签为图标

网站根目录下 themes\next\layout_macro\post.swig 文件.
搜索 rel="tag">#, 将 # 替换成图标 <i class="fa fa-tag"></i>.

将阅读次数修改为热度

进入 /themes/next/layout/_macro/post.swig 文件, 搜索 LeanCloud, 在 <span class="leancloud-visitors-count"></span> 后添加 <span>℃</span>, 然后再将 /themes/next/languages/zh-CN.yml 文件中post:框下views:阅读次数 修改为 views:热度.

添加字数统计

安装字数统计插件

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

在主题配置文件中设置:

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 2
wpm: 275

在站点配置文件中设置:

1
2
3
4
5
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true

If you want to add the word after the counting numbers like the following:

picture

open this file your blog dir/themes/next/layout/_macro/post.swig and find

1
2
3
<span title="{{ __('symbols_count_time.count') }}">{#
#}{{ symbolsCount(post.content) }}{#
#} 字</span>

like this.

在 Github Pages 中添加 gitalk 评论功能

在 Github 中新建一个 OAuth Applications, 记住 client_id, client_secret. 然后在 next 主题配置文件中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Gitalk
# Demo: https://gitalk.github.io
gitalk:
enable: true
github_id: BillyStudio # GitHub repo owner
repo: Blog-de-Shane # Repository name to store issues
client_id: 你的client_id # GitHub Application Client ID
client_secret: 你的client_secret # GitHub Application Client Secret
admin_user: BillyStudio # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
distraction_free_mode: true # Facebook-like distraction free mode
# Gitalk's display language depends on user's browser or system environment
# If you want everyone visiting your site to see a uniform language, you can set a force language value
# Available values: en | es-ES | fr | ru | zh-CN | zh-TW
language:

这样默认评论框就开启了,如果想关闭它,则在文章标签中设置:

comments: false

就可以了。

取消toc栏的自动编号

https://blog.guaoxiaohei.com/posts/Hexo-Level/

Minos主题的配置

配置Minos主题的目的是为了写双语博客。(Current Supported Hexo version is v3.6.0)

1.在themes文件夹下:

1
git clone https://github.com/ppoffice/hexo-theme-minos.git minos

2.修改语言配置,在minos文件夹下

1
cp _config.yml.example _config.yml

编辑_config.yml文件下menu项,保留自己想要的部分:

1
2
3
4
5
# Navigation bar menu links.
menu:
Categories: /categories
Tags: /tags
About: /about
1
2
cp _config.yml _config.en.yml
cp _config.yml _config.zh-cn.yml

在_config.zh-cn.yml中修改中文菜单栏:

1
2
3
4
5
# Navigation bar menu links.
menu:
分类: /zh-cn/categories
标记: /zh-cn/tags
关于: /zh-cn/about

在minos/commons文件夹中,将languages.ejs中的<%- partial('common/languages') %>剪切,放到navbar.ejs的对应位置

3.修改文件布局
在_post文件夹下新建zh-cn文件夹,将原md文件和文件夹拷贝过去;在source文件夹下新建zh-cn文件夹,将about、categories、tags等文件夹拷贝过去

4.hexo s尝试启动

1
2
3
4
ERROR Package hexo-generator-index is not installed.
ERROR Package hexo-renderer-marked is not installed.
ERROR Package hexo-renderer-sass is not installed.
ERROR Please install the missing dependencies in the root directory of your Hexo site.

安装所需依赖:

1
2
3
npm install hexo-generator-index
npm install hexo-renderer-marked
npm install hexo-renderer-sass
Linux系统静态库与共享库 How to install macOS High Sierra on VMware Workstation 14

Comments

You forgot to set the shortname for Disqus. Please set it in _config.yml.
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×