Pagination CSS設置自適應以及懦弱關

2018-11-13 约 2048 字 预计阅读 5 分钟

Hugo W3 Simple的simple list看了幾天,打算變化一下,昨天就整了一個網格版的。

反正用w3 css框架,這些界麵類的東西都非常容易實現。

普通版光列標題,不做分頁也無所謂,事實上我自己就不愛用分頁,google搜索從來都是設置到結果為100,從來不點第二頁,而且因為google給力,基本上前10的結果就能找到我需要的內容。

目前這個blog也才不到百篇帖子,沒有圖像的話,網頁不大,基本上1秒就能全部下載完,完全沒必要做分頁。

而做出這個網格版選項,就可以每篇文章配圖了,要不做成React效果,要不就得整個分頁。

React還不會,分頁在hugo裏卻比較簡單。

Hugo 裏設置分頁的css

hugo內置了分頁的模板,直接調用{{ template “_internal/pagination.html” . }}就可以有分頁了。

測試了一下,發現全亂了。仔細看了看,他需要Bootstrap的css。

而我用的是代碼更小的w3 css,需要自己寫一段css。找到w3schools上很多關於分頁的例子

依樣修改css如下

.pagination {
    display: inline-block;
}

.pagination a {
    color: white;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
   
    background-color: #2196F3;
}

.pagination .active a {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #4CAF50;}

.pagination li { display: inline; }

.pagination a:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination a:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

如果你用大電腦看本網站,就是這樣的分頁效果。

分頁做成自適應樣式

缺省的分頁字符比較多,如果用手機訪問,1,2,3,4的太多用戶不方便。

w3 css可以很方便設置自適應,我們再做一個簡單的適合手機的版本,用w3-hide-large,w3-hide-mediumw3-hide-small來控製,即可實現自適應顯示分頁。

hugo模板此部分代碼如下:

<div class="w3-content" > 
  <div class="w3-bar w3-section w3-hide-large w3-hide-medium">
        
  {{ with $paginator.Prev -}}
  <a href="{{ .URL }}" class="w3-btn w3-text-indigo w3-hover-green">❮ Previous</a>
    {{- end }}
    {{ with $paginator.Next -}}
  <a href="{{ .URL }}" class="w3-btn w3-right w3-text-indigo w3-hover-green">Next ❯</a>
    {{- end }}
</div>
<nav class="w3-center w3-hide-small">{{ template "_internal/pagination.html" . }}</nav>
</div>

如此操作,用手機訪問本站,分頁就是兩個按鈕了。


通關文之懦弱關

中庸曰:“道不遠人,人之為道而遠人,不可以為道。”
至聖曰:“有能一日用其力於仁矣乎?我未見力不足者。”
悟真曰:“大藥不求爭得遇,遇之不煉是愚癡。”
古經雲:“道不虛行,待人而行。”
此皆言修道必須勇猛精進,而不可懦弱懈怠也。
夫人秉天地陰陽五行之正氣而生,為萬物之首。
不論貴、賤、賢、愚、剛柔、強弱,皆俱天地之全功,即可以載天地之大道。
故夫婦之愚,可以與知焉。
夫婦之不肖,可以能行焉,是在有誌無誌之間耳。
有誌,則柔弱者可變為剛強,剛強即可以漸登道岸。
無誌,則剛強者亦為柔弱,柔弱便不能超出苦海。
所謂誌者,剛決也、果斷也。
有此剛決果斷之誌,則世事不能染,恩愛不能牽,私欲不能起,名利不能誘,富貴不能淫,貧賤不能移,患難不能動。
隻知有道,不知有他;隻顧性命,不顧別事,一切身外之物,俱不能礙的。
可以聞道,可以修道。
無剛決果斷之誌,世事看不破,恩愛擺不脫,私欲掃不去。
見富貴而動心,處貧賤而移誌,遇患難而不受,日在假境而不識其假,身在苦海而不知其苦。
縱有一時道心發現,剛氣不振,旋生旋滅。
前怕狼,後怕虎,又怕餓著,又怕凍著,又恐勞碌身體,又恐學道不成耽誤現在,推委不前,主意不定,懦弱畏縮。
憑何而學道,憑何而聞道,憑何而行道?
世間糊塗學人,雖名學道,並不象學道之人;妄想聞道,並不作想道之事。
一日十二時中,何嚐有一時在身心性命上著意?
隻是講衣食、說是非、圖熱鬧、爭勝負。
一舉一動,與世人一般;或作或為,與俗人無異。
見有利處,鑽頭覓縫;遇行功處,藏身退步。
苦中作樂,夢裏行事。
弄虛頭渾身是剛,作正事四大無力。
絕不思身穿道衣,頭頂道巾,吃了十方脂膏,與自己作正經事,豈不是大便宜之事?
而反懈怠不力,虛度歲月,挪賬累債,無功受祿,如何開消?
況此修真之事,又不要你身軀出什麼大力氣,做什麼莽活路。
不過是心頭一點長久念頭,剛決誌氣,便能有造。
釋迦佛不是天上降下的,李老君不是地下長出的,孔夫子不是風中化成的。
同人耳目,同人皮肉,皆係先盡人功,而後得證聖位。
故孟子曰:堯舜與人同耳。
蓋以聖賢仙佛,皆自人修而成。
人人可以為聖賢,人人可以為仙佛。
特患懦弱無能,不肯自立剛誌耳。
吾勸真心學道者,速將懦弱關口打通。
穩定柱杖子,發勇猛誌,堅長久心,舉步向前,單刀直入,時時刻刻在性命上留心,行行步步在道理上窮究。
不知而必強求知,不明而必苦力明。
如遇明師,隻是一味誠心去參學。
亦不妄想口訣,亦不急問心傳。
就是教苦即去苦,教死亦要死,教餓亦要餓。
至於打罵磋磨,通皆喜受,絕無一點嗔恨,方能濟事。
特以受人之所不能受,始能得人之所不能得;苦人之所不能苦,始能知人之所不能知。
否則,一味懦弱,剛氣不振,便是無有力量,如何載的大道?妄想聞道,難矣。

此關懦弱並非指應與人爭強,通關文之五十關,均是針對自身,可做自省之用。

修道人是與天地爭,與人沒什麼爭頭。與天爭氣,與地爭力,與人爭柔

懦弱語出《左傳》:

“夫火烈,民望而畏之,故鮮死焉;水懦弱,民狎而翫之,則多死焉。”

其對治之法就是慈-念茲在茲

太上道祖道德經講到:

吾有三寶,持而保之;一曰慈;二曰儉;三曰不敢為天下先。慈故能勇。儉故能廣。不敢為天下先,故能成器長。

慈故能勇,念茲在茲,故可以勇猛精進。

寧可一思進, 莫可一思停

也是講的通此關之法。


Tags: hugo 通關文

author

Jesse Lau

網名遁去的一,簡稱遁一。2012年定居新西蘭至今,自由職業者。
本文采用知識共享署名 4.0 國際許可協議進行許可。簡而言之,可隨意轉發轉載,轉載請注明出處。


留点评论吧: