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-medium和w3-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>

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

通關文之懦弱關

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

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

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

懦弱語出《左傳》：

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

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

太上道祖道德經講到：

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

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

寧可一思進， 莫可一思停

也是講的通此關之法。

相关文章:

• 2018/11/11   設置Manticoresearch搞定Hugo站點的搜索引擎以及口舌關
• 2018/11/08   用git的webhook實現快速更新Hugo網站以及恩愛關
• 2018/11/08   從Wordpress遷移至Hugo以及不信關
• 2018/11/12   Nginx rewrite URL, Python圖片壓縮代碼以及自滿關
• 2018/10/31   網頁內嵌pdf文件以及生死關