Today, I update the theme with some new features. Welcome to use freshman21 2.0 version(gh-pages branch).

gh-pages branch new features :

• Google search
• Google analytics
• Read more mode
• Open Graph META Tags
• Microdata(schema.org)
• back to top button
• font awesome icon

master branch new features :

• Open Graph META Tags
• Microdata(schema.org)

The main difference between master and gh-pages: only one Javascript (Mathjax) be included in master branch.

Master branch is a more purified html+css framework than gh-pages branch.

Clone master branch:

` git clone https://github.com/yulijia/freshman21.git -b master –single-branch`

Clone gh-pages branch:

git clone https://github.com/yulijia/freshman21.git -b gh-pages --single-branch

The config.yml file in the Freshman21 theme includes five parts.

First part is the site info.

title: Freshman21 # blog title
tagline: Another Jekyll theme, Freshman twenty-first # blog sub-titile
author: Lijia YU # author name
email: yu@lijiayu.net # author email
description: "Freshman21 is a Jekyll blog theme." # You can edit this line in _config.yml. It will appear in your document head meta and in 
your feed.xml site description
keywords: "Jekyll, theme, Freshman21" # html meta keywords
baseurl: "/freshman21" # the subpath of your site, e.g. /blog
url: "http://yulijia.net/freshman21" # the base hostname & protocol for your site

Part 2, Personal info and site tools info, twitter, github, aboutme and aboutme_photo only appears on the sidebar aboutme-box, you can Hide in two ways ^[1]:

twitter_username: #your twitter handle  
github_username:  #your github account
disqus_shortname: #disqus shortname
favicon:     "images/favicon.ico"
aboutme: Hi, this is Lijia Yu. I made the Freshman21 theme. Please enjoy it. # these are shown on aboutme-box(sidebar).
aboutme_photo: https://i.imgur.com/15BT1.jpg # your personal photo.

Part3, Site setting:

ShowContactInfo: "True" # Personal Info (twitter,github,email) can be seen on aboutme-sidebar, those info only shown where ShowContactInfo == True
default_column: "two" # blog style: two columns, if default_column != "two", you will see a one column blog.
default_locale: "en" # blog sidebar language set, only include: English(en) and Chinese (cn)

Part4, Blogroll info, only name tags can shown on the page.

Blogroll:
      - name: Freshman
        href: http://yulijia.net/freshman
        title: Another Jekyll blog theme
      - name: author's website
        href: http://yulijia.net/
        title: Lijia Yu's website

Part5, Build settings

markdown: kramdown
highlighter: pygments # highlight
paginate: 5  # how many post can seen in the main page

=====

• [1], you can set those info at Part3 or just delete the aboutme.html at sidebar.html in _include folder.

<div class="col-sm-2">
  <!--{ % include Aboutme.html % }-->
   { % include Copyright_Notice.html % }
   { % include Recent_Posts.html % }
   { % include Categories.html % }
   { % include Tags.html % }
   { % include Blogroll.html % }
   { % include Archives.html % }
</div>

1.The structure of freshman21 theme

You can see the simplest way of adding a page is just to add an HTML ( or markdown ) file in the root directory with a suitable name for the page you want to create. For example, aahome.md is the homepage link, about.md is the about page.

All sidebar boxes html files are in the _include directory, their name begin with upper case. You can chose which sidebar boxes appears in the main page on the sidebar.html in the _includes directory.

.
|-- a_home.md                 # home page link at navigation bar
|-- b_about.md                # about link at navigation bar
|-- c_archives.md             # archives link at navigation bar
|-- _config.yml
|-- css
|   `-- main.scss
|-- d_categories.md           # categories link at navigation bar 
|-- e_tags.md                 # tags at main navigation bar
|-- feed.xml                  # RSS at main navigation bar
|-- f_guestbook.md            # guest book like at navigation bar
|-- images
|   `-- favicon.ico           # here is your website favicon
|-- _includes
|   |-- Aboutme.html          # right column sidebar content
|   |-- Archives.html         # right column sidebar content
|   |-- Blogroll.html         # right column sidebar content
|   |-- Categories.html       # right column sidebar content
|   |-- comments.html         # right column sidebar content
|   |-- Copyright_Notice.html # right column sidebar content
|   |-- footer.html
|   |-- header.html
|   |-- head.html
|   |-- page_pagination.html
|   |-- post_pagination.html
|   |-- Recent_Posts.html     # right column sidebar content
|   |-- sidebar.html          # you can set you own sidebar content in here
|   `-- Tags.html             # right column sidebar content
|-- index.html
|-- _layouts
|   |-- default.html
|   |-- page.html
|   `-- post.html
|-- LICENSE
|-- _posts
|   |-- 2013-10-10-milu.md
|   |-- 2014-12-13-simple-post.md
|   |-- 2014-12-18-how-to-install.md
|   |-- 2014-12-19-freshman21-structure.md
|   |-- 2014-12-19-how-to-set-the-config-file.md
|   `-- 2015-03-31-readme.md
|-- README.md
`-- _sass
    |-- _base.scss
    |-- _layout.scss
    |-- _syntax-highlighting-native.scss
    `-- _syntax-highlighting.scss

2.Structure with Named folders containing index HTML files

There is nothing wrong with the above method, however some people like to keep their URLs free from things like filename extensions. To achieve clean URLs for pages using Jekyll, you simply need to create a folder for each top-level page you want, and then place an index.html file in each page’s folder. You can find the more detail at Jekyll documentation. Here is my own blog structure with page-folders to contain each pages.

.
├── _backup
│   ├── en.tar.gz
│   └── style.css
├── categories                              # => http://yulijia.net/en/categories/ 
│   └── index.md
├── _config.yml
├── css
│   └── main.scss
├── feed                                    # => http://yulijia.net/en/feed/index.xml
│   └── index.xml
├── guestbook                               # => http://yulijia.net/en/guestbook/
│   └── index.md
├── home.md
├── _includes
│   ├── Aboutme.html
│   ├── Archives.html
│   ├── Blogroll.html
│   ├── Categories.html
│   ├── comments.html
│   ├── Copyright_Notice.html
│   ├── footer.html
│   ├── header.html
│   ├── head.html
│   ├── page_pagination.html
│   ├── post_pagination.html
│   ├── Recent_Posts.html
│   ├── sidebar.html
│   └── Tags.html
├── index.html
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts
│   ├── 2011-07-22-hello-world.md
│   ├── 2011-08-06-how-to-calculate-word-frequencies-with-r.md
│   ├── 2011-08-18-should-draco-be-effective-against-virtually-all-viruses.md
│   ├── 2011-10-21-why-viruses-produce-long-dsrna-but-not-endogenous-ones.md
│   ├── 2012-03-22-100-things-bioinformatics-students-should-do-before-graduating.md
│   ├── 2012-10-08-a-new-site.md
│   ├── 2012-10-09-github-pages.md
│   ├── 2012-10-22-a-conference-of-Genomics-and-Epigenomics.md
│   ├── 2012-10-23-CSHL-Asia-interesting-talks-on-genomics-and-epigenomics.md
│   └── 2013-01-30-how-to-get-RefSeq-gene-annotations-from-UCSCdatabase.md
├── README.md
├── _sass
│   ├── _base.scss
│   ├── _layout.scss
│   └── _syntax-highlighting.scss
└── tags
    └── index.md

3. How to change the highlight style?

This theme’s default highlighter is pygments.

To change the highlight style, you should install pygments, and generate the css style which you wanted with code

pygmentize -S default -f html > freshman/_sass/_syntax-highlighting.scss

Please make sure, add .highlight { at the head and } at the end of file _syntax-highlighting.scss.

See more,

1. Pygments Supported languages
2. Pygments online deme

How to install Freshman theme?

# please make sure you have already installed git tools and ruby tools(gem)
$ gem install sass
$ gem install jekyll
$ git clone https://github.com/yulijia/freshman21.git

Then, change the folder name to you own github page name, forexample

 $ mv freshman thisisyouname.github.io

• Heading
• Body text
• Blockquotes
• List Types
  • Ordered Lists
  • Unordered Lists
• Tables
• Code Snippets
  • highlight with line number.
  • highlight using triple backticks
• \(\LaTeX\)
• <q> tag

This is a sample post.

Below is just about everything you’ll need to style in the theme. Check the source code to see the many embedded elements within paragraphs.

Heading

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

Body text

This is strong.

This is figure

This is emphasized.

53 = 125. Water is H₂O.

The New York Times (That’s a citation).

Underline.

HTML and CSS are our tools.

Blockquotes

Justification: This species is listed as Extinct in the Wild, as all populations are still under captive management. The captive population in China has increased in recent years, and the possibility remains that free-ranging populations can be established some time in the near future. When that happens, its Red List status will need to be reassessed.

I follow up the quest. Despite of day and night and death and hell.

-- Idylls of the King, Tennyson

List Types

Ordered Lists

1. Item one
   1. sub item one
   2. sub item two
   3. sub item three
2. Item two

Unordered Lists

• Item one
• Item two
• Item three

Tables

Code Snippets

Syntax highlighting via Pygments

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

highlight with line number.

1
2
3
def foo
  puts 'foo'
end

highlight using triple backticks

a=1:10
for(i in a)
{
  print(i)
}

\(\LaTeX\)

you can use latex with double $$

<q> tag

here is a <q> q tag </q>

here is a q tag