Ynjxsjmh/ynjxsjmh.github.io

Table of Contents

• Introduction
• [Post front matter](#post-front-matterhttpsjekyllrbcomdocsfront-matter)
• Tips for customization
• Possible Error
• Tips for myself
• Further work
• More themes

Introduction

Fork from qiubaiying.github.io

Post front matter

---
layout:     post
title:      
subtitle:
date:       2020-02-29 13:26
updated:    last updated time
author:     
header-img: img/post-default-bg.jpg
category:   []
tags:       []
link:       转载连接
type:       markdown(default) | asciidoc | readtheorg | thought
toc:        Designed for asciidoc. If you use `toc:left` in asciidoc, fill it with `left`. Otherwise, you don't need to define this value.
pin:        true/false
---

Tips for customization

Some files have a minified version, which is used by default. If you modify something in non-minified file and find it is not working as you expect, please check if you modify the corresponding minified file.

https://jekyllrb.com/docs/ruby-101/

Liquid Introduction

• Jekyll cheatsheet
• Directory Structure

├── _config.yml: Variables

├── _layouts: https://www.jekyll.com.cn/tutorials/convert-site-to-jekyll/#how-layouts-work

│ └── default.html

└── index.html: https://jekyllrb.com/docs/pagination/

Possible Error

Liquid Exception: Liquid syntax error (line **): Variable '{{1,2,3}' was not
 properly terminated with regexp: /\}\}/ in ...

imathis/octopress#466

Replace {{ with { { and }} with } }

Tips for myself

Under blog sourcecode folder, run jekyll serve or jekyll s in cmd then browse http://127.0.0.1:4000/ to preview the changes.

Further work

• Archive, Categories, Tags: https://brucezhaor.github.io/
• Support math using MathJax: https://pkuwwt.github.io/linux/2013-12-03-jekyll-using-mathjax/ && https://segmentfault.com/a/1190000008317350
• Support math using KaTeX: https://xuc.me/blog/katex-and-jekyll/ && https://karas.io/blog/math-support-with-katex-on-github-pages/ && https://stackoverflow.com/a/45301641/10315163
• Show random old saying in page header: https://program-think.blogspot.com/ -> https://program-think.blogspot.com/2014/08/maxim.html?q=%E7%8C%AA%E6%A0%8F%E7%9A%84%E7%90%86%E6%83%B3 && https://jekyllcodex.org/without-plugin/randomize/
• Show random poetry in page footer: https://github.com/chinese-poetry/huajianji && https://github.com/chinese-poetry/chinese-poetry
• Accurate post time to minute: https://learn.cloudcannon.com/jekyll/date-formatting/
• Show access number
• Show total pages
• Show tag cloud: https://www.oukohou.wang/ || https://jovandeginste.github.io/2016/05/04/add-a-tag-cloud-to-my-jekyll-site.html
• Add article info: https://macplay.github.io/ || http://moxfive.xyz/
• Picture changes when clicked: http://www.ruanyifeng.com/home.html
• Render HTML exported from Org and AsciiDoc
• Make URL clickable
• Change navbar content color according to background image color: https://stackoverflow.com/questions/32928517 -> https://github.com/kennethcachia/Background-Check
• Hide timestamp in image
• Article preview: http://moxfive.xyz/
• Render preview content: http://moxfive.xyz/
• Slide: https://raw.githubusercontent.com/scateu/scateu.github.io/master/_posts/2016-12-30-reveal-demo.md
• Pin an article: https://github.com/ibrado/jekyll-stickyposts
• Clickable right side menu: https://github.com/poole/lanyon || https://github.com/cloudflare-apps/SideNav
• agnoster theme: https://github.com/FrancisMurillo/francismurillo.github.io
• Button to change among 简/繁/En
• Icon
  • Brand icon:
    • Font awesome: https://fontawesome.com/icons
    • https://github.com/olOwOlo/hugo-theme-even
    • https://github.com/MOxFIVE/hexo-theme-yelee
• Create a layout for thought: https://www.changhai.org/

---

• Stop targeting tags: https://frontstuff.io/you-need-to-stop-targeting-tags-in-css
• Use External CSS/JS
• Upgrade to Bootstrap v4
• Upgrade to less/sass: https://frontstuff.io/ -> https://github.com/sarahdayan/frontstuff

Plugins

Jekyll without plugins

Jekyll Plugins | Find Plugins for Jekyll Blogs

planetjekyll/awesome-jekyll-plugins - https://planetjekyll.github.io/plugins/top

• Back to top: https://brucezhaor.github.io/
• Toc: https://talk.jekyllrb.com/t/any-tutorials-for-styling-table-of-content/4052
  • Multi-level toc: https://github.com/ghiculescu/jekyll-table-of-contents || Huxpro/huxpro.github.io#116 (comment)
  • Word wrap/Overflow on too long toc item
  • Toc hover/float left
  • Keep toc in article container: https://github.com/olOwOlo/hugo-theme-even
  • Header and ToC mutual back: https://github.com/Ynjxsjmh/toc-backref
• Add header collapse: https://github.com/szhielelp/md-post-header-collapse
• Picture preview: https://lucienhsu.github.io
• Search: https://lucienhsu.github.io -> https://github.com/androiddevelop/jekyll-search && https://www.oukohou.wang/
• Highlight search keywords in result
• Add donation page: https://awang0608.github.io/ -> https://github.com/greedying/tctip
• Non aggresive donation link: https://www.oukohou.wang/
• Show reading progress bar: https://github.com/szhielelp/JekyllTheme-ProjectGaia
• Fancy Box: http://fancyapps.com/fancybox/
• Share: https://github.com/overtrue/share.js/ || https://jekyllcodex.org/without-plugin/share-buttons/
• anchorjs: https://github.com/bryanbraun/anchorjs
• Show read time: https://jekyllcodex.org/without-plugin/reading-time-indicator/ || http://lsfalimis.github.io/customise-hpstr-jekyll-theme/#decimal
• Media
  • Embed web mp4
    1. Use iframe: https://stackoverflow.com/questions/10529859
    2. Use https://jekyllcodex.org/without-plugin/open-embed/ -> Synatx: Just paste path-to-video-file.mp4 in your markdown file. eg: https://youtu.be/iMvdG4guQf4.
    3. Search Jekyll Embed mp4 in Google
  • Embed local vedio: Maybe html audio/video elements example
  • Embed mp3
    1. Use https://jekyllcodex.org/without-plugin/open-embed/ -> Synatx: Just paste path-to-audio-file.mp3 in your markdown file, either relative or absolute path is ok. eg: https://www.web3.wang/assets/audio/napianhai.mp3.
    2. Search jekyll embed mp3 in Google

More themes

Except Jekyll. there exist a bunch of blog frameworks for you to choose:

• Hugo
• Hexo
• Nikola
  • https://github.com/macplay/macplay.github.io
• pelican
  • https://github.com/honmaple/honmaple.github.io

Want more?

Here list some blog themes I admire

• Org Mode 生成静态站点 Site
• ashfinal
• Tianyun's Blog
• oukohou
• Frank Lin
• mmistakes -> https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/

Every theme from Mark Otto, the creator of Bootstrap, is worth reading. The most popular theme - lanyon developed by him is used by Emacs guru Oleh Krehel (AKA abo-abo).