Hugo W3 Simple主題快捷代碼演示以及因果關

2018-11-24 约 2606 字 预计阅读 6 分钟

關於這個模板 Hugo W3-Simple Theme我是先做了個英文版的快捷代碼演示，因為考慮到可能英文用戶會稍微多點，今天有空又更新了一個快捷方式，同時寫一個中文版頁麵吧。

此模板是基於W3schools 的W3.CSS框架做成的，因為我覺得此框架十分有效而且簡潔，比bootstrap的css要小的多。

W3.css隻有bootstrap css的五分之一不到。我還沒有算上boostrap的javascript庫。

通過這個css框架，可以很方便的做一些快捷代碼來豐富博客的內容。

Info 快捷代碼

我們可以很簡單的在markdown文件中顯示一些信息：

Code for info shortcodes

{{< info >}}
藍色常常指示一些信息性內容
{{</info >}}

這個標題缺省的是 Information!:

Information!

藍色常常指示一些信息性內容

我們可以設置標題

Code for info shortcodes with title

{{< info title="W3.CSS是一個CSS框架!">}}
W3.CSS是一個自適應的CSS框架。 它默認支持移動設備自適應設計，並且比類似的CSS框架更小更快。
{{< /info >}}

W3.CSS是一個CSS框架!

W3.CSS是一個自適應的CSS框架。 它默認支持移動設備自適應設計，並且比類似的CSS框架更小更快。

Warning 快捷代碼

我們也可很簡單的顯示警告信息

Code for warning shortcodes

{{< warning >}}
黃色常常用於設置警告標識
{{</warning >}}

這個標題缺省是 Warning!:

Warning!

黃色常常用於設置警告標識

可以自設標題：

Code for warning shortcodes with title

{{< warning title="注意!">}}
W3 CSS比其他CSS模板小上n倍，故此速度更快
{{< /warning >}}

It will display the title with your set:

注意!

W3 CSS比其他CSS模板小上n倍，故此速度更快

Colorcode 快捷代碼

本模板仍然是用w3schools的一個w3colorcode.js來顯示代碼顏色，為啥用它呢，還是因為它足夠小，比highlight.js小上n倍。

要用這個功能，你需要在帖子的markdown文件設置 w3codecolor: true .

因為這個js文件雖然比其他的都小得多，但也有20kb以上，所以我沒有設成全站所有文件都調用這個js文件，畢竟很多帖子根本不需要顯示代碼顏色。

w3colorcode.js的原版在w3schools目前支持html, js, java, css, sql, python 的顏色高亮。

我稍微更改了一下，讓它支持了bash 腳本語言的高亮。

bash 語言高亮

Colorcode 快捷方式用 mode 和title 兩個參數來設置. 假如不設置，就缺省采用bash語言高亮，也沒有任何標題.

Code for default colorcode shortcodes

{{< colorcode >}}
your code here
{{</colorcode >}}

The demo for default colorcode shortcodes:
欲安裝Hugo-w3-simple主題模板,用下列命令即可
cd themes
git clone https://github.com/jesselau76/hugo-w3-simple.git

html 語言高亮

Code for html colorcode shortcodes

{{< colorcode mode="htmlHigh" title="Demo for html color" >}}
your code here
{{</colorcode >}}

Demo for html color

<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

css 語言高亮

Code for css colorcode shortcodes

{{< colorcode mode="cssHigh" title="Demo for css color" >}}
your code here
{{</colorcode >}}

Demo for css color

body {
background-color: #d0e4fe;
}

h1 {
color: orange;
text-align: center;
}

p {
font-family: "Times New Roman";
font-size: 20px;
}

javascript語言高亮

Code for js colorcode shortcodes

{{< colorcode mode="jsHigh" title="Demo for js color" >}}
your code here
{{</colorcode >}}

Demo for js color

function w3CodeColor() {
var x, i, j, k, l, modes = ["html", "js", "java", "css", "sql", "python"];
if (!document.getElementsByClassName) {return;}
k = modes.length;
for (j = 0; j < k; j++) {
x = document.getElementsByClassName(modes[j] + "High");
l = x.length;
for (i = 0; i < l; i++) {
x[i].innerHTML = w3CodeColorize(x[i].innerHTML, modes[j]);
}
}
}

sql 語言高亮

Code for sql colorcode shortcodes

{{< colorcode mode="sqlHigh" title="Demo for sql color" >}}
your code here
{{</colorcode >}}

Demo for sql color

SELECT column1, column2, ...
FROM table_name
ORDER BY column1, column2, ... ASC|DESC;

python語言高亮

Code for python colorcode shortcodes

{{< colorcode mode="pythonHigh" title="Demo for python color" >}}
your code here
{{</colorcode >}}

Demo for python color

import json
# some JSON:
x = '{ "name":"John", "age":30, "city":"New York"}'
# parse x:
y = json.loads(x)
# the result is a Python dictionary:
print(y["age"])

quote 快捷代碼

本來用blockquote也可以顯示引文。不過有時我們想多樣化顯示。所以我也做了這個一個快捷代碼。

Code for quote shortcodes

{{< quote >}}
天地不仁，以萬物為芻狗；聖人不仁，以百姓為芻狗。
{{< /quote >}}

缺省寬度為100%，不顯示作者

天地不仁，以萬物為芻狗；聖人不仁，以百姓為芻狗。

可以設置寬度百分比，設置作者信息

Code for quote shortcodes with % width

{{< quote width="38.2%" author="老子" >}}
天地不仁，以萬物為芻狗；聖人不仁，以百姓為芻狗。
{{< /quote >}}


天地不仁，以萬物為芻狗；聖人不仁，以百姓為芻狗。

--- 老子

也可以直接設置px寬度

Code for quote shortcodes with px width

{{< quote width="300px" author="老子" >}}
天地不仁，以萬物為芻狗；聖人不仁，以百姓為芻狗。
{{< /quote >}}

天地不仁，以萬物為芻狗；聖人不仁，以百姓為芻狗。

--- 老子

[通關文](https://jesselau.com/tags/通關文/)已經細讀過半，自覺還是有一定的進步，技術貼後加一段通關文已經成了習慣，今天也不例外。

通關文之因果關

易曰：積善之家，必有餘慶；積不善之家，必有餘殃。
書曰：作善，降之百祥；作不善，降之百殃。又曰：天作孽，猶可違；自作孽，不可活。
參同曰：初正則終修，幹立未可持。
正陽翁曰：種麻即得麻，種黍即得黍。
此皆言有因必有果，凡事謹之於始，自能全之於終也。
蓋天地間一切大小事物，皆有因果。
善有善之因果，惡有惡之因果。
為善者必有善報，為惡者必有惡報。
為善者，善之因也；善報者，善之果也。
為惡者，惡之因也；惡報者，惡之果也。
善惡之報，如影隨形，毫發不爽。
故君子戒慎乎其所不睹，恐懼乎其所不聞。
念念歸善，不使有一些惡念生於方寸之中。
非禮不履，非義不行，行行皆善，不使有一件惡行見於日用之間。
念念善，行行善，因善，而果未有不善者也。
試觀世間殺人者償人命，救人者人報恩，感以善，應以善，感以惡，應以惡，此感彼應，有因有果，自然而然。
所謂一念之善便是天堂，一念之惡便是地獄，天堂地獄，惟人自造。
孟子曰：禍福無不自己求之者。
老子曰：禍福無門，惟人自招。
觀此而因果之理，豈不顯然易見哉？
世間糊塗學人，不信因果，損人利己，傷天害理，無所不為。
或騙化十方，以為得計；或假裝有道，以哄愚迷；或借黃白假術，而破人家產；或以閨丹邪事，而引人作惡；或枉口嚼舌，而毀謗高明；或陰謀暗箭，而壞人好事。
諸如此類，皆是不信因果。
殊不知作善作惡，是修結果之路。
修成善路，異日造物者，送你善路上去享福；修成惡路，異日造物者，送你惡路上去受罪。
諺雲：要知前世事，今生受者是。要知後世事，今生作者是。
此言真實不虛，不信來世，試觀現世，現世少年作善者，老年受福；少年作惡者，老年受罪，此人人共知共見者也。
吾勸真心學道者，速將因果關口打通。
一念一事，須要謹慎，一動一靜，不可忽略。
先學一個不作孽、不造罪的好人，然後理會大事，以圖上進，庶乎有造。
若因果不論，即要學道，又要作孽，明知明昧，罪上加罪，妄想聞道，難矣。

此關言論雖屬老生常談，但亦需深入思考。

少時看三國，印象挺深的是劉備教其子“勿以善小而不為，勿以惡小而為之"，而奇怪的是劉禪卻落得個亡國之君的下場。

年歲漸長，乃知形勢比人強的道理，才知劉禪之樂不思蜀，實乃曆代亡國之君之最佳境況者。

所以說凡夫畏果，菩薩畏因，吾等努力求道之士，應時時在因地上考量。

故君子戒慎乎其所不睹，恐懼乎其所不聞。慎獨，仍然是歸根到念念不忘。

Tags: hugo 通關文

相关文章:


author

Jesse Lau

網名遁去的一，簡稱遁一。2012年定居新西蘭至今，自由職業者。
本文采用知識共享署名 4.0 國際許可協議進行許可。簡而言之，可隨意轉發轉載，轉載請注明出處。

❮ Lazy Load實現進一步加快網速以及貪酒關 共享條自適應設計以及冷熱關 ❯

留点评论吧: