Skip to content

Commit 023aefe

Browse files
cotes2020cotes2020
committed
Import the tutorial.
1 parent 611a072 commit 023aefe

4 files changed

Lines changed: 388 additions & 0 deletions

File tree

‎_posts/2019-08-08-text-and-typography.md‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
---
2+
title: "Text and Typography"
3+
date: 2019-08-08 11:33:00 +0800
4+
categories: [Blogging, Demo]
5+
tags: [typography]
6+
---
7+
8+
This Jekyll template totally compatible with Markdown syntax. Now, let's take a look for the text and typography in this theme.
9+
10+
## Titles
11+
12+
***
13+
# H1
14+
15+
<h2 data-toc-skip>H2</h2>
16+
17+
<h3 data-toc-skip>H3</h3>
18+
19+
#### H4
20+
21+
***
22+
23+
## Paragraph
24+
25+
I wandered lonely as a cloud
26+
27+
That floats on high o'er vales and hills,
28+
29+
When all at once I saw a crowd,
30+
31+
A host, of golden daffodils;
32+
33+
Beside the lake, beneath the trees,
34+
35+
Fluttering and dancing in the breeze.
36+
37+
## Block Quote
38+
39+
> This line to shows the Block Quote.
40+
41+
## Tables
42+
43+
|Company|Contact|Country|
44+
|:---|:--|---:|
45+
|Alfreds Futterkiste | Maria Anders | Germany
46+
|Island Trading | Helen Bennett | UK
47+
|Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy
48+
49+
## Link
50+
51+
[http://127.0.0.1:4000](http://127.0.0.1:4000)
52+
53+
54+
## Footnote
55+
56+
Click the hook will locate the footnote[^footnote].
57+
58+
59+
## Image
60+
61+
![Desktop View](/assets/img/sample/mockup.png)
62+
63+
64+
## Inline code
65+
66+
This is an example of `Inline Code`.
67+
68+
69+
## Code Snippet
70+
71+
### Common
72+
73+
```
74+
This is a common code snippet, without syntax highlight and line number.
75+
```
76+
77+
### Specific Languages
78+
79+
#### Console
80+
81+
```console
82+
$ date
83+
Sun Nov 3 15:11:12 CST 2019
84+
```
85+
86+
87+
#### Terminal
88+
89+
```terminal
90+
$ env |grep SHELL
91+
SHELL=/usr/local/bin/bash
92+
PYENV_SHELL=bash
93+
```
94+
95+
#### Ruby
96+
97+
```ruby
98+
def sum_eq_n?(arr, n)
99+
return true if arr.empty? && n == 0
100+
arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
101+
end
102+
```
103+
104+
#### Shell
105+
106+
```shell
107+
if [ $? -ne 0 ]; then
108+
echo "The command was not successful.";
109+
#do the needful / exit
110+
fi;
111+
```
112+
113+
#### Liquid
114+
115+
{% raw %}
116+
```liquid
117+
{% if product.title contains 'Pack' %}
118+
This product's title contains the word Pack.
119+
{% endif %}
120+
```
121+
{% endraw %}
122+
123+
#### HTML
124+
125+
```html
126+
<div class="sidenav">
127+
<a href="#contact">Contact</a>
128+
<button class="dropdown-btn">Dropdown
129+
<i class="fa fa-caret-down"></i>
130+
</button>
131+
<div class="dropdown-container">
132+
<a href="#">Link 1</a>
133+
<a href="#">Link 2</a>
134+
<a href="#">Link 3</a>
135+
</div>
136+
<a href="#contact">Search</a>
137+
</div>
138+
```
139+
140+
**Horizontal Scrolling**
141+
142+
```html
143+
<div class="panel-group">
144+
<div class="panel panel-default">
145+
<div class="panel-heading" id="{{ category_name }}">
146+
<i class="far fa-folder"></i>
147+
<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>
148+
</a>
149+
</div>
150+
</div>
151+
</div>
152+
```
153+
154+
155+
## Reverse Footnote
156+
157+
[^footnote]: The footnote source.

‎_posts/2019-08-08-write-a-new-post.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
---
2+
title: "Write a new Post"
3+
date: 2019-08-08 14:10:00 +0800
4+
categories: [Blogging, Tutorial]
5+
tags: [writting]
6+
---
7+
8+
## Naming and Path
9+
10+
Create a new file name with the format `YYYY-MM-DD-title.md` then put it into `_post` of the root directory.
11+
12+
## Front Matter
13+
14+
Basically, you need to fill the [Front Matter](https://jekyllrb.com/docs/front-matter/) as below at the top of the post:
15+
16+
```yaml
17+
---
18+
title: TITLE
19+
date: YYYY-MM-DD HH:MM:SS +/-TTTT
20+
categories: [TOP_CATEGORIE, SUB_CATEGORIE]
21+
tags: [TAG]
22+
---
23+
```
24+
25+
> **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.
26+
27+
### Categories and Tags
28+
29+
The pages for all the categories and tags are placed in the `categoreis` and `tags` respectively.
30+
31+
Let's say there is a post with title `The Beautify Rose`, it's Front Matter as follow:
32+
33+
```yaml
34+
---
35+
title: "The Beautify Rose"
36+
categories: [Plant]
37+
tags: [flower]
38+
---
39+
```
40+
41+
> **Note**: `categories` is designed to contain up to two elements.
42+
43+
44+
## Table of Contents
45+
46+
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/):
47+
48+
```yaml
49+
---
50+
toc: false
51+
---
52+
```
53+
54+
55+
## Comments
56+
57+
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:
58+
59+
```yaml
60+
---
61+
comments: false
62+
---
63+
```
64+
65+
66+
## Code Block
67+
68+
Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
69+
70+
```
71+
This is a common code snippet, without syntax highlight and line number.
72+
```
73+
74+
## Specific Language
75+
76+
Using <code class="highlighter-rouge">```Language</code> you will get code snippets with line Numbers and syntax highlight.
77+
78+
> **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 !
79+
80+
```yaml
81+
# Yaml code snippet
82+
items:
83+
- part_no: A4786
84+
descrip: Water Bucket (Filled)
85+
price: 1.47
86+
quantity: 4
87+
```
88+
89+
#### Liquid codes
90+
91+
If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}{%{% endraw %} raw {%raw%}%}{%endraw%}` and `{% raw %}{%{% endraw %} endraw {%raw%}%}{%endraw%}` .
92+
93+
{% raw %}
94+
```liquid
95+
{% if product.title contains 'Pack' %}
96+
This product's title contains the word Pack.
97+
{% endif %}
98+
```
99+
{% endraw %}
100+
101+
## Learn More
102+
For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
103+
104+
## See Also
105+
106+
* [Getting Started]({{ site.baseurl }}/posts/getting-started/)
107+
* [Text and Typography]({{ site.baseurl }}/posts/text-and-typography/)
108+
* [Customize the Favicon]({{ site.baseurl }}/posts/customize-the-favicon/)

‎_posts/2019-08-09-getting-started.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
title: Getting Started
3+
date: 2019-08-09 20:55:00 +0800
4+
categories: [Blogging, Tutorial]
5+
tags: [usage]
6+
---
7+
8+
9+
## Basic Environment
10+
11+
First of all, follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the basic environment (Ruby, RubyGem, Bundler and Jekyll) installation.
12+
13+
In addition, the [python](https://www.python.org/downloads/) and [ruamel.yaml](https://pypi.org/project/ruamel.yaml/) are also required.
14+
15+
## Configuration
16+
17+
Customize the variables in file `_config.yml` as needed.
18+
19+
## Atom Feed
20+
21+
The Atom feed url of your site will be:
22+
23+
```
24+
<site_url>/feed.xml
25+
```
26+
27+
The `site_url` was defined by variable **url** in `_config.yml`.
28+
29+
## Install Jekyll Plugins
30+
31+
In the root direcoty of the project, run the following command:
32+
33+
```terminal
34+
$ bundle install
35+
```
36+
37+
`bundle` will install all dependent Jekyll Plugins declared in `Gemfile` that stored in the root automatically.
38+
39+
## Run Locally
40+
41+
You may want to preview the site before publishing. Run the script in the root directory:
42+
43+
```terminal
44+
$ bash run.sh
45+
```
46+
>**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.
47+
48+
Open the brower and visit [http://127.0.0.1:4000](http://127.0.0.1:4000)
49+
50+
## Deploying to GitHub Pages
51+
52+
### Option 1: Build locally
53+
54+
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**.
55+
56+
**1**. On GitHub website, create a new blank repository named `<username>.github.io`.
57+
58+
**2**. Build your site by:
59+
60+
```console
61+
$ bash build.sh -d /path/to/<username>.github.io/
62+
```
63+
64+
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.
65+
66+
**3**. Go to GitHub website and enable GitHub Pages service for the new repository `<username>.github.io`.
67+
68+
**4**. Visit `https://<username>.github.io` and enjoy.
69+
70+
71+
### Option 2: Build by GitHub Pages
72+
73+
By deploying your site in this way, you can push the source code to GitHub repository directly.
74+
75+
> **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).
76+
77+
**1**. Rename your repository as `<username>.github.io`.
78+
79+
**2**. Commit the changes of your repository before running the initialization script:
80+
81+
```console
82+
$ bash init.sh
83+
```
84+
85+
It will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts.
86+
87+
**3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repository `<username>.github.io`.
88+
89+
**4**. Visit `https://<username>.github.io` and enjoy.
90+
91+
## See Also
92+
93+
* [Write a new post]({{ site.baseurl }}/posts/write-a-new-post/)
94+
* [Text and Typography]({{ site.baseurl }}/posts/text-and-typography/)
95+
* [Customize the Favicon]({{ site.baseurl }}/posts/customize-the-favicon/)

‎_posts/2019-08-11-customize-the-favicon.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: "Customize the Favicon"
3+
date: 2019-08-11 00:34:00 +0800
4+
categories: [Blogging, Tutorial]
5+
tags: [favicon]
6+
toc: false
7+
---
8+
9+
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.
10+
11+
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.
12+
13+
![upload-image]({{ site.baseurl }}/assets/img/sample/upload-image.png)
14+
15+
Wait a moment for the website to generate icons of various sizes automatically.
16+
17+
![download-icons]({{ site.baseurl }}/assets/img/sample/download-icons.png)
18+
19+
Download the generated package and extract to override the files in directory `assets/img/favicons`.
20+
21+
At last, rebuild the site so that the icon becomes your custom edition.
22+
23+
## See Also
24+
25+
* [Getting Started]({{ site.baseurl }}/posts/getting-started/)
26+
* [Write a new post]({{ site.baseurl }}/posts/write-a-new-post/)
27+
* [Text and Typography]({{ site.baseurl }}/posts/text-and-typography/)
28+

0 commit comments

Comments
 (0)