共享條自適應設計以及冷熱關
之前寫個一個小帖子來介紹怎麼做左側共享條，我設計這個Hugo模板也采用了同樣的設計。
前兩天有一位國際友人在github上open了一個issue，說是需要修改一下這個共享條的自適應。因為我當時很簡單的處理了一下，當屏幕寬度小於1024px時，自動取消固定在左側的屬性，就放在屏幕下方。那長的就是這個樣子的。
如果用手機瀏覽，倒也無所謂，但如果用ipad之類的瀏覽，這個共享按鈕就太大了。
我在github是新手上路，也不知道open一個issue是什麼意思。就等兩天看看。
今天一看這個issue已經關閉了，但似乎也沒有接到關於此處的修改，那我自己來吧。
共享條自適應設計
設置css
@media screen and (min-width: 1025px)
{
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
}
@media screen and (max-width: 1024px) {
.icon-bar {
position: relative;
width: 100%;
max-width: 350px;
margin-left: auto;
margin-right:auto;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.bookmark {
border-radius: 36px 0px 0px 36px!important ;
}
.linkedin {
border-radius: 0px 36px 36px 0px!important;
}
}
.icon-bar a:hover {
background-color: #000;
}
.bookmark {
background: #bb0000;
color: white;
border-radius: 36px 36px 0px 0px;
}
.facebook {
background: #3B5998;
color: white;
}
.twitter {
background: #55ACEE;
color: white;
}
.google {
background: #dd4b39;
color: white;
}
.linkedin {
background: #007bb5;
color: white;
border-radius: 0px 0px 36px 36px;
}
用javascript生成共享按鈕
<script>
shareurl=encodeURIComponent(location.protocol + '//' + location.host + location.pathname);
sharetitle=encodeURIComponent(document.title);
</script>
<div class="icon-bar">
<script>
document.write( '<a href="javascript:bookmark();" class="bookmark w3-tooltip"><i class="fa fa-bookmark"></i><span style="position:absolute;left:40px;bottom:18px" class="w3-text w3-small w3-tag w3-round w3-green ">Bookmark this page</span></a> ');
document.write( '<a href="http://www.facebook.com/sharer.php?u='+shareurl+'" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;" class="facebook w3-tooltip"><i class="fa fa-facebook "></i><span style="position:absolute;left:40px;bottom:18px" class="w3-text w3-small w3-tag w3-round w3-green">Share to Facebook</span></a> ');
document.write( '<a href="https://twitter.com/share?url='+shareurl+'&text='+sharetitle+'" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;" class="twitter w3-tooltip"><i class="fa fa-twitter"></i><span style="position:absolute;left:40px;bottom:18px" class="w3-text w3-small w3-tag w3-round w3-green">Share to Twitter</span></a> ');
document.write( '<a href="https://plus.google.com/share?url='+shareurl+'" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;" class="google w3-tooltip"><i class="fa fa-google"></i><span style="position:absolute;left:40px;bottom:18px" class="w3-text w3-small w3-tag w3-round w3-green">Share to Google Plus</span></a>');
document.write( '<a href="http://www.linkedin.com/shareArticle?mini=true&url='+shareurl+'" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;" class="linkedin w3-tooltip"><i class="fa fa-linkedin"></i><span style="position:absolute;left:40px;bottom:18px" class="w3-text w3-small w3-tag w3-round w3-green">Share to Linkedin</span></a>');
</script>
<script>
function bookmark(){
if ('sidebar' in window && 'addPanel' in window.sidebar) {
window.sidebar.addPanel(location.href,document.title,"");
} else if( /*@cc_on!@*/false) { window.external.AddFavorite(location.href,document.title);
} else {
alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
}
}
</script>
</div>
更新了一下，發現按鈕橫放時，鼠標放在按鈕時的提示被旁邊的按鈕遮擋住了，這是因為我采用w3.css的w3-tooltip沒有考慮到這一節。那我就繼承修改一下這個w3-tooltip的css。加一句z-index: 1即可。
.w3-tooltip:hover .w3-text{z-index: 1;display:inline-block}
好了，自適應共享條就實現了，可以縮小屏幕看看效果。
通關文之冷熱關
老祖雲：“外其身而身存。”
文始雲：“冬禦風而不寒，夏禦火而不熱。”
呂祖雲：“求生而不生，未死先學死。”
此皆言其為道忘軀，而不避寒暑也。
夫修道者，先要看破幻化之身，置色身於度外。
死且不懼，何況冷熱？
故神光少林寺求法，雪擁過膝而不知；太古趙州橋冷坐，水淹將沒而不曉；釋迦佛雪山修道，受盡多少苦楚；長春祖磻溪磨性，受盡多少饑寒！
即近世白石鎮梁真人，破衣垢麵，長年不倒身，未曾歇息。
西寧府張睡仙，水泉長臥，赤身露體，四十餘年猶如一日。
梭羅仙河灘磨煉，狗皮仙冰灘睡眠，仙留師黃沙下苦，皆是不避冷熱，舍的色身，成的法身也。
世間糊塗學人，不知香從臭出，甜向苦來。
誤認色身為真實，而遂愛之惜之，隻圖自在將養。
遇冷而即想暖處，逢熱而即思涼處。
怕冷怕熱，隔絕道念。
卻不思性命為人生第一件大事，豈可因冷熱之小事而誤性命之大事乎？
果是真為性命者，即生死關口、大難境界，亦要脫脫灑灑過去。
至於寒暑冷熱，何足在意？
雖未成道之先，色身亦不可壞。
但粗衣護體，將就過去便休。
不必以冷熱常掛心頭。
遇冷時亦須受冷，逢熱時亦須受熱。
熱之冷之，與時偕行而已。
與時偕行，非是不該受冷一定教受冷，不該受熱一定教受熱。
若不該受冷而必欲受冷，不該受熱而必欲受熱，此有心做作，亦是固執不通，枉自受罪。何益於事？
大抵怕冷怕熱，雖是小節，甚礙於道。
倘有些兒冷熱之見，便有無限邪思妄想生出。
遇冷必設法要不冷，遇熱必設法要不熱。
認假失真，豈不誤了多也？
吾勸真心學道者，速將冷熱關口打通。
隨時將就，到處安身。
冷可也，熱可也，不至凍死熱死便休。
萬不因冷熱而起無明。
否則，有冷熱在心，心有所恐懼，則不得其正；有所憂患，則不得其正。
心且不得其正，妄想明道，難矣。
此關所言來自天時，以我本人經曆，並不易過。
熱時倒未有何關礙，有時冷時，站樁或安坐殊難以集中精神，如今細想之，大抵是因為運動時衣物較少，而守靜時衣物未增，故此無端多出一層關礙。
此關需要以與時偕行之原則過之，與時偕行本身也是天人合一之初始版本。
相关文章:
- 2018/11/23 滑屏進度條實現以及誇揚關
- 2018/10/31 網頁內嵌pdf文件以及生死關
- 2018/10/30 擁抱Bootstrap 4 –先整一個固定瀏覽條以及輕慢關
- 2018/10/29 Javascript實現左側共享條以及恥辱關
- 2018/10/24 點擊搜索框顯示熱門搜索以及暴燥關
Jesse Lau
網名遁去的一，簡稱遁一。2012年定居新西蘭至今，自由職業者。
本文采用知識共享署名 4.0 國際許可協議進行許可。簡而言之，可隨意轉發轉載，轉載請注明出處。