特点

在线编辑及后台管理页面、博文可置顶或在首页隐藏。

TOC(自动目录)、段落Anchor、加强的标签功能，以及为小屏优化体验。

通过metadata来控制网页样式，以及要加载的静态资源。

使用

创建、管理博文

本博客有在线编辑页面，在这里预览到的效果与最终编译好的效果非常接近。

写好后，可以复制到后台页面发布，后台支持自定义字段，无需手写metadata。

LaTeX 支持

在页面的 Metadata 中添加

component: katex

然后就可以使用<tex></tex>来定义公式。

例如输入 <tex>c = \pm\sqrt{a^2 + b^2}</tex>

则会输出 c = \pm\sqrt{a^2 + b^2}

Metadata 选项

通用

指frame布局，其他布局都继承自frame布局。

layout: post

可选 post、index、frame，说明见下文页面结构

component:

加载项，多个加载项使用空格分开
jquery mdui 所有布局默认导入；
markdown anchor 在post布局已导入；
katex 根据需要选填。

drawer-close: false

默认为false；为true时左侧菜单默认收回。

permalink: 【生成链接地址，建议填入】
title: 【网页标题】

页面（index布局）

继承自frame

可填fixed、nextprev、toc、tags、bio，多个内容以空格分开
fixed指边栏固定(position: fixed)

comment: true

显示评论框，填true或false

博文（Post）

继承自index，所以三个布局的字段都可以使用

display: normal

可选 normal、sticky（置顶）、hide（首页隐藏）

emotag: 😊

作为tag的补充，主要用于突出某些博文；其实填任何内容都行，但填一个emoji效果最好。

tags: 【博文标签】
date: 【日期，格式：2018-07-03 17:44:45 +08:00】

技术

用到的库

主题 MDUI

Material Design UI库。这次脱离了Bootstrap，使用MD风格。

后台 netlify-cms

让GitHub Pages拥有后台管理界面，支持自定义metadata字段。这篇文章详细介绍了如何设置后台页面。

样式
- github-markdown.css GitHub风格的markdown样式
- rouge.css 代码高亮（需要自行引入css，使用rougify style monokai.sublime > rouge-monokai.css导出css文件，或去找现成的文件添加到网站中）
- Anchorjs 为段落添加hash tag，方便分享
- KaTex 公式渲染
- Tocbot 自动生成目录
JS渲染：

在线编辑页面需要用到 kramed, highlightjs 这两个库来代替jekyll编译。

页面结构

在_layouts目录中，有frame、index、post三种布局。

frame 中有统一的静态资源加载，并定义了标题栏和侧边栏。
content外就是body，提供最大自由度，如在线编辑页面就使用了frame布局。

index 布局继承自frame，分为左右两栏。
左栏内容由content和comment组成；
右栏内容通过sidebar字段定义，导入_includes目录内容。

post 布局继承自index，并定义右栏为toc。为博文默认布局。

加载额外的静态资源

静态资源在/static文件夹，并按照库的名字划分（而不是后缀）。
在/layouts/frame.html文件中通过读取component属性来控制静态文件的导入。

这种方式可以分离页面文件和资源链接，统一管理，并防止重复引用。
此外，还可以根据需要添加脚本完成额外的工作，例如定义上文所说的tex标签。

欢迎fork

本博客代码许可证随意，愿意的话可以保留本站地址，或者加个友链支持。

fork整个博客的话，请务必修改_config.yml文件中的ga和disqus值。

本博客网站介绍

特点

使用