Hugo W3 Simple主题快捷方式演示
2018-11-24
约 1534 字
预计阅读 4 分钟
关于这个模板 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 >}}
天地不仁，以万物为刍狗；圣人不仁，以百姓为刍狗。
--- 老子
相关文章:
- 2018/10/07 Eighth
本文由王一贴原创
王一贴，曾记录于《红楼梦》第八十回人物。任何问题，一贴搞定.
本文采用知识共享署名 4.0 国际许可协议进行许可。