This page looks best with JavaScript enabled
內容版式 Demos
👨 李二狗 · · · 🔢 4131 words· ⏲️ 9 min read · 👀... views

本站新增樣式

參考衆多 Hugo shortcode 樣式案例,爲提高效率,本站新增以下幾種樣式。模板原有 shortcode 樣式在本文第二部分列出備查。

源代碼展示框

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# -*- coding:utf-8 -*-
def count_pm(*args):
    alist = list([round(i*2-8,2) for i in args])  #计算三种颗粒浓度
    result = []
    for pm in alist:
    	pm_abs = abs(pm)
    	result.append(generate_iso_code(pm_abs))
    print (result)
    return result
    	
def generate_iso_code(x):
	pm_value = [0.01,0.02,0.04,0.08,0.16,0.32,0.64,1.3,2.5,5,10,20,40,80]  #颗粒浓度
	iso = list(range(1,25))   #iso级别,共24级
	for i in range(len(pm_value)):           #for循环得到某个浓度范围的iso4006级别
		if pm_value[i] < x <= pm_value[i+1]:
			iso_code = iso[i]
			break
	return iso_code
			
if __name__ == '__main__':
    count_pm(7.95,5.85,3.98)		
    count_pm(7.918,5.949,5.456)	
    count_pm(6.916,3.956,3.956)		
}

下述行文中需要展示的源碼,皆以此樣式呈現。

漢語拼音標註

使用 <ruby> 標籤可以勉強在網頁爲漢字注音,此法甚爲笨拙,輕易不使用。Shortcode 使用方法與效果如下:

1
2
3
- 每逢佳節高築牆,{{<ruby rb="喜聞樂見" rt="shēn biǎo yí hàn" >}}毀雲梯!
- OMG! 呵呵!{{< ruby rb="I'm happy for that." rt="My heart is broken.">}}
- 烽煙滾滾唱{{<ruby rb="英雄" rt="えいゆう">}},{{< ruby rb="四面" rt="しめん">}}青山側耳聽!

渲染爲:

  • 每逢佳節高築牆, 喜聞樂見 (shēn biǎo yí hàn) 毀雲梯!
  • OMG! 呵呵! I’m happy for that. (My heart is broken.)
  • 烽煙滾滾唱 英雄 (えいゆう) 四面 (しめん) 青山側耳聽!

備註及定義框

文字框內分段、換行、列表的渲染,不同瀏覽器的支持情況未盡相同,大體皆可用。行文時根據內容需要選取,以下爲兩類文字框版式的示例效果。

原有樣式

1
{{< notice [success|info|warning|error] >}}備註框內容{{< /noticem >}}
success text
info text
warning text
error text

漢化樣式

計 info、warning、tip、note 四色四種,並分別漢化爲「編者按語」「特別警示」「官方吐槽」「思考題目」。

1
{{< noticem [info|warning|tip|note] >}}備註框內容{{< /noticem >}}
这一天,韩学愈特来拜访。通名之后,方鸿渐倒窘起来,同时快意地失望。理想中的韩学愈不知怎样的嚣张浮滑,不料是个沉默寡言的人。他想陆子潇也许记错,孙小姐准是过信流言。
本站是 18 禁網站,未成年人不宜瀏覽。否則,後果自負。
木讷朴实是韩学愈的看家本领——不,养家本钱,现代人有两个流行的信仰。
第一:女子无貌便是德,所以漂亮的女人准比不上丑女人那样有思想,有品节;第二:男子无口才,就是表示有道德,所以哑巴是天下最诚朴的人。

再一看他开的学历,除掉博士学位以外,还有一条:“著作散见美国‘史学杂志’‘星期六文学评论’等大刊物中”,不由自主地另眼相看。好几个拿了介绍信来见的人,履历上写在外国“讲学”多次。

最后他听说韩太太是美国人,他简直改容相敬了,能娶外国老婆的非精通西学不可,自己年轻时不是想娶个比国女人没有成功么?这人做得系主任。他当时也没想到这外国老婆是在中国娶的白俄。

自定義標題

爲名詞解釋排版需要,編寫 definition 的 shortcode,具體效果如下。

1
2
3
4
{{< definition title="學位" >}}
再一看他开的学历,除掉博士学位以外,还有一条:“著作散见美国‘史学杂志’‘星期六文学评论’等大刊物中”,不由自主地另眼相看。好几个拿了介绍信来见的人,履历上写在外国“讲学”多次。  
When meeting with senior officers stationed in Hubei, Xi extended sincere greetings to all officers and soldiers of the armed forces stationed in the province.
{{< /definition >}}

在「title」後面填寫要定義的概念,上述源碼將渲染爲:

學位之定義

再一看他开的学历,除掉博士学位以外,还有一条:“著作散见美国‘史学杂志’‘星期六文学评论’等大刊物中”,不由自主地另眼相看。好几个拿了介绍信来见的人,履历上写在外国“讲学”多次。

When meeting with senior officers stationed in Hubei, Xi extended sincere greetings to all officers and soldiers of the armed forces stationed in the province.

稍加變換色彩樣式與標題風格,新增 freebox shortcode。效果如下。

1
2
3
{{< freebox title="這真是名場面" >}}
在导师制讨论会上,部视学先讲了十分钟冠冕堂皇的话,平均每分钟一句半“兄弟在英国的时候”。他讲完看一看手表,就退席了。听众喉咙里忍住的大小咳嗽声全放出来,此作彼继,Ehem,KeKeKe,——在中国集会上,静默三分钟后,主席报告后,照例有这么一阵咳嗽。
{{< /freebox >}}

上述源碼便渲染出如下格式:

⦿ 這真是名場面 ⦿
在导师制讨论会上,部视学先讲了十分钟冠冕堂皇的话,平均每分钟一句半“兄弟在英国的时候”。他讲完看一看手表,就退席了。听众喉咙里忍住的大小咳嗽声全放出来,此作彼继,Ehem,KeKeKe,——在中国集会上,静默三分钟后,主席报告后,照例有这么一阵咳嗽。

五七言詩歌排版

此樣式在桌面電腦的各類瀏覽器中,皆可正常渲染顯示。手機移動端的顯示效果,則視各手機屏幕尺寸與瀏覽器型號二不同,經簡單測試,大體皆勉強可用。

1
2
3
4
5
{{/*% poem title="古詩十九首"%*/}}
生年不満百,常懐千歳憂。
昼短苦夜長,何不秉燭遊。
為楽当及時,何能待来茲。
{{/*% /poem %*/}}
古詩十九首
生年不満百,常懐千歳憂。
昼短苦夜長,何不秉燭遊。
為楽当及時,何能待来茲。
春夜洛城闻笛
谁家玉笛暗飞声,散入春风满洛城。
此夜曲中闻折柳,何人不起故园情。
曹孟德詩
對酒當歌。人生幾何。譬如朝露。去日苦多。
慨當以慷。憂思難忘。何以解憂。唯有杜康。
青青子衿。悠悠我心。但為君故。沈吟至今。
呦呦鹿鳴。食野之苹。我有嘉賓。鼓瑟吹笙。
明明如月。何時可輟。憂従中来。不可断絶。
越陌度阡。枉用相存。契闊談讌。心念舊恩。
月明星稀。烏鵲南飛。繞樹三匝。何枝可依。
山不厭高。海不厭深。周公吐哺。天下歸心。

樣式大致居中對齊,適用於傳統對仗詩歌。

父子目錄樣式

本站圖書採父子列表樣式羅列章節目錄。在每本書文件夾內的 _index.md 中使用,用法如下,效果見相應頁面的目錄樣式。

Parameter Default Description
page current Specify the page name (section name) to display children for
style “li” Choose the style used to display descendants. It could be any HTML tag name
showhidden “false” When true, child pages hidden from the menu will be displayed
description “false” Allows you to include a short text under each page in the list.
when no description exists for the page, children shortcode takes the first 70 words of your content. read more info about summaries on gohugo.io
depth 1 Enter a number to specify the depth of descendants to display. For example, if the value is 2, the shortcode will display 2 levels of child pages.
Tips: set 999 to get all descendants
sort none Sort Children By
  • Weight - to sort on menu order
  • Name - to sort alphabetically on menu label
  • Identifier - to sort alphabetically on identifier set in frontmatter
  • URL - URL
  • 1
    2
    3
    4
    5
    6
    
    {{% children depth="1" style="li" showhidden="true" sort="Name"  %}}
    {{% children  %}}
    {{% children description="true"   %}}
    {{% children depth="3" showhidden="true" %}}
    {{% children style="h2" depth="3" description="true" %}}
    {{% children style="div" depth="999" %}}
    

    附錄文件

    通過此 shortcode 可在特定頁面添加附錄文檔,文檔樣式可以是 pdf、mp3、mp4 等。如本文文檔 20191015DEMOS.md 則對應名爲 20191015DEMOS.files 的文件夾:即附件文件夾名稱與文章文件名一致,否則將報錯無法渲染。四色樣式中,個人偏好灰色塊。具體效果如下:

    Parameter Default Description
    title “Attachments” List’s title
    style "” Choose between “orange”, “grey”, “blue” and “green” for nice style
    pattern “.*” A regular expressions, used to filter the attachments by file name.

    The pattern parameter value must be regular expressions.
    1
    
    {{%attachments style="grey|orange|blue|green" /%}} 
    

    灰色樣式渲染爲:

    段落引用文字塊

    以 blockquote 樣式爲基礎,編寫引文的 shortcode。當然,也可徑用 html 標籤排版。

    1
    2
    3
    4
    5
    
    {{<quocn link="http://www.eywedu.net/weicheng/007.htm" title="钱钟书" >}}
    鸿渐记得自己老师里的名教授从不点名,从不报告学生缺课。这才是堂堂大学者的风度:“你们要听就听,我可不在乎。”他企羡之余,不免模仿。
    
    上第一课,他像创世纪里原人阿大(Adam)唱新生禽兽的名字,以后他连点名簿子也不带了。到第二星期,他发现五十多学生里有七八个缺席,这些空座位像一嘴牙齿忽然吊了几枚,留下的空穴,看了心里不舒服。下一次,他注意女学生还固守着第一排原来的座位,男学生像从最后一排坐起的,空着第二排,第三排孤另另地坐一个男学生。
    {{</quocn>}}
    

    渲染爲:

    鸿渐记得自己老师里的名教授从不点名,从不报告学生缺课。这才是堂堂大学者的风度:“你们要听就听,我可不在乎。”他企羡之余,不免模仿。

    上第一课,他像创世纪里原人阿大(Adam)唱新生禽兽的名字,以后他连点名簿子也不带了。到第二星期,他发现五十多学生里有七八个缺席,这些空座位像一嘴牙齿忽然吊了几枚,留下的空穴,看了心里不舒服。下一次,他注意女学生还固守着第一排原来的座位,男学生像从最后一排坐起的,空着第二排,第三排孤另另地坐一个男生。

    @钱钟书
    1
    2
    3
    4
    5
    
    {{<quoen link="http://www.eywedu.net/weicheng/007.htm" title="Qian Zhongshu" >}}
    Qian’s scholarly works were greeted with critical acclaim as soon as they came off the press. 
    
    Such was the case with the new edition of Tanyilu (1948; “Reflections in Appreciation”; revised and enlarged in 1983), Songshi xuanzhu (1958; “Selected and Annotated Poems of the Song Dynasty”), and the four-volume Guanzhuibian (1979; Limited Views, a partial translation)...
    {{</quoen>}}
    

    渲染爲:

    Qian’s scholarly works were greeted with critical acclaim as soon as they came off the press.

    Such was the case with the new edition of Tanyilu (1948; “Reflections in Appreciation”; revised and enlarged in 1983), Songshi xuanzhu (1958; “Selected and Annotated Poems of the Song Dynasty”), and the four-volume Guanzhuibian (1979; Limited Views, a partial translation)…Selected and Annotated),

    @Qian Zhongshu

    列表樣式(略)

    目前僅 Firefox 支持 @counter-style 自定義列表編號格式,其他瀏覽器將以默認格式渲染。

    ⦿ 這真是名場面 ⦿
    1. Looks
    2. Like
    3. The
    4. Same
    ⦿ 這真是名場面 ⦿
    1. Looks
    2. Like
    3. The
    4. Same

    模板原有 shortcode 樣式

    KaTeX

    網頁顯示 LaTeX 數理公式,本是極爲迫切的需求。原模板採用 KaTeX 渲染 Markdown 中的 LaTeX 公式。經測試,一些複雜公式的渲染,似乎沒有 MathJax 效果理想。 下爲簡易效果展示。

    1
    2
    3
    4
    5
    6
    
    {{< katex [class="text-center"] >}}
    x = \begin{cases}
       a &\text{if } b \\
       c &\text{if } d
    \end{cases}
    {{< /katex >}}
    

    $$ x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases} $$

    摺疊文字段落

    有些段落內容可以此格式摺疊隱藏,閱讀與否由讀者自行決定。

    默認名稱爲 expand

    1
    2
    3
    4
    
    {{< expand >}}
    **Markdown 內容** 
    高松年发奋办公,夙夜匪懈,精明得真是睡觉还睁着眼睛,戴着眼镜,做梦都不含糊的。
    {{< /expand >}}
    
    Markdown 內容
    高松年发奋办公,夙夜匪懈,精明得真是睡觉还睁着眼睛,戴着眼镜,做梦都不含糊的。

    自定義名稱與樣式

    1
    2
    3
    4
    
    {{< expand "Custom Label" "..." >}}
    ## Markdown content
    Lorem markdownum insigne...
    {{< /expand >}}
    

    Markdown 內容
    今年春天,高松年奉命筹备学校,重庆几个老朋友为他饯行,席上说起国内大学多而教授少,新办尚未成名的学校,地方偏僻,怕请不到名教授。高松年笑道:“我的看法跟诸位不同。名教授当然好,可是因为他的名望,学校沾着他的光,他并不倚仗学校里地位。他有架子,有脾气,他不会全副精神为学校服务,更不会绝对服从当局指挥。

    万一他闹别扭,你不容易找替人,学生又要借题目麻烦。我以为学校不但造就学生,并且应该造就教授。找到一批没有名望的人来,他们要借学校的光,他们要靠学校才有地位,而学校并非非有他们不可,这种人才真能跟学校合为一体,真肯为公家做事。学校也是个机关,机关当然需要科学管理,在健全的机关里,决没有特殊人物,只有安分受支配的一个个单位。所以,找教授并非难事。”大家听了,倾倒不已。

    Code tabs

    Make it easy to switch between different code

    1
    
    System.out.println('Hello World!');
    
    1
    
    console.log('Hello World!');
    

    The article was recently updated on Thursday, March 19, 2020, 19:35:18 by 王小花.


    李二狗
    支持作者

            🤑DONATION