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

2018-11-24 约 2578 字 预计阅读 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 快捷方式用 modetitle 兩個參數來設置. 假如不設置,就缺省采用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 國際許可協議進行許可。簡而言之,可隨意轉發轉載,轉載請注明出處。


留点评论吧: