搭建hexo博客，数学公式问题，Indigo主题

搭建博客

搭建博客

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
mkdir PLMBlogs
cd PLMBlogs
# install hexo
npm install hexo-cli -g
# init
hexo init 
npm install
hexo server

# install plugins
npm install hexo-deployer-git --save
npm install hexo-renderer-scss --save

# 在默认_config.yml中添加需要的插件
plugins:
  hexo-generator-feed #RSS订阅插件
  hexo-generator-sitemap  #sitemap插件

git clone https://github.com/ahonn/hexo-theme-even themes/even

# 替换配置文件 or 一步一步地去配置

# 生成，再替换文件
hexo new page tags
hexo new page categories

indigo主题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
hexo init
# 配置.yml文件，复制旧的过来即可
npm install hexo-deployer-git --save
git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo
git checkout -b card origin/card

npm install hexo-renderer-less --save
npm install hexo-generator-feed --save
npm install hexo-generator-json-content --save
npm install hexo-helper-qrcode --save

hexo new page tags
hexo new page categories
hexo new page about
# 再去配置各个目录下的index文件，也可以直接copy

# 配置主题中的yml，直接copy

# 修改图片等
# 后续 修改宽度
# source/css/_partial/variable.css 中第28行，修改为80%的宽度
contentWidth: 80%
# 主题配置文件中 cdn改为false
cdn: false

搭建indigo博客

安装博客

1
2
3
4
5
6
7
8
9
10
11
12
13
14
hexo init
npm install hexo-deployer-git --save
''' 安装 '''
git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo
npm install hexo-renderer-less --save
npm install hexo-generator-feed --save
npm install hexo-generator-json-content --save
npm install hexo-helper-qrcode --save
''' 配置标签和类别页面，去配置index.md中的数据 '''
hexo new page tags
hexo new page categories
# 主要是配置 layout: tags layout: categories comment: false
# 新建关于我的页面，并填上相应的信息 layout: about
hexo new page about

配置hexo/_config.yml中的主题是indigo

1
2
# 配置indigo主题
theme: indigo

配置数学公式

请务必使用pandoc进行渲染，这是最好的没有之一！别的会有各种问题，比如默认的多行数学公式渲染不了，这个问题困扰了好久。

但是pandoc也有坑啊，测试了2.5不行。我这里成功的是pandoc-2.2.3.2-windows-x86_64 + hexo-renderer-pandoc@0.2.0。最新的都不行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 在主题_config.yml 中配置 
mathjax: true
# 要先卸载已有的渲染器
npm uninstall hexo-renderer-marked --save
# 潜在的
npm uninstall hexo-renderer-kramed --save
npm uninstall hexo-math --save

# 只需要安装pandoc就可以了
# 先在本地下载pandoc，安装好，再执行如下命令。最新的pandoc测试有问题。推荐2.2和0.2.
npm install hexo-renderer-pandoc --save
# 其他命令
npm view hexo-renderer-pandoc versions
npm ls hexo-renderer-pandoc
npm uninstall hexo-renderer-pandoc@0.2.0 --save

# 1. 安装旧版pandoc-2.2.3.2-windows-x86_64.msi在win10上
# 2. 安装hexo-renderer-pandoc@0.2.0在博客中
npm install hexo-renderer-pandoc@0.2.0 --save

做到这里，要先启动，放两篇带数学公式的文档，去测试一下。

博客配置

编辑hexo/_config.yml ，添加如下项目

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
# Site
title: PLM's Blog
subtitle: 好好学习，天天向上
description: 菜鸟程序员
author: 蒲黎明
language: zh-CN
# url    
url: https://plmsmile.github.io/

# Deployment
deploy:
  type: git
  repo: git@github.com:plmsmile/plmsmile.github.io.git
  branch: master

# indigo的配置项
feed:
  type: atom
  path: atom.xml
  limit: 0
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: true
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

indigo-config配置

参考官方配置说明

编辑themes/indigo/_config.yml

配置左侧菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
menu:
  home:
    text: 主页
    url: /
  archives:
    text: 归档
    url: /archives
  tags:
    text: 标签
    url: /tags
  th-list:
    text: 类别
    url: /categories
  user:
    url: /about
    text: 关于我
  github:
    url: https://github.com/plmsmile
    target: _blank

配置自我介绍

1
about: 自然语言处理，机器学习，深度学习，Spark，Leetcode，Java，C++，数据结构。都不会呢，赶紧快学吧！

设置图片，需要配置站点图片、头像图片，也可以换头像背景图片。

1
2
3
4
5
6
7
8
9
10
11
# 你的头像url
avatar: /img/avatar.jpg
# avatar link
avatar_link: https://plmsmile.github.io/about
# 头像背景图
brand: /img/brand.jpg
# favicon
favicon: /img/favicon.png

# email
email: plmsmile@126.com

配置页面宽度

修改source/css/_partial/variable.css 中的28行，设置为80%。设置主题配置文件中，cdn: false。 、

配置支付宝和微信图片，默认就有打赏功能。可以关掉。

1
2
3
4
5
''' 是否开启打赏，关闭 reward: false'''
reward:
  title: 谢谢大爷~
  wechat: /img/wechat.png     '微信，关闭设为 false
  alipay: /img/alipay.png     '支付宝，关闭设为 false

每张文章最后的备注

1
postMessage: <br>原始链接：<a href="<%- url_for(page.path).replace(/index\.html$/, '') %>" target="_blank" rel="external"><%- page.permalink.replace(/index\.html$/, '') %></a>

关闭动态title

1
2
3
4
# 动态定义title
# title_change:
#   normal: (つェ⊂)咦!又好了!
#   leave: 死鬼去哪里了！

配置valine评论

1
2
3
4
5
6
7
8
9
10
valine:
  enable: true # 如果你想使用valine，请将值设置为 true
  appId: xxxx # your leancloud appId
  appKey: xxxx # your leancloud appKey
  notify: true # Mail notify
  verify: false # Verify code
  avatar: mm # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  placeholder: Just go go # Comment Box placeholder
  guest_info: nick,mail,link # Comment header info
  pageSize: 10 # comment list page size

配置几个页面的标题

1
2
3
4
# 页面标题
tags_title: 标签
archives_title: 归档
categories_title: 类别

语言栏

indigo其他3个文件配置

languages/zh-CN.yml配置

1
2
3
4
5
6
7
8
9
10
global:
  search_input_hint: "输入感兴趣的关键字"
post:
  continue_reading: "点击阅读全文"
  last_updated: "最后更新时间："
footer:
  license: '博客内容遵循 <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a>'
tag:
  all: "全部"
  tags: "标签"

layout/_partial/footer.ejs

1
2
3
4
5
6
7
8
9
10
11
<footer class="footer">
    <div class="bottom">
        <%- partial('plugins/site-visit') %>
        <p>
            <span>
            PLM's Notes &nbsp; &copy; &nbsp
            </span>
            <%if (theme.since_year && theme.since_year < date(new Date(), 'YYYY')) {%><%- theme.since_year %> - <%}%><%- date(new Date(), 'YYYY') %>
        </p>
    </div>
</footer>

layout/_partial/script.ejs 更改卜算子的域名，解决统计访问量的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '<%= config.root %>', SHARE: <%- theme.share %>, REWARD: <%- Boolean(page.reward) %> };

<% if (theme.cnzz){ %>
lazyScripts.push('//s95.cnzz.com/z_stat.php?id=<%-theme.cnzz %>&web_id=<%-theme.cnzz %>')
<% } %>
</script>

<script src="<%- url_for(theme_js('/js/main', cache)) %>"></script>
<% if (theme.search){ %>
<%- partial('search') %>
<script src="<%- url_for(theme_js('/js/search', cache)) %>" async></script>
<% } %>

<%- partial('plugins/mathjax') %>

<% if (theme.visit_counter) { %>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<% } %>

<%- partial('plugins/dynamic-title') %>

indigo-config一览

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
menu:
  home:
    text: 主页
    url: /
  archives:
    text: 归档
    url: /archives
  tags:
    text: 标签
    url: /tags
  th-list:
    text: 类别
    url: /categories
  user:
    url: /about
    text: 关于我
  github:
    url: https://github.com/plmsmile
    target: _blank

# 你的头像url
avatar: /img/avatar.jpg
# avatar link
avatar_link: /
# 头像背景图
brand: /img/brand.jpg
# favicon
favicon: /img/favicon.png

# email
email: plmsmile@126.com

# 设置 Android L Chrome 浏览器状态栏颜色
color: '#3F51B5'

# 页面标题
tags_title: 标签
archives_title: 归档
categories_title: 类别

# 文章截断
excerpt_render: false
excerpt_length: 200
excerpt_link: 点击阅读全文
mathjax: true
archive_yearly: true

# 是否显示文章最后更新时间
show_last_updated: true

# 是否开启分享
share: true

# 是否开启打赏，关闭 reward: false
reward:
  title: 谢谢大爷~
  wechat: /img/wechat.png     #微信，关闭设为 false
  alipay: /img/alipay.png     #支付宝，关闭设为 false

# 是否开启搜索
search: true

# 是否大屏幕下文章页隐藏导航
hideMenu: true

# 是否开启toc
# toc: false
toc:
  list_number: true  # 是否显示数字排序

# 文章页留言内容，hexo中所有变量及辅助函数等均可调用，具体请查阅 hexo.io
postMessage: <br>原始链接：<a href="<%- url_for(page.path).replace(/index\.html$/, '') %>" target="_blank" rel="external"><%- page.permalink.replace(/index\.html$/, '') %></a>

# 站长统计，如要开启，输入CNZZ站点id，如 cnzz: 1255152447
cnzz: false

# 百度统计，如要开启，改为你的 key
baidu_tongji: false

# 腾讯分析，如要开启，输入站点id
tajs: false

# google
google_analytics: false
google_site_verification: false

# sogou站长验证 http://zhanzhang.sogou.com/
sogou_site_verification: false

# less
less:
  compress: true
  paths:
    - source/css/style.less

# 以下评论插件开启一个即可
# 是否开启 disqus
disqus_shortname: false
# 是否开启友言评论, 填写友言用户id
uyan_uid: false
# 是否使用 gitment，https://github.com/imsun/gitment
gitment: false

# Valine Comment system. https://valine.js.org
valine:
  enable: true # 如果你想使用valine，请将值设置为 true
  appId: xxxx # your leancloud appId
  appKey: xxxx # your leancloud appKey
  notify: true # Mail notify
  verify: false # Verify code
  avatar: mm # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  placeholder: Just go go # Comment Box placeholder
  guest_info: nick,mail,link # Comment header info
  pageSize: 10 # comment list page size

hyper_id: false

canonical: false

# 版权起始年份
since_year: 2016

# 用户页面中作者相关的描述性文字，如不需要设为 false
about: NLP && DL student

# “不蒜子”访问量统计，详见 http://ibruce.info/2015/04/04/busuanzi/
visit_counter:
  site_uv: 总访客数：
  site_pv: 总访问量：

# 动态定义title
# title_change:
#  normal: (つェ⊂)咦!又好了!
#  leave: 死鬼去哪里了！

# 设置为 true 发布后将使用 unpkg cdn 最新的主题样式
# 如果想让你的自定义样式生效，把此项设为 false
cdn: false

# 设置为 true 将使用 lightbox render 图片
lightbox: true

# icp备案号  ICP_license: 京ICP备1234556号-1
ICP_license: false

hexo-config一览

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: PLM's Notes
subtitle: 好好学习，天天笔记
description: NLP, DL, MRC.
keywords:
author: PLM
language: zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://plmsmile.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
index_generator:
  path: ''
  per_page: 15
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
theme: indigo

# Deployment
deploy:
  type: git
  repo: git@github.com:plmsmile/plmsmile.github.io.git
  branch: master


## added
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: true
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
hexo init
# 1. 运行下面的脚本
npm install hexo-deployer-git --save
git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo
npm install hexo-renderer-less --save
npm install hexo-generator-feed --save
npm install hexo-generator-json-content --save
npm install hexo-helper-qrcode --save
hexo new page tags
hexo new page categories
hexo new page about
# 2. 替换source/中3个文件夹，about, categories, tags
# 3. 替换hexo和主题中的配置文件 _config.yml
# 4. 替换indigo/source/img 文件夹
# 5. 修改source/css/_partial/variable.css的28行 宽度为80%
# 6. 替换indigo其他3个文件配置，footer.ejs, scipt.ejs, zh-CN.yml
# 7. 数学公式，请使用pandoc渲染！！！
# 8. 把博客文件复制过来，运行查看。

PyPlot使用中文

参考文档

1
2
3
4
5
6
7
8
9
10
11
12
13
# 下载字体放到下面的目录
# 下载simhei.tff
/home/plm/app/anaconda2/lib/python2.7/site-packages/matplotlib/mpl-data/fonts/ttf

# 编辑文件
/home/plm/app/anaconda2/lib/python2.7/site-packages/matplotlib/mpl-data/matplotlibrc
# 打开下面的注释
# font.family         : sans-serif
# 打开注释，加上SimHei
# font.sans-serif     : SimHei,Bitstream Vera Sans, Lucida Grande, Verdana, Geneva, Lucid, Arial, Helvetica, Avant Garde, sans-serif

# 删除缓存
rm -rf ~/.cache/matplotlib

简单测试例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import matplotlib

matplotlib.matplotlib_fname()
import matplotlib.pyplot as plt
plt.rcParams['font.sans-serif']=['simhei'] #用来正常显示中文标签
plt.rcParams['axes.unicode_minus']=False #用来正常显示负号
matplotlib.rcParams['axes.unicode_minus'] = False   #-号为方块问题
plt.plot((1,2,3),(4,3,-1))

s = "横坐标"

plt.xlabel(unicode(s))
plt.ylabel(u'纵坐标')
plt.show()
print (s)

有时候依然不好使，那么就

1
2
3
import sys  
reload(sys)  
sys.setdefaultencoding('utf8')

应该就可以了。