Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
permalink display title tags emotag date update comment layout component
/posts/this-blog-v2
normal
本博客网站介绍
jekyll
🏠
2018-07-03 17:44:45 +0800
2018-08-03
true
post
katex

特点

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

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

可选 postindexframe,说明见下文页面结构

component:

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

drawer-close: false

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

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

页面(index布局)

继承自frame

sidebar:

可填fixednextprevtoctagsbio,多个内容以空格分开
fixed指边栏固定(position: fixed)

comment: true

显示评论框,填truefalse

博文(Post)

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

display: normal

可选 normalsticky(置顶)、hide(首页隐藏)

emotag: 😊

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

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

技术

用到的库

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

让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文件中的gadisqus值。