Hugo W3 Simple主题快捷代码演示以及因果关

2018-11-24 约 2545 字 预计阅读 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 >}}

天地不仁,以万物为刍狗;圣人不仁,以百姓为刍狗。

--- 老子


通关文已经细读过半,自觉还是有一定的进步,技术贴后加一段通关文已经成了习惯,今天也不例外。

通关文之因果关

易曰:积善之家,必有余庆;积不善之家,必有余殃。
书曰:作善,降之百祥;作不善,降之百殃。又曰:天作孽,犹可违;自作孽,不可活。
参同曰:初正则终修,干立未可持。
正阳翁曰:种麻即得麻,种黍即得黍。
此皆言有因必有果,凡事谨之於始,自能全之於终也。
盖天地间一切大小事物,皆有因果。
善有善之因果,恶有恶之因果。
为善者必有善报,为恶者必有恶报。
为善者,善之因也;善报者,善之果也。
为恶者,恶之因也;恶报者,恶之果也。
善恶之报,如影随形,毫发不爽。
故君子戒慎乎其所不睹,恐惧乎其所不闻。
念念归善,不使有一些恶念生於方寸之中。
非礼不履,非义不行,行行皆善,不使有一件恶行见於日用之间。
念念善,行行善,因善,而果未有不善者也。
试观世间杀人者偿人命,救人者人报恩,感以善,应以善,感以恶,应以恶,此感彼应,有因有果,自然而然。
所谓一念之善便是天堂,一念之恶便是地狱,天堂地狱,惟人自造。
孟子曰:祸福无不自己求之者。
老子曰:祸福无门,惟人自招。
观此而因果之理,岂不显然易见哉?
世间糊涂学人,不信因果,损人利己,伤天害理,无所不为。
或骗化十方,以为得计;或假装有道,以哄愚迷;或借黄白假术,而破人家产;或以闺丹邪事,而引人作恶;或枉口嚼舌,而毁谤高明;或阴谋暗箭,而坏人好事。
诸如此类,皆是不信因果。
殊不知作善作恶,是修结果之路。
修成善路,异日造物者,送你善路上去享福;修成恶路,异日造物者,送你恶路上去受罪。
谚云:要知前世事,今生受者是。要知后世事,今生作者是。
此言真实不虚,不信来世,试观现世,现世少年作善者,老年受福;少年作恶者,老年受罪,此人人共知共见者也。
吾劝真心学道者,速将因果关口打通。
一念一事,须要谨慎,一动一静,不可忽略。
先学一个不作孽、不造罪的好人,然后理会大事,以图上进,庶乎有造。
若因果不论,即要学道,又要作孽,明知明昧,罪上加罪,妄想闻道,难矣。

此关言论虽属老生常谈,但亦需深入思考。

少时看三国,印象挺深的是刘备教其子“勿以善小而不为,勿以恶小而为之”,而奇怪的是刘禅却落得个亡国之君的下场。

年岁渐长,乃知形势比人强的道理,才知刘禅之乐不思蜀,实乃历代亡国之君之最佳境况者。

所以说凡夫畏果,菩萨畏因,吾等努力求道之士,应时时在因地上考量。

故君子戒慎乎其所不睹,恐惧乎其所不闻慎独,仍然是归根到念念不忘


Tags: hugo 通关文

author

本文由Jesse Lau原创

2012年定居新西兰至今,自由职业者,从事网站和程式交易,曾获得Dukascopy外汇程序交易比赛2届月度冠军(id:Tradingwithea).
本文采用知识共享署名 4.0 国际许可协议进行许可。


留点评论吧:

本网站使用cookie技术以提高用户体验度。 了解我们的隐私政策 我已了解