jekyll

• style 1

• Jekyll
  • theme
  • full-text search
  • cheat-list, quick commands
  • (web design) examples
  • liquid
    • jekyll date
• html and CSS
  • styling
    • color
    • position
    • font
  • symbols
• markdown

Jekyll

theme

http://jekyllbootstrap.com/usage/jekyll-theming.html#toc_5

• change theme …

rake theme:switch name="twitter"
rake theme:switch name="mark-reid"

• customize theme: Theme layouts are contained in ./_includes/themes/THEME-NAME. It is important that you edit files in the theme directory rather than _layouts because switching themes will overwrite files in the _layout directory and you will lose your changes. The main point here is keeping themes modular; this way editing one does not affect the other.

• Adding Templates: add extra template files to _layouts in order to customize your blog.

• some themes

  • http://aronbordin.com/neo-hpstr-jekyll-theme/

full-text search

• general instruction github details, demo

• Search plugin for github pages problem (search works locally, but after uploading, it does not work on github site): caused by jekyll ‘_plugin’ issue (more on stack, jekyll official explanation)

    automatically gem install ..., then
    manually:
    (1) copy _site/js/ to root
    (2) copy jekyll_lunr_js_search.rb to _plugin
    (3) manually keep (copy) _site/js/index.json consistent with /js/index.json
  

• updated instruction

    $ cd ~/site_directory
    $ rm ./js/index.json
    # wait for index regeneration (server on)
    $ cp _site/js/index.json ./js/
  

cheat-list, quick commands

http://jekyllbootstrap.com/usage/jekyll-quick-start.html#toc_0

• create a post

$ rake post title="Hello World"

• create a page

$ rake page name="about.md"
# nested page
$ rake page name="pages/about.md"

• markdown
  https://guides.github.com/features/mastering-markdown/
  https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

  • image

<img src="/img/research/len-fig1.pdf" height="180">

• create table of contents

* TOC
{:toc}

• create links between pages

[local post](/networking/2015/10/05/the-softrouter-architecture/)
[羲之爱鹅](/cn.index.html)

(web design) examples

• http://johnnycoder.com/blog/
• http://mrloh.se/
• http://reyhan.org/
• http://damonbauer.me
• http://haisum.github.io/ ✓

liquid

jekyll date

http://alanwsmith.com/jekyll-liquid-date-formatting-examples

html and CSS

styling

inline styling

<h1 style="color:blue;">This is a Blue Heading</h1>

fully styled horizontal navigation bar example

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced

color

color list

http://www.computerhope.com/htmcolor.htm http://www.imagemagick.org/script/color.php http://www.w3schools.com/cssref/css_colors.asp

color pallete generator (from image)

http://www.cssdrive.com/imagepalette/index.php

position

centering things

http://www.w3.org/Style/Examples/007/center.en.html#hv3
http://www.w3.org/Style/Examples/007/center.en.html

font

https://en.wikipedia.org/wiki/Font_family_(HTML)
http://iosfonts.com

symbols

Unicode Characters (good)

http://dmmarks.com/UnicodeChars.html✓

http://www.sabinanore.com/design/html-special-symbols/

https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

html special symbols

Unicode Entity Codes for Math

http://www.w3schools.com/charsets/ref_utf_arrows.asp

https://www.utexas.edu/learn/html/spchar.html

      non-breaking space

Superscript and Subscript

Code: x<sup>x+1</sup>	Result: xx+1
Code: x<sub>y+1</sub>	Result: xy+1

markdown

http://kramdown.gettalong.org/index.html
http://milanaryal.com/2015/writing-on-github-pages-and-jekyll-using-markdown/