---
permalink: /posts/this-blog-v2
title: 本博客网站介绍
tags: 博客折腾
date: 2018-07-03 17:44:45 +08:00
last_modified_at: 2018-08-03
---

# 特点

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

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

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

# 使用

## 创建、管理博文

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

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


## LaTeX 支持

在页面的 Metadata 中添加

```
component: katex
```

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

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

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


## Metadata 选项

### 通用  

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

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

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

#### drawer-close: false  
默认为false；为true时左侧菜单默认收回。

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


### 页面（index布局）

继承自frame

#### sidebar:  
可填`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](https://www.mdui.org/)

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

- #### 后台 [netlify-cms](https://github.com/netlify/netlify-cms)

让GitHub Pages拥有后台管理界面，支持自定义metadata字段。[这篇文章](/posts/netlify-as-github-pages-cms)详细介绍了如何设置后台页面。

- #### 样式

  - [github-markdown.css](https://github.com/sindresorhus/github-markdown-css) GitHub风格的markdown样式

  - [rouge.css](https://github.com/jneen/rouge) 代码高亮 （需要自行引入css，使用`rougify style monokai.sublime > rouge-monokai.css`导出css文件，或去找[现成的文件](https://github.com/XUJINKAI/XUJINKAI.github.io/blob/master/static/render/rouge-monokai.css)添加到网站中）

  - [Anchorjs](https://www.bryanbraun.com/anchorjs/) 为段落添加hash tag，方便分享

  - [KaTex](https://khan.github.io/KaTeX/) 公式渲染

  - [Tocbot](https://tscanlin.github.io/tocbot/) 自动生成目录

- #### JS渲染：

在线编辑页面需要用到 [kramed](https://github.com/GitbookIO/kramed), [highlightjs](https://highlightjs.org/) 这两个库来代替jekyll编译。

## 页面结构

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

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

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

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


## 加载额外的静态资源

静态资源在/static文件夹，并按照库的名字划分（而不是后缀）。  
在[/layouts/frame.html](https://github.com/XUJINKAI/XUJINKAI.github.io/blob/master/_layouts/frame.html)文件中通过读取`component`属性来控制静态文件的导入。

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


# 欢迎fork

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

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