README.md

@@ -10,6 +10,7 @@ Try it now, and leave me a star if you like it!
 ![screenshot](https://github.com/qqhann/hugo-primer/blob/master/images/screenshot.png)
 
 ## Features
+
 - [x] Primer css like theme
 - [x] Menu bar header
 - [x] Colored code pen
@@ -19,17 +20,34 @@ Try it now, and leave me a star if you like it!
 - [x] Social Share buttons
 
 ## Installation
+
 Clone to your theme directory:
+
 ```terminal
-$ git clone https://github.com/qqhann/hugo-primer.git themes/hugo-primer
+git clone https://github.com/qqhann/hugo-primer.git themes/hugo-primer
 
-$ hugo server --theme=hugo-primer
+hugo server --theme=hugo-primer
 ```
 
 ## Usage
 
+### exampleSite
+
+You can refer to `exampleSite/` to get started.
+Reading `exampleSite/_index.md` is good too.
+
+For a quick start:
+
+```sh
+cp -av themes/hugo-primer/exampleSite/* .
+```
+
+### Customizing
+
 #### config.toml
+
 You can configure Hugo-Primer behavior with these params in your blog's `config.toml`. Shown are defaults and most recommended configs.
+
 ```config.toml
 # config.toml
 
@@ -50,6 +68,7 @@ showFooterCredits = true
 ```
 
 That being said, below is all recommended configuration example.
+
 ```config.toml
 # config.toml
 
@@ -76,7 +95,8 @@ lastmod = ["lastmod", ":fileModTime", ":default"]
 [params]
 description = "Describe what your web page is about"
 twitter = "your_twitter_id"
-# You can use favicon by addin them manually.
+# You can use favicon by adding `favicon-64.png` to `static` directory.
+# You can also add `apple-touch-icon.png` and `pinned-icon.svg`.  
 useIcon = true
 useTwitterCard = true
 # Use MathJax.js. Disabling site-wide and you still can enable in indivisual pages
@@ -87,7 +107,9 @@ showFooterCredits = true
 ```
 
 #### archetypes/default.md
+
 It is also recommended to remove your site's `archetypes/default.md`, or copy Hugo-Primer's `archetypes/default.md` to your site.
+
 ```archetypes/default.md
 ---
 title: "{{ replace .Name "-" " " | title }}"
@@ -99,34 +121,70 @@ keywords:
 ---
 ```
 
-Example usage:
-```
+#### page-level params
+
+hugo-primer also comes with some custom page level parameters
+
+- __showDate__ (default: __true__)  
+shows the date on a post
+
+- __comments__ (default: __true__)  
+setting to false will hide disqus comments
+
+- __toc__ (default: __true__)  
+display the table of contents
+
+- __categories__ (default: __an empty list__)  
+a list of categories to display in the sidebar
+
+- __tags__ (default: __an empty list__)  
+a list of tags to display in the sidebar
+
+- __math__ (default: __false__)  
+If math.js is disabled for the site you can use this setting to enable it for a single page
+
+- __keywords__ (default: __an empty list__)  
+This adds a metatag to the page for listing keywords. This can be useful for SEO. 
+
+
+Example usage where the defaults are overridden:
+
+```md
 ---
+showdate: false
+comments: false
+toc: false
 categories:
 - Diary
 tags:
 - Shopping
 - Health
+math: true
+keywords:
+- Cheese
+- Milk
 ---
 ```
-Set keywords for seo.
+
 
 #### ruby annotation
 
 [ruby annotation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby) allows you to show pronunciation of characters. Ruby in hugo-primer is like this:
 
-![ruby](/images/ruby.png)
+![ruby](https://github.com/qqhann/hugo-primer/blob/master/images/ruby.png)
 
 You just need one line shortcodes code:
 
-```
+```html
 {{< ruby rb="深表遗憾" rt="Xi Wen Le Jian" >}}
 
 {{< ruby rb="My heart is broken." rt="I'm happy for that." >}}
 ```
 
 ## Contributing
+
 Issues and PRs are welcome. :)
 
 ## License
+
 MIT

exampleSite/config.toml

@@ -0,0 +1,29 @@
+baseURL = "https://gohugo.io/"
+author = "Steve Francia"
+paginate = 3
+languageCode = "en"
+DefaultContentLanguage = "en"
+enableInlineShortcodes = true
+footnoteReturnLinkContents = "^"
+# Above are configs from hugoBasicExample
+
+title = "Hugo-Primer Theme"
+theme = "hugo-primer"
+hasCJKLanguage = true
+summaryLength = 70
+pygmentsCodeFences = true
+pygmentsUseClasses = true
+googleAnalytics = "UA-12345678-0"
+disqusShortname=""
+copyright = "©Qiushi Pan 2018-2019"
+
+[params]
+description = "Hugo-Primer theme's example site"
+twitter = ""
+useIcon = false
+useTwitterCard = true
+# exampleSite must not have js share widget: #36
+# shareTo = ["Twitter", "Hatena", "Facebook", "Pocket"]
+shareTo = []
+showFooterCredits = true
+math = true

exampleSite/content/_index.md

@@ -0,0 +1,31 @@
+---
+title: "Hugo-Primer"
+type: "top"
+menu: "main"
+weight: 1
+---
+
+**A simple and beautiful Hugo theme based on GitHub's Primer CSS**
+
+This theme would be a perfect fit if you are used to GitHub style pages.  
+Hugo-Primer is a theme based on GitHub style css: Primer, and adds some blog like features onto it.
+
+Visit the [homepage](https://github.com/qqhann/hugo-primer) to try it now, and leave me a star if you like it!
+
+## ExampleSite
+
+Use the `exampleSite` as a reference, or copy to quick satart.
+
+As you navicate through the exampleSite menu,
+"About" and "Blog Example" contents are from hugoBasicExample provided by hugo.
+
+"Hugo-Primer" is provided by hugo-primer.
+And all of them are optimized to demonstrate how to use hugo-primer.
+
+Notice how we utilize `menu: "main"` in the frontmatter.
+And `weight: 1` decides the order they appear in the nav bar.
+
+Finally, `type: "top"` is a special indicatior.
+It is supposed to be used at top page.
+This page use it too.
+As you might notice, "top" page will not have toc like other single type page.

exampleSite/content/about.md

@@ -0,0 +1,27 @@
++++
+title = "About"
+description = "Hugo, the world’s fastest framework for building websites"
+date = "2019-02-28"
+aliases = ["about-us","about-hugo","contact"]
+author = "Hugo Authors"
+menu = "main"
+weight = 3
++++
+
+Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.
+
+Hugo makes use of a variety of open source projects including:
+
+* <https://github.com/russross/blackfriday>
+* <https://github.com/alecthomas/chroma>
+* <https://github.com/muesli/smartcrop>
+* <https://github.com/spf13/cobra>
+* <https://github.com/spf13/viper>
+
+Hugo is ideal for blogs, corporate websites, creative portfolios, online magazines, single page applications or even a website with thousands of pages.
+
+Hugo is for people who want to hand code their own website without worrying about setting up complicated runtimes, dependencies and databases.
+
+Websites built with Hugo are extremelly fast, secure and can be deployed anywhere including, AWS, GitHub Pages, Heroku, Netlify and any other hosting provider.
+
+Learn more and contribute on [GitHub](https://github.com/gohugoio).

exampleSite/content/blog/_index.md

@@ -0,0 +1,5 @@
+---
+title: "Blog Example"
+menu: "main"
+weight: 2
+---

exampleSite/content/blog/emoji-support.md

@@ -0,0 +1,46 @@
++++
+author = "Hugo Authors"
+title = "Emoji Support"
+date = "2019-03-05"
+description = "Guide to emoji usage in Hugo"
+tags = [
+    "emoji",
+]
++++
+
+Emoji can be enabled in a Hugo project in a number of ways.
+<!--more-->
+The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
+
+To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
+
+<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
+<br>
+
+The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
+
+***
+
+**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
+
+{{< highlight html >}}
+.emoji {
+font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
+}
+{{< /highlight >}}
+
+{{< css.inline >}}
+<style>
+.emojify {
+ font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
+ font-size: 2rem;
+ vertical-align: middle;
+}
+@media screen and (max-width:650px) {
+    .nowrap {
+ display: block;
+ margin: 25px 0;
+}
+}
+</style>
+{{< /css.inline >}}