diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md new file mode 100644 index 0000000..21e59b8 --- /dev/null +++ b/_posts/2019-08-08-text-and-typography.md @@ -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

+ +

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 + +![Desktop View](/assets/img/sample/mockup.png) + + +## 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 +
+ Contact + + + Search +
+``` + +**Horizontal Scrolling** + +```html +
+
+
+ +

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.

+ +
+
+
+``` + + +## Reverse Footnote + +[^footnote]: The footnote source. diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md new file mode 100644 index 0000000..c717482 --- /dev/null +++ b/_posts/2019-08-08-write-a-new-post.md @@ -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 ``` can easily create a code block as following examples. + +``` +This is a common code snippet, without syntax highlight and line number. +``` + +## Specific Language + +Using ```Language 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/) diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md new file mode 100644 index 0000000..de14932 --- /dev/null +++ b/_posts/2019-08-09-getting-started.md @@ -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: + +``` +/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 `.github.io`. + +**2**. Build your site by: + +```console +$ bash build.sh -d /path/to/.github.io/ +``` + +The build results will be stored in the root directory of `.github.io` and don't forget to push the changes of `.github.io` to branch `master` on GitHub. + +**3**. Go to GitHub website and enable GitHub Pages service for the new repository `.github.io`. + +**4**. Visit `https://.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 `.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 `.github.io`. + +**4**. Visit `https://.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/) diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md new file mode 100644 index 0000000..fc20760 --- /dev/null +++ b/_posts/2019-08-11-customize-the-favicon.md @@ -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. + +![upload-image]({{ site.baseurl }}/assets/img/sample/upload-image.png) + +Wait a moment for the website to generate icons of various sizes automatically. + +![download-icons]({{ site.baseurl }}/assets/img/sample/download-icons.png) + +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/) +