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 国际许可协议进行许可。简而言之,可随意转发转载,转载请注明出处。


留点评论吧:

本网站使用cookie技术以提高用户体验度。 了解我们的隐私政策 我已了解