文章目录
  1. 1. 阅读提示
  2. 2. HEXO的搭建
  3. 3. GITHUB静态网页托管服务
  4. 4. Markdown
    1. 4.1. 什么是Markdown
    2. 4.2. MarkDown编辑器
      1. 4.2.1. Typera的安装
      2. 4.2.2. Markdown Pad的安装
      3. 4.2.3. Atom的安装
    3. 4.3. MarkDown语法学习
  5. 5. MathJax
    1. 5.1. 什么是MathJax
    2. 5.2. Hexo-Math插件的安装
    3. 5.3. MathJax语法学习
    4. 5.4. KaTex
  6. 6. 域名
    1. 6.1. 域名购买
    2. 6.2. 域名解析
  7. 7. 插件配置
    1. 7.1. 添加站内搜索
    2. 7.2. 添加音乐插件
      1. 7.2.1. 网易云音乐插件
      2. 7.2.2. Hexo-tag-aplayer插件
    3. 7.3. 添加评论插件
    4. 7.4. 添加字数统计
    5. 7.5. word与markdown互转插件
    6. 7.6. 其他炫酷插件
  8. 8. 其他小问题
    1. 8.1. HTML问题(感谢张思远)
    2. 8.2. 主页出现乱码文章
    3. 8.3. Jacman主题自动隐藏侧边栏
  9. 9. 推荐站点和软件

引言:本文总结从博客搭建到现在遇到的一系列问题。我搭建的博客建立在Jacman主题之上,但本文尽量避免与主题相关的内容,尽量保留普遍适用性。


阅读提示

阅读本文请以本文为导览,按本文的步骤到相关网址看相关内容操作即可,因为不保证网址内其他内容合理。

HEXO的搭建

  • 搭建hexo框架(官方文档) 将NODE.JS和GIT装好,HEXO框架搭好

  • hexo基础语法(hexo搭建Github) 学习基础命令和sitemap设置。在这一步,你可以通过hexo g、hexo s来预览自己的博客。sitemap关系到百度谷歌对网站的录入,不需要的可以跳过。注意,如果打不开hexo s 对应的本地链接,可能是4000端口被占用,请使用命令hexo s -p 50000 重新映射到50000端口,或任意其他未被占用的端口。

  • hexo主题列表 挑选一个主题进行更换,点主题名称进入github阅读readme即可get该主题的安装方式,其中Demo是主题预览,你可以到已应用该主题的网站查看主题样式。注意,主题的挑选至关重要,关系到了你得自己花时间找轮子还是用主题现成的轮子,推荐使用近期在更新的主题,这样各种插件都比较完备。已知较好的主题有NexT、Jacman等。注意,按照readme配置好后,通过命令hexo clean hexo g 重建网页后主题才能更改好。

  • 书写about页面(hexo怎么在菜单上添加页面和分类)

  • hexo 怎么创建 404 页面?

  • 其他的请详细参考相关主题的README

GITHUB静态网页托管服务

Markdown

什么是Markdown

  • Markdown是一种语言,被我们拿来写文章。我们的文章保存在\source\_posts\目录下,文件名不对应标题,只对应对应文章最终的网址,后缀名是.md。一般文章的头部格式是这样的:
1
2
3
4
5
6
7
---
title: 文章标题
categories: 目录
date: 2017/8/6 20:21
tags: [标签1,标签2]
---
巴拉巴拉巴拉……

后面的内容就用markdown语法写就好了。

MarkDown编辑器

Typera的安装

  • Typora 使用了它之后我感觉棒极了,沈扬华学长安利的好东西。它是免费的,支持编辑器里实时预览,支持mathjax的基础语法。虽然目前版本还不到1.0,但是经过一些版本的更迭它已经变得越来越好用了。

Markdown Pad的安装

1
2
3
4
5
邮箱:
Soar360@live.com

授权秘钥:
GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6bnxn2kSE8qHqNY5QaaRxmO3YSMHxlv2EYpjdwLcPwfeTG7kUdnhKE0vVy4RidP6Y2wZ0q74f47fzsZo45JE2hfQBFi2O9Jldjp1mW8HUpTtLA2a5/sQytXJUQl/QKO0jUQY4pa5CCx20sV1ClOTZtAGngSOJtIOFXK599sBr5aIEFyH0K7H4BoNMiiDMnxt1rD8Vb/ikJdhGMMQr0R4B+L3nWU97eaVPTRKfWGDE8/eAgKzpGwrQQoDh+nzX1xoVQ8NAuH+s4UcSeQ==

Atom的安装

  • Atom 因为不是很喜欢用,所以具体就不介绍了。

MarkDown语法学习

MathJax

什么是MathJax

  • MathJax是一个可以让你的网页使用各种高逼格数学公式的东西。比如说:

×B1cEt=4πcjE=4πρ×E+1cBt=0B=0\begin{array}{c} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \\ \end{array}

  • 如果你发现你的主题自带MathJax,那你可以跳过这一章了,如果你的主题不自带或者你想体验一下Hexo-Math插件,你可以考虑看看本章。

Hexo-Math插件的安装

  • hexo-math插件 按照文档来很快的,但是!!敲重点!!Config这里需要这样写才能使用MathJax:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
math:
engine: 'mathjax' # or 'katex'
mathjax:
src: "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
config:
tex2jax:
inlineMath: [ ['$','$'], ["\\(","\\)"] ]
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
processEscapes: true
TeX:
equationNumbers:
autoNumber: "AMS"
# MathJax config
katex:
css: custom_css_source
js: custom_js_source # not used
config:
# KaTeX config

我可是花了不少时间去填坑的啊。

悄悄提示你:如果你是支持mathjax的主题别忘了注释或删掉\themes\jacman\layout\partial\after_footer.ejs中有关mathjax的语句(非jacman主题也可能放在head.ejs等地方)。

MathJax语法学习

我没找到特别全面的语法文档,下面这个差强人意吧。

KaTex

  • 我已经入了KaTex的坑了,比MathJax快多了,感兴趣的自己百度吧。

域名

域名购买

域名解析

插件配置

添加站内搜索

  • 利用swiftype为hexo添加站内搜索 访问有障碍的可以翻墙或者用eduroam试试,账号需要用企业邮箱注册。如果有独立域名的可以根据上面的域名邮箱解析搭建自己的域名企业邮箱,嫌麻烦就来找我要个xxx@mzz.pub的邮箱号吧。

添加音乐插件

网易云音乐插件

  • 这个插件是全局的,在主页、任何文章等地方均有显示。缺点是如果设置自动播放并且打开多个页面就悲剧了。

  • 打开任意一个人的网易云主页,如我的**莫之章 - 网易云音乐** 右键任意歌曲,复制链接地址,该地址中将包含songid。相似的,歌单的listplayid也可如此获取。

  • 单歌插件网址:http://music.163.com/#/outchain/2/songid/将songid改为你要播放的歌的id

  • 歌单插件网址:http://music.163.com/#/outchain/0/playlistid/将playlistid改为你要播放的歌单的id

  • 打开网址后,将下面的HTML代码复制,打开D:\hexo\themes\主题名称\layout\文件夹,找到你想挂播放器的页面。假如我想挂在我的侧边栏上,我就找到D:\hexo\themes\jacman\layout\_partial\sidebar.ejs 打开,选个位置加进我改好的HTML代码。注意,可以修改宽度和高度防止错位。

  • 悬浮代码:style="position:fixed; right:0; bottom:0;z-index:100;"<iframeframeborder="no"之间插入这个代码就好了。如果你使用悬浮代码,则网易云音乐的位置不被束缚,但其出现的页面与你将代码写在哪个文件相关。比如我写在了sidebar.ejs里,那么只有侧边栏出现的页面我的网易云音乐才出现。

  • 对了,如果某歌曲版权限制无法分享的话,通过本方法分享出来是无法播放的。

Hexo-tag-aplayer插件

添加评论插件

  • 国外的评论插件很多被墙了,国内的评论插件大多都扑街了,还剩了畅言比较好,但不备案不能用。友言就不说了,太烂了。其他的没用过。

  • 如果你的theme自带评论插件而且现在还能用,那好极了。如果你的theme带的评论插件都扑街了,那还是考虑一下我安利的这款吧。

  • hypercomments 使用谷歌账户登陆进去就可以用了,简直快捷到爆炸。将其给的HTML代码覆盖掉你theme里面本来扑街掉的代码就好了。

  • 举起一个我自己栗子:首先在themes\jacman\_config.yml里面关掉theme自带的所有评论插件。然后在\themes\jacman\layout\里找到我的扑街评论插件文件,发现它们都是放在\themes\jacman\layout\_partial\post\comment.ejs文件里的。我在最后一行贴上了那段HTML代码,大功告成。

添加字数统计

word与markdown互转插件

  • pandoc 安好插件后重启,然后在Typera里面就可以导入导出了。导出为docx之后可以全选调节段落的段前和行距,一下就美观了。

其他炫酷插件

其他小问题

HTML问题(感谢张思远)

  • 下方字体颜色与背景颜色重合的解决方案:添加style="color: #fff"
  • 代码区无法自动换行问题的解决方案:在\themes\jacman\layout\_partial\head.ejs中的</head>之前添加
1
2
3
<style>
pre {white-space: pre-wrap;}
</style>

主页出现乱码文章

  • 发现主页有一个乱码文章,却在资源管理器找不到这个文件。这时候在bash下cd到_posts目录,用dir命令查看是否有可疑的文件,然后用rm删掉。注意,如果字符串中有特殊字符,需要用\进行转义。

Jacman主题自动隐藏侧边栏

hexo干货系列:(八)hexo文章自动隐藏侧边栏 Jacman主题下,自动隐藏侧边栏即自动悬挂文章目录。

推荐站点和软件

文章目录
  1. 1. 阅读提示
  2. 2. HEXO的搭建
  3. 3. GITHUB静态网页托管服务
  4. 4. Markdown
    1. 4.1. 什么是Markdown
    2. 4.2. MarkDown编辑器
      1. 4.2.1. Typera的安装
      2. 4.2.2. Markdown Pad的安装
      3. 4.2.3. Atom的安装
    3. 4.3. MarkDown语法学习
  5. 5. MathJax
    1. 5.1. 什么是MathJax
    2. 5.2. Hexo-Math插件的安装
    3. 5.3. MathJax语法学习
    4. 5.4. KaTex
  6. 6. 域名
    1. 6.1. 域名购买
    2. 6.2. 域名解析
  7. 7. 插件配置
    1. 7.1. 添加站内搜索
    2. 7.2. 添加音乐插件
      1. 7.2.1. 网易云音乐插件
      2. 7.2.2. Hexo-tag-aplayer插件
    3. 7.3. 添加评论插件
    4. 7.4. 添加字数统计
    5. 7.5. word与markdown互转插件
    6. 7.6. 其他炫酷插件
  8. 8. 其他小问题
    1. 8.1. HTML问题(感谢张思远)
    2. 8.2. 主页出现乱码文章
    3. 8.3. Jacman主题自动隐藏侧边栏
  9. 9. 推荐站点和软件