本文仍在施工中…… 👷🚧
Hexo从入门……到出门(并没有)
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
个人认为Hexo非常适用于在Github.io上部署静态博客。如读者所见,本博客即为Hexo所生成。
Hexo的安装十分简洁,在官网上也有十分详细的教程。
安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:
- Node.js (Node.js 版本需不低于 8.6,建议使用 Node.js 10.0 及以上版本)
- Git
如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。
$ npm install -g hexo-cli
主题
以Vexo为例:
cd your-hexo-folder
git clone https://github.com/yanm1ng/hexo-theme-vexo.git themes/vexo
cp -R themes/vexo/_source/* source/
修改_config.yml
文件:
themes: vexo
通过修改themes/vexo/_config.yml
文件来个性化设置主题。
代码高亮
Hexo自带的代码高亮功能有些许不完善之处,在此以Hexo-Prism-Plugin来替代。
安装
npm i -S hexo-prism-plugin
使用
修改_config.yml
并添加以下设置:
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'default'
line_number: false # default false
custom_css: 'path/to/your/custom.css' # optional
并且确认关闭默认的高亮功能:
highlight:
enable: false
参数
mode:
- realtime (Parse code on browser in real time)
- preprocess (Preprocess code in node)
theme:
主题列表参见 https://github.com/PrismJS/prism-themes#available-themes
- default
- coy
- dark
- funky
- okaidia
- solarizedlight
- tomorrow
- twilight
- atom-dark
- base16-ateliersulphurpool.light
- cb
- duotone-dark
- duotone-earth
- duotone-forest
- duotone-light
- duotone-sea
- duotone-space
- ghcolors
- hopscotch
- pojoaque
- vs
- xonokai
line_number:
- true (Show line numbers)
- false (Default, Hide line numbers)
no_assets:
- true (Stop loading asset files)
- false (Default, load script and stylesheets files)
图片压缩
一般来说我们准备的图片素材都比较大,严重影响了博客访问的速度和体验。
这时就要介绍TinyPNG这个神奇的站点了。
这个网站支持.png
和.jpg
格式,而且一般都能将图片压缩为原来的70%-80%左右,而且很难分辨出压缩前后的区别。
其实不仅仅是网页加载的速度,本地Hexo的generate
和deploy
的速度更是快了许多。
Font Awesome 图标
Font Awesome是一套绝佳的图标字体库和CSS框架。Font Awesome字体可以提供可缩放的矢量图标,这些图标可以定制大小、颜色、阴影以及任何可用的CSS样式。
目前确定Next主题自带Font Awesome支持,尚不清楚其他Hexo主题是否自带支持。
要在网页中添加Font Awesome图标,可以在Mardown文档中以如下形式添加:
内容 <i class="fa fa-id-card"></i> 其他内容
效果为:
内容 其他内容
其中fa fa-id-card
是图标的id,可以在4.7.0
版本的官网上查到你想要的图标对应的id。
需要注意的是,Next主题中自带的Font Awesome版本是4.7.0
。这个版本是大版本4
的最后一个版本,发布于2016年末。这个版本图标的数量比现在少很多,而且缺少一些相应的修改和优化。
但是如果需要更新的同学可能需要另寻他路了。我尝试用5.11.2
的css和font文件替换.\themes\vexo\source\lib\font-awesome\
下的文件,但是似乎新版本的架构不同,亦或许是其他原因,新的图标还是不能显示。
字体
对于Vexo主题,需要修改.\themes\vexo\source\css\style.styl
文件(如果是其他主题请自寻探索)。
位于第2行的:
@font-face
font-family: 'Source Sans Pro'
src: url('../fonts/SourceSansPro.ttf')
用于加载位于..\fonts\
目录下的自定义字体。例如加载SourceSansPro.ttf
并命名为Source Sans Pro
。
我们可以修改body
下的(第11行):
这里的语句用于设置正文中的字体
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
以及.tag-code
下的(第73行):
这里的语句用于设置代码高亮部分的等宽字体
font-family: 'Roboto Mono', Monaco, courier, monospace
字体子集化方案
字蛛
如果要使用自定义的中文字体,而且字体文件过大,我们可以使用字蛛来压缩。
字蛛 + Hexo
的解决方案
Fontmin
由于字蛛与Hexo有些兼容性的问题,需要编写脚本。为简便我们使用Fontmin的应用程序来压缩字体。
如图所示的界面,我们选定需要压缩的字体文件,然后指定子集化的字符串后,就可以生成新的压缩后的字体。