Import the tutorial.
This commit is contained in:
Cotes Chung
parent
b845c829f6
commit
daaad546bb
4 changed files with 388 additions and 0 deletions
157
_posts/2019-08-08-text-and-typography.md
Normal file
157
_posts/2019-08-08-text-and-typography.md
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
---
|
||||
title: "Text and Typography"
|
||||
date: 2019-08-08 11:33:00 +0800
|
||||
categories: [Blogging, Demo]
|
||||
tags: [typography]
|
||||
---
|
||||
|
||||
This Jekyll template totally compatible with Markdown syntax. Now, let's take a look for the text and typography in this theme.
|
||||
|
||||
## Titles
|
||||
|
||||
***
|
||||
# H1
|
||||
|
||||
<h2 data-toc-skip>H2</h2>
|
||||
|
||||
<h3 data-toc-skip>H3</h3>
|
||||
|
||||
#### H4
|
||||
|
||||
***
|
||||
|
||||
## Paragraph
|
||||
|
||||
I wandered lonely as a cloud
|
||||
|
||||
That floats on high o'er vales and hills,
|
||||
|
||||
When all at once I saw a crowd,
|
||||
|
||||
A host, of golden daffodils;
|
||||
|
||||
Beside the lake, beneath the trees,
|
||||
|
||||
Fluttering and dancing in the breeze.
|
||||
|
||||
## Block Quote
|
||||
|
||||
> This line to shows the Block Quote.
|
||||
|
||||
## Tables
|
||||
|
||||
|Company|Contact|Country|
|
||||
|:---|:--|---:|
|
||||
|Alfreds Futterkiste | Maria Anders | Germany
|
||||
|Island Trading | Helen Bennett | UK
|
||||
|Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy
|
||||
|
||||
## Link
|
||||
|
||||
[http://127.0.0.1:4000](http://127.0.0.1:4000)
|
||||
|
||||
|
||||
## Footnote
|
||||
|
||||
Click the hook will locate the footnote[^footnote].
|
||||
|
||||
|
||||
## Image
|
||||
|
||||
|
||||
|
||||
|
||||
## Inline code
|
||||
|
||||
This is an example of `Inline Code`.
|
||||
|
||||
|
||||
## Code Snippet
|
||||
|
||||
### Common
|
||||
|
||||
```
|
||||
This is a common code snippet, without syntax highlight and line number.
|
||||
```
|
||||
|
||||
### Specific Languages
|
||||
|
||||
#### Console
|
||||
|
||||
```console
|
||||
$ date
|
||||
Sun Nov 3 15:11:12 CST 2019
|
||||
```
|
||||
|
||||
|
||||
#### Terminal
|
||||
|
||||
```terminal
|
||||
$ env |grep SHELL
|
||||
SHELL=/usr/local/bin/bash
|
||||
PYENV_SHELL=bash
|
||||
```
|
||||
|
||||
#### Ruby
|
||||
|
||||
```ruby
|
||||
def sum_eq_n?(arr, n)
|
||||
return true if arr.empty? && n == 0
|
||||
arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
|
||||
end
|
||||
```
|
||||
|
||||
#### Shell
|
||||
|
||||
```shell
|
||||
if [ $? -ne 0 ]; then
|
||||
echo "The command was not successful.";
|
||||
#do the needful / exit
|
||||
fi;
|
||||
```
|
||||
|
||||
#### Liquid
|
||||
|
||||
{% raw %}
|
||||
```liquid
|
||||
{% if product.title contains 'Pack' %}
|
||||
This product's title contains the word Pack.
|
||||
{% endif %}
|
||||
```
|
||||
{% endraw %}
|
||||
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<div class="sidenav">
|
||||
<a href="#contact">Contact</a>
|
||||
<button class="dropdown-btn">Dropdown
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-container">
|
||||
<a href="#">Link 1</a>
|
||||
<a href="#">Link 2</a>
|
||||
<a href="#">Link 3</a>
|
||||
</div>
|
||||
<a href="#contact">Search</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Horizontal Scrolling**
|
||||
|
||||
```html
|
||||
<div class="panel-group">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" id="{{ category_name }}">
|
||||
<i class="far fa-folder"></i>
|
||||
<p>This is a very long long long long long long long long long long long long long long long long long long long long long line.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
## Reverse Footnote
|
||||
|
||||
[^footnote]: The footnote source.
|
||||
108
_posts/2019-08-08-write-a-new-post.md
Normal file
108
_posts/2019-08-08-write-a-new-post.md
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
---
|
||||
title: "Write a new Post"
|
||||
date: 2019-08-08 14:10:00 +0800
|
||||
categories: [Blogging, Tutorial]
|
||||
tags: [writting]
|
||||
---
|
||||
|
||||
## Naming and Path
|
||||
|
||||
Create a new file name with the format `YYYY-MM-DD-title.md` then put it into `_post` of the root directory.
|
||||
|
||||
## Front Matter
|
||||
|
||||
Basically, you need to fill the [Front Matter](https://jekyllrb.com/docs/front-matter/) as below at the top of the post:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: TITLE
|
||||
date: YYYY-MM-DD HH:MM:SS +/-TTTT
|
||||
categories: [TOP_CATEGORIE, SUB_CATEGORIE]
|
||||
tags: [TAG]
|
||||
---
|
||||
```
|
||||
|
||||
> **Note**: The posts' ***layout*** has been set to `post` by default, so there is no need to add the variable ***layout*** in Front Matter block.
|
||||
|
||||
### Categories and Tags
|
||||
|
||||
The pages for all the categories and tags are placed in the `categoreis` and `tags` respectively.
|
||||
|
||||
Let's say there is a post with title `The Beautify Rose`, it's Front Matter as follow:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "The Beautify Rose"
|
||||
categories: [Plant]
|
||||
tags: [flower]
|
||||
---
|
||||
```
|
||||
|
||||
> **Note**: `categories` is designed to contain up to two elements.
|
||||
|
||||
|
||||
## Table of Contents
|
||||
|
||||
By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml` and set the variable `toc` to `false`. If you want to turn off TOC for specific post, add the following to post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
|
||||
|
||||
```yaml
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
```
|
||||
|
||||
|
||||
## Comments
|
||||
|
||||
Similar to TOC, the [Disqus](https://disqus.com/) comments is loaded by default in each post, and the global switch is defined by variable `comments` in file `_config.yml` . If you want to close the comment for specific post, add the following to the **Front Matter** of the post:
|
||||
|
||||
```yaml
|
||||
---
|
||||
comments: false
|
||||
---
|
||||
```
|
||||
|
||||
|
||||
## Code Block
|
||||
|
||||
Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
|
||||
|
||||
```
|
||||
This is a common code snippet, without syntax highlight and line number.
|
||||
```
|
||||
|
||||
## Specific Language
|
||||
|
||||
Using <code class="highlighter-rouge">```Language</code> you will get code snippets with line Numbers and syntax highlight.
|
||||
|
||||
> **Note**: The Jekyll style `{% raw %}{%{% endraw %} highlight LANGUAGE {% raw %}%}{% endraw %}` or `{% raw %}{%{% endraw %} highlight LANGUAGE linenos {% raw %}%}{% endraw %}` are not allowed to be used in this theme !
|
||||
|
||||
```yaml
|
||||
# Yaml code snippet
|
||||
items:
|
||||
- part_no: A4786
|
||||
descrip: Water Bucket (Filled)
|
||||
price: 1.47
|
||||
quantity: 4
|
||||
```
|
||||
|
||||
#### Liquid codes
|
||||
|
||||
If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}{%{% endraw %} raw {%raw%}%}{%endraw%}` and `{% raw %}{%{% endraw %} endraw {%raw%}%}{%endraw%}` .
|
||||
|
||||
{% raw %}
|
||||
```liquid
|
||||
{% if product.title contains 'Pack' %}
|
||||
This product's title contains the word Pack.
|
||||
{% endif %}
|
||||
```
|
||||
{% endraw %}
|
||||
|
||||
## Learn More
|
||||
For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
|
||||
|
||||
## See Also
|
||||
|
||||
* [Getting Started]({{ site.baseurl }}/posts/getting-started/)
|
||||
* [Text and Typography]({{ site.baseurl }}/posts/text-and-typography/)
|
||||
* [Customize the Favicon]({{ site.baseurl }}/posts/customize-the-favicon/)
|
||||
95
_posts/2019-08-09-getting-started.md
Normal file
95
_posts/2019-08-09-getting-started.md
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
---
|
||||
title: Getting Started
|
||||
date: 2019-08-09 20:55:00 +0800
|
||||
categories: [Blogging, Tutorial]
|
||||
tags: [usage]
|
||||
---
|
||||
|
||||
|
||||
## Basic Environment
|
||||
|
||||
First of all, follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the basic environment (Ruby, RubyGem, Bundler and Jekyll) installation.
|
||||
|
||||
In addition, the [python](https://www.python.org/downloads/) and [ruamel.yaml](https://pypi.org/project/ruamel.yaml/) are also required.
|
||||
|
||||
## Configuration
|
||||
|
||||
Customize the variables in file `_config.yml` as needed.
|
||||
|
||||
## Atom Feed
|
||||
|
||||
The Atom feed url of your site will be:
|
||||
|
||||
```
|
||||
<site_url>/feed.xml
|
||||
```
|
||||
|
||||
The `site_url` was defined by variable **url** in `_config.yml`.
|
||||
|
||||
## Install Jekyll Plugins
|
||||
|
||||
In the root direcoty of the project, run the following command:
|
||||
|
||||
```terminal
|
||||
$ bundle install
|
||||
```
|
||||
|
||||
`bundle` will install all dependent Jekyll Plugins declared in `Gemfile` that stored in the root automatically.
|
||||
|
||||
## Run Locally
|
||||
|
||||
You may want to preview the site before publishing. Run the script in the root directory:
|
||||
|
||||
```terminal
|
||||
$ bash run.sh
|
||||
```
|
||||
>**Note**: Because the *Recent Update* required the latest git-log date of posts, make sure the changes of `_posts` have been committed before running this command.
|
||||
|
||||
Open the brower and visit [http://127.0.0.1:4000](http://127.0.0.1:4000)
|
||||
|
||||
## Deploying to GitHub Pages
|
||||
|
||||
### Option 1: Build locally
|
||||
|
||||
For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts will not work. If you want to use any another third-party Jekyll plugins, **your have to build locally rather than on GitHub Pages**.
|
||||
|
||||
**1**. On GitHub website, create a new blank repository named `<username>.github.io`.
|
||||
|
||||
**2**. Build your site by:
|
||||
|
||||
```console
|
||||
$ bash build.sh -d /path/to/<username>.github.io/
|
||||
```
|
||||
|
||||
The build results will be stored in the root directory of `<username>.github.io` and don't forget to push the changes of `<username>.github.io` to branch `master` on GitHub.
|
||||
|
||||
**3**. Go to GitHub website and enable GitHub Pages service for the new repository `<username>.github.io`.
|
||||
|
||||
**4**. Visit `https://<username>.github.io` and enjoy.
|
||||
|
||||
|
||||
### Option 2: Build by GitHub Pages
|
||||
|
||||
By deploying your site in this way, you can push the source code to GitHub repository directly.
|
||||
|
||||
> **Note**: If you want to add any third-party Jekyll plugins or custom scripts to your project, please refer to [*Option 1: Build locally*](#option-1-build-locally).
|
||||
|
||||
**1**. Rename your repository as `<username>.github.io`.
|
||||
|
||||
**2**. Commit the changes of your repository before running the initialization script:
|
||||
|
||||
```console
|
||||
$ bash init.sh
|
||||
```
|
||||
|
||||
It will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts.
|
||||
|
||||
**3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repository `<username>.github.io`.
|
||||
|
||||
**4**. Visit `https://<username>.github.io` and enjoy.
|
||||
|
||||
## See Also
|
||||
|
||||
* [Write a new post]({{ site.baseurl }}/posts/write-a-new-post/)
|
||||
* [Text and Typography]({{ site.baseurl }}/posts/text-and-typography/)
|
||||
* [Customize the Favicon]({{ site.baseurl }}/posts/customize-the-favicon/)
|
||||
28
_posts/2019-08-11-customize-the-favicon.md
Normal file
28
_posts/2019-08-11-customize-the-favicon.md
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
title: "Customize the Favicon"
|
||||
date: 2019-08-11 00:34:00 +0800
|
||||
categories: [Blogging, Tutorial]
|
||||
tags: [favicon]
|
||||
toc: false
|
||||
---
|
||||
|
||||
The image files of [Favicons](https://www.favicon-generator.org/about/) are placed in `assets/img/favicons`. You may need to replace them with your own. So let's see how to customize these Favicons.
|
||||
|
||||
Whit a square image (PNG, JPG or GIF) in hand, open the site [*Favicon & App Icon Generator*](https://www.favicon-generator.org/) and upload your original image.
|
||||
|
||||
|
||||
|
||||
Wait a moment for the website to generate icons of various sizes automatically.
|
||||
|
||||
|
||||
|
||||
Download the generated package and extract to override the files in directory `assets/img/favicons`.
|
||||
|
||||
At last, rebuild the site so that the icon becomes your custom edition.
|
||||
|
||||
## See Also
|
||||
|
||||
* [Getting Started]({{ site.baseurl }}/posts/getting-started/)
|
||||
* [Write a new post]({{ site.baseurl }}/posts/write-a-new-post/)
|
||||
* [Text and Typography]({{ site.baseurl }}/posts/text-and-typography/)
|
||||
|
||||
Loading…
Reference in a new issue