BOT Frame

BOT Frame is a pure browser-rendering Blog Framework for GitHub Pages, based on BOT Mark.

Features

• pure JavaScript, pure browser-rendering in your browser
• responsive page design (desktop, mobile and print)
• Support BOT Mark 👈
  • [TOC]
  • number headings
  • LaTeX math (powered by KaTeX)
  • citation
  • cross-reference
  • slides
  • style-setters

Get Started

• Write static/config.json for your basic info
• Design static/home.md as your home page
• Replace articles in articles/ with yours
• Write articles/archive.md as the content table of your articles
• Update favicon.ico as your icon
• Upload to your GitHub Pages repository
• Enjoy it 😉

BOT Frame

static/config.json

Set name, github, email, (phone), pages (navigation), footer to yours.

{
  "name": "name_in_title",
  "contact": {
    "name": "name_in_contact_pane",
    "github": {
      "text": "xxx",
      "link": "https://github.com/xxx",
      "img": "/static/github.svg"
    },
    "email": {
      "text": "[email protected]",
      "link": "mailto:[email protected]",
      "img": "/static/email.svg"
    },
    "phone": {
      "text": "+86-xxxx",
      "link": "tel:+86-xxx",
      "img": "/static/phone.svg"
    }
  },
  "pages": {
    "🏠": "/",
    "📝": "/articles/"
  },
  "footer": [
    "<a href='https://xxx.github.io'>https://xxx.github.io</a>",
    "xxx, 2017"
  ]
}

Articles Page

• BOT Frame will detect if the page is an article or archive page.
  • without post query string => load articles/archive.md as an archive
  • with a post query string => add extension .md to post, and load that file as an article
• BOT Frame will resolve correct paths for relative articles and images.
  • articles => relative markdown file path that ending with .md
  • miscellaneous => relative file path that NOT ending with .md
  • images => relative image path inside <img> tags
• BOT Frame will detect article title of a markdown file.
  • starting with H1 heading => set heading text as title, move first two elements of article to left pane, and remove contact section
  • NOT starting with H1 => set filename as title, and keep contact section
• Article page supports print style setting by adding style=STYLES to query string.
  • cover => print left pane as a single cover page
  • toc-page-break => page break after TOC
  • two-column => two column style (except left pane)
  • STYLE+STYLE <= style strings can be concatenated by +

Credits

• Markdown parser by
  • chjj - orginal
  • ViktorQvarfordt - patch
  • BOT Man - flavor
• Original theme by orderedlist
• GitHub markdown css by sindresorhus