內容版式 Demos
Author

內容版式 Demos

張三瘋 國立三閭大學高松年紀念館館長     Tuesday, October 15, 2019 00:57     6605     14 min     

◉返回文選列表

本站新增樣式

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

源代碼展示框

爲代碼高亮顯示效果,特整合 Parsia Hakimian 製作的源代碼展示框。效果示例如下。

{{< codecaption lang="python" title="Python 計算算法源碼" >}}

# -*- 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)		
}

{{< /codecaption>}}

在「lang」中填寫代碼語言類型,在「title」中填寫代碼框的標題。如以上代碼將渲染爲下列高亮格式:

☀ Python 計算算法源碼 ☀
 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 使用方法與效果如下:

☀ <ruby> 標籤添加注音樣式源碼 ☀
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.)
  • 烽煙滾滾唱 英雄 (えいゆう) 四面 (しめん) 青山側耳聽!

備註及定義框

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

備註無標題

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

☀ 備註框內容源碼 ☀
1
{{< notice [info|warning|tip|note] >}}備註框內容{{< /notice >}}

这一天,韩学愈特来拜访。通名之后,方鸿渐倒窘起来,同时快意地失望。理想中的韩学愈不知怎样的嚣张浮滑,不料是个沉默寡言的人。他想陆子潇也许记错,孙小姐准是过信流言。

本站是 18 禁網站,未成年人不宜瀏覽。否則,後果自負。

木讷朴实是韩学愈的看家本领——不,养家本钱,现代人有两个流行的信仰。
第一:女子无貌便是德,所以漂亮的女人准比不上丑女人那样有思想,有品节;第二:男子无口才,就是表示有道德,所以哑巴是天下最诚朴的人。

再一看他开的学历,除掉博士学位以外,还有一条:“著作散见美国‘史学杂志’‘星期六文学评论’等大刊物中”,不由自主地另眼相看。好几个拿了介绍信来见的人,履历上写在外国“讲学”多次。
最后他听说韩太太是美国人,他简直改容相敬了,能娶外国老婆的非精通西学不可,自己年轻时不是想娶个比国女人没有成功么?这人做得系主任。他当时也没想到这外国老婆是在中国娶的白俄。

自定義標題

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

☀ 備註框內容源碼 ☀
1
2
3
4
5
{{< definition title="學位" >}}
再一看他开的学历,除掉博士学位以外,还有一条:“著作散见美国‘史学杂志’‘星期六文学评论’等大刊物中”,不由自主地另眼相看。好几个拿了介绍信来见的人,履历上写在外国“讲学”多次。
<br>
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。效果如下。

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

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

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

五七言詩歌排版

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

古詩十九首
生年不満百, 常懐千歳憂。 昼短苦夜長, 何不秉燭遊。 為楽当及時, 何能待来茲。 佚名

春夜洛城闻笛
谁家玉笛暗飞声,散入春风满洛城。
此夜曲中闻折柳,何人不起故园情。 李白

短歌行
對酒當歌。人生幾何。譬如朝露。去日苦多。
慨當以慷。憂思難忘。何以解憂。唯有杜康。
青青子衿。悠悠我心。但為君故。沈吟至今。
呦呦鹿鳴。食野之苹。我有嘉賓。鼓瑟吹笙。
明明如月。何時可輟。憂従中来。不可断絶。
越陌度阡。枉用相存。契闊談讌。心念舊恩。
月明星稀。烏鵲南飛。繞樹三匝。何枝可依。
山不厭高。海不厭深。周公吐哺。天下歸心。 曹孟德

父子目錄樣式

本站圖書採父子列表樣式羅列章節目錄。在每本書文件夾內的 _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
  • ☀ children shortcode ☀
    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.
    ☀ attachment shortcode ☀
    1
    
    {{%attachments style="grey|orange|blue|green" /%}} 

    分別渲染爲:

    段落引用文字塊

    以 blockquote 樣式爲基礎,編寫引文的 shortcode,不過這個 shortcode 一點都不 short,不如徑用 html 標籤。

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

    渲染爲:

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

    列表樣式(略)

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

    hint hred
    1. Looks
    2. Like
    3. The
    4. Same
    hint hgrey
    1. Looks
    2. Like
    3. The
    4. Same

    模板原有 shortcode 樣式

    強調色塊

    強調色塊用來突出某些句子或段落(看起來沒啥用處)。原模板只有紅綠藍三色,本站新增灰色塊樣式,並重命名爲便於記憶書寫的 hblue、hred、hgray、hgreen。

    ☀ 強調色塊 shortcode ☀
    1
    2
    3
    4
    5
    
    {{< hint [hblue|hred|hgrey|hgreen] >}}
    **Markdown content**  
    Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
    stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
    {{< /hint >}}
    高松年校長治校金句(藍)
    高松年事先并没有这番意见,临时信口胡扯一阵。经朋友们这样一恭维,他渐渐相信这真是至理名言,也对自己倾倒不已。他从此动不动就发表这段议论,还加上个帽子道:“我是研究生物学的,学校也是个有机体,教职员之于学校,应当像细胞之于有机体——”这段至理名言更变而为科学定律了。
    高松年校長治校金句(紅)
    “方先生,你收到我的信没有?”一般人撒谎,嘴跟眼睛不能合作,嘴尽管雄纠纠地胡说,眼睛懦怯不敢平视对方。高松年老于世故,并且研究生物学的时候,学到西洋人相传的智慧,那就是:假使你的眼光能与狮子或老虎的眼光相接,彼此怒目对视,那野兽给你催眠了不敢扑你。
    高松年校長治校金句(灰)
    “咦!怎么没收到?”高松年直跳起来,假惊异的表情做得维妙维肖,比方鸿渐的真惊惶自然得多。他没演话剧,是话剧的不幸而是演员们的大幸——“这信很重要。唉!现在抗战时间的邮政简直该死。可是你先生已经来了,好得很,这些话可以面谈了。”
    高松年校長治校金句(綠)
    “我原意请先生来当政治系的教授,因为先生是辛楣介绍来的,说先生是留德的博士。可是先生自己开来的履历上并没有学位——”鸿渐的脸红得像有一百零二度寒热的病人——“并且不是学政治的,辛楣全搅错了。先生跟辛楣的交情本来不很深罢?”鸿渐脸上表示的寒热又升高了华氏表上一度,不知怎么对答,高松年看在眼里,胆量更大……

    KaTeX

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

    ☀ KaTeX shortcode ☀
    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} $$

    Mermaid Chart

    使用 Mermaid 繪製 svg charts and diagrams 等插圖。效果待驗證。

    ☀ Mermaid Chart shortcode ☀
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    
    {{< mermaid [class="text-center"]>}}
    sequenceDiagram
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end
        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    {{< /mermaid >}}

    sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end

    Tabs

    Tabs let you organize content by context, for example installation instructions for each supported platform.

    ☀ Tabs shortcode ☀
    1
    2
    3
    4
    5
    
    {{< tabs "uniqueid" >}}
    {{< tab "Title1" >}} # Content 1 {{< /tab >}}
    {{< tab "Title2" >}} # Content 2 {{< /tab >}}
    {{< tab "Title3" >}} # Content 3 {{< /tab >}}
    {{< /tabs >}}
    先生的聘书,我方才已经托辛楣带去了。先生教授什么课程,现在很成问题。我们暂时还没有哲学系,国文系教授已经够了,只有一班文法学院一年级学生共修的论理学,三个钟点,似乎太少一点,将来我再想办法罢。
    方先生不知道么?历史系主任韩先生的太太,我也没有见过,听范小姐说,瘦得全身是骨头,难看得很。有人说她是白俄,有人说她是这次奥国归并德国以后流亡出来的犹太人,她丈夫说她是美国人。韩先生要她在外国语文系当教授,刘先生不答应,说她没有资格,英文都不会讲,教德文教俄文现在用不着。韩先生生了气,骂刘先生自己没有资格,不会讲英文,编了几本中学教科书,在外国暑期学校里混了张证书,算什么东西——话真不好听,总算高先生劝开了,韩先生在闹辞职呢。
    汪处厚见了他,热情地双手握着他的手,好半天搓摩不放,仿佛捉搦了情妇的手,一壁似怨似慕的说:“李先生,你真害我们等死了,我们天天在望你——张先生,薜先生,咱们不是今天早晨还讲起他的——咱们今天早晨还讲起你。路上辛苦啦?好好休息两天,再上课,不忙。我把你的功课全排好了。李先生,咱们俩真是神交久矣。高校长拍电报到成都要我组织中国文学系,我想年纪老了,路又不好走,换生不如守熟,所以我最初实在不想来。高校长,他可真会咕哪!他请舍侄”——张先生,薜先生,黄先生同声说:“汪先生就是汪次长的令伯”——“请舍侄再三劝驾,我却不过情,我内人身体不好,也想换换空气。到这儿来了,知道有你先生,我真高兴,我想这系办得好了——”

    分欄版式

    ☀ Columns shortcode ☀
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    
    {{< columns >}} <!-- begin columns block -->
    # Left Content
    Lorem markdownum insigne...
    
    <---> <!-- magic sparator, between columns -->
    
    # Mid Content
    Lorem markdownum insigne...
    
    <---> <!-- magic sparator, between columns -->
    
    # Right Content
    Lorem markdownum insigne...
    {{< /columns >}}
    左欄
    三闾大学校长高松年是位老科学家。这「老」字的位置非常为难,可以形容科学,也可以形容科学家。不幸的是,科学家跟科学不大相同;科学家像酒,愈老愈可贵,而科学像女人,老了便不值钱。将来国语文法发展完备,终有一天可以明白地分开「老的科学家」和「老科学的家」,或者说「科学老家」和「老科学家」。现在还早得很呢,不妨笼统称呼。
    中間欄
    高校长肥而结实的脸像没发酵的黄面粉馒头,「馋嘴的时间」(Edax Vetustas)咬也咬不动他,一条牙齿印或皱纹都没有。假使一个犯校规的女学生长得很漂亮,高校长只要她向自己求情认错,也许会不尽本于教育精神地从宽处分。这证明这位科学家还不老。他是二十年前在外国研究昆虫学的;想来三十年前的昆虫都进化成为大学师生了,所以请他来表率多士。
    右欄
    他在大学校长里,还是前途无量的人。大学校长分文科出身和理科出身两类。文科出身的人轻易做不到这位子的。做到了也不以为荣,准是干政治碰壁下野,仕而不优则学,借诗书之泽,弦诵之声来休养身心。理科出身的人呢,就完全不同了。中国是世界上最提倡科学的国家,没有旁的国度肯这样给科学家大官做的。

    鏈接按鈕

    ☀ Button shortcode ☀
    1
    2
    
    {{< button relref="/" [class="..."] >}}回到總目{{< /button >}}
    {{< button href="https://mengxianjun.org/posts/" >}}下一章{{< /button >}}
    回到總目 下一章

    本站圖書樣式的上下章切換鏈接以及文選頁面的「回到總目」按鈕即以此笨辦法粗暴實現。

    摺疊文字段落

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

    默認名稱爲 expand

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

    自定義名稱與樣式

    ☀ expand shortcode ☀
    1
    2
    3
    4
    
    {{< expand "Custom Label" "..." >}}
    ## Markdown content
    Lorem markdownum insigne...
    {{< /expand >}}
    ◉返回文選列表

    The article was recently updated on Saturday, October 26, 2019, 03:06:48 by 李二狗.