menu XUJINKAI 的个人主页
create settings
home
主页
list
全部博文
bookmark
个人Wiki
open_in_new
  • Page
  • assistant_photo
    个人项目
    tag_faces
    捐赠
    person
    关于

    本博客网站介绍

    Tags: jekyll , 博客

    特点

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

    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

    可填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值。


    Disqus评论加载中。。。