Skip to content

博客搭建及相关问题

📅 发表于 2017/10/17
🔄 更新于 2017/10/17
👁️ 次访问
📝 0 字
0 分钟
心得体会
#心得
#hexo
#pandoc
#数学公式
#indigo
#中文
#pyplot

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

搭建博客

搭建博客

shell
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主题

shell
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博客

安装博客

shell
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

python
# 配置indigo主题
theme: indigo

配置数学公式

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

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

shell
# 在主题_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 ,添加如下项目

python
# 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

配置左侧菜单

json
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

配置自我介绍

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

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

json
# 你的头像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。 、

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

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

每张文章最后的备注

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

关闭动态title

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

配置valine评论

json
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

配置几个页面的标题

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

语言栏

indigo其他3个文件配置

languages/zh-CN.yml配置

yaml
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

ejs
<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 更改卜算子的域名,解决统计访问量的问题

ejs
<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一览

yaml
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一览

yaml
# 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

总结

python
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使用中文

参考文档

shell
# 下载字体放到下面的目录
# 下载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

简单测试例子

python
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)

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

python
import sys  
reload(sys)  
sys.setdefaultencoding('utf8')

应该就可以了。

总访客数:   ·   总访问量:
PLM's Blog @ 2016 - 2025