Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
148 lines (86 sloc) 4.44 KB
permalink display title tags emotag date comment layout component
/posts/this-blog-v2
sticky
本博客网站介绍
jekyll 博客
🏠
2018-07-03 17:44:45 +0800
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值。

You can’t perform that action at this time.