Hugo構建靜態站點入門

2020 年 1 月 19 日
筆記

很多站長開發網站時為了推廣頁面，或者獲得更多的回訪和流量，會在網站頁面添加「分享到」插件，用來發布到某些社交網站。因此社會化分享是很多網站常用的功能之一，中國也有很多專業的公司在做，比較出名的包括 j*this，B*hare 等。不過很悲傷的是，這些公司的產品，無一例外的具有一個特點：奇醜無比。丑就算了，還不允許別人修改其設計，結果就是，再好的 UI 設計也毀在這些插件手裡了。

還好我發現了一款簡單高效的社交分享組件，只看一眼便可以確認這就是我要尋找的那個它。直接上預覽，你看完一定會喜歡上：

1. 簡介

share.js 是一款簡單高效的社交分享組件，直接引入使用即可，無須依賴其他庫。它有以下這些特點：

一個標籤完成初始化自定義啟用/禁用分享站點更美觀的 UI 體驗基於標籤data屬性輕鬆實現分享數據的自定義支援分別對不同站點設置分享內容同頁面個分享組件支援npm安裝

由於我的部落格使用的是 hugo，而且使用的主題是 Jimmy Song 的 beautifulhugo，官方文檔提供的安裝方式不適用，需要稍作改動。

如果你使用的是其他主題，安裝方式類似，你可以自己研究一下。

導入靜態資源首先克隆 share.js 的程式碼倉庫：

1	$ git clone https://github.com/overtrue/share.js

然後分別將 css、js 和 fonts 拷貝到 beautiful 主題中的相應目錄下：

1 2 3 4	# <hugo_home> 表示 hugo 的根目錄 $ cp share.js/css/share.min.css <hugo_home>/themes/beautifulhugo/static/css/ $ cp share.js/js/social-share.min.js <hugo_home>/themes/beautifulhugo/static/js/ $ cp -r share.js/fonts/* <hugo_home>/themes/beautifulhugo/static/fonts/

默認的 css 樣式圖標太小，我稍微調整了一下，將圖標放大一點，修改後的 css 內容如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

$ cat <hugo_home>/themes/beautifulhugo/static/css/share.min.css @font-face{font-family:"socialshare";src:url("../fonts/iconfont.eot");src:url("../fonts/iconfont.eot?#iefix") format("embedded-opentype"),url("../fonts/iconfont.woff") format("woff"),url("../fonts/iconfont.ttf") format("truetype"),url("../fonts/iconfont.svg#iconfont") format("svg")} .social-share{font-family:"socialshare" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale} .social-share *{font-family:"socialshare" !important} .social-share .icon-tencent:before{content:"f07a"} .social-share .icon-qq:before{content:"f11a"} .social-share .icon-weibo:before{content:"f12a"} .social-share .icon-wechat:before{content:"f09a"} .social-share .icon-douban:before{content:"f10a"} .social-share .icon-heart:before{content:"f20a"} .social-share .icon-like:before{content:"f00a"} .social-share .icon-qzone:before{content:"f08a"} .social-share .icon-linkedin:before{content:"f01a"} .social-share .icon-diandian:before{content:"f05a"} .social-share .icon-facebook:before{content:"f03a"} .social-share .icon-google:before{content:"f04a"} .social-share .icon-twitter:before{content:"f06a"} .social-share a{position:relative;text-decoration:none;margin:4px;display:inline-block;outline:none} .social-share .social-share-icon{position:relative;display:inline-block;width:42px;height:42px;font-size:25px;border-radius:50%;line-height:37px;border:2px solid #666;color:#666;text-align:center;vertical-align:middle;transition:background 0.6s ease-out 0s} .social-share .social-share-icon:hover{background:#666;color:#fff} .social-share .icon-weibo{color:#ff763b;border-color:#ff763b} .social-share .icon-weibo:hover{background:#ff763b} .social-share .icon-tencent{color:#56b6e7;border-color:#56b6e7} .social-share .icon-tencent:hover{background:#56b6e7} .social-share .icon-qq{color:#56b6e7;border-color:#56b6e7} .social-share .icon-qq:hover{background:#56b6e7} .social-share .icon-qzone{color:#FDBE3D;border-color:#FDBE3D} .social-share .icon-qzone:hover{background:#FDBE3D} .social-share .icon-douban{color:#33b045;border-color:#33b045} .social-share .icon-douban:hover{background:#33b045} .social-share .icon-linkedin{color:#0077B5;border-color:#0077B5} .social-share .icon-linkedin:hover{background:#0077B5} .social-share .icon-facebook{color:#44619D;border-color:#44619D} .social-share .icon-facebook:hover{background:#44619D} .social-share .icon-google{color:#db4437;border-color:#db4437} .social-share .icon-google:hover{background:#db4437} .social-share .icon-twitter{color:#55acee;border-color:#55acee} .social-share .icon-twitter:hover{background:#55acee} .social-share .icon-diandian{color:#307DCA;border-color:#307DCA} .social-share .icon-diandian:hover{background:#307DCA} .social-share .icon-wechat{position:relative;color:#7bc549;border-color:#7bc549} .social-share .icon-wechat:hover{background:#7bc549} .social-share .icon-wechat .wechat-qrcode{display:none;border:1px solid #eee;position:absolute;z-index:9;top:-205px;left:-84px;width:200px;height:192px;color:#666;font-size:12px;text-align:center;background-color:#fff;box-shadow:0 2px 10px #aaa;transition:all 200ms;-webkit-tansition:all 350ms;-moz-transition:all 350ms} .social-share .icon-wechat .wechat-qrcode.bottom{top:40px;left:-84px} .social-share .icon-wechat .wechat-qrcode.bottom:after{display:none} .social-share .icon-wechat .wechat-qrcode h4{font-weight:normal;height:26px;line-height:26px;font-size:12px;background-color:#f3f3f3;margin:0;padding:0;color:#777} .social-share .icon-wechat .wechat-qrcode .qrcode{width:105px;margin:10px auto} .social-share .icon-wechat .wechat-qrcode .qrcode table{margin:0 !important} .social-share .icon-wechat .wechat-qrcode .help p{font-weight:normal;line-height:16px;padding:0;margin:0} .social-share .icon-wechat .wechat-qrcode:after{content:'';position:absolute;left:50%;margin-left:-6px;bottom:-13px;width:0;height:0;border-width:8px 6px 6px 6px;border-style:solid;border-color:#fff transparent transparent transparent} .social-share .icon-wechat:hover .wechat-qrcode{display:block}

主要修改了這一段：

1	.social-share .social-share-icon{position:relative;display:inline-block;width:42px;height:42px;font-size:25px;border-radius:50%;line-height:37px;border:2px solid #666;color:#666;text-align:center;vertical-align:middle;transition:background 0.6s ease-out 0s}

將分享插件嵌入到網頁中為了將分享插件嵌入到每篇文章的網頁中，我們需要修改一些模板。首先需要引入 css 樣式，通過修改文件 /themes/beautifulhugo/layouts/partials/head.html，在其中引入 share.min.css。

1 2 3 4 5 6 7 8 9 10

… <!– bootcss cdn 國外訪問太慢 –> <!– <link rel="stylesheet" href="https://cdn.bootcss.com/KaTeX/0.7.1/katex.min.css" /> <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" /> –> <link rel="stylesheet" href="{{ "css/main.css" | absURL }}" /> <link rel="stylesheet" href="{{ "css/share.min.css" | absURL }}" /> …

然後在 /themes/beautifulhugo/layouts/partials/目錄下創建一個 html。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$ cat <hugo_home>/themes/beautifulhugo/layouts/partials/share.html <div class="social-share" data-initialized="true" data-wechat-qrcode-title="不掃別後悔"> <center> <font style="font-size:18px;color:darkcyan;">分享到：</font> <a href="#" class="social-share-icon icon-weibo"></a> <a href="#" class="social-share-icon icon-wechat"></a> <a href="#" class="social-share-icon icon-twitter"></a> <a href="#" class="social-share-icon icon-linkedin"></a> <a href="#" class="social-share-icon icon-facebook"></a> <a href="#" class="social-share-icon icon-qq"></a> <a href="#" class="social-share-icon icon-qzone"></a> </center> </div> <!– css & js –> <script src="https://hugo-picture.oss-cn-beijing.aliyuncs.com/social-share.min.js"></script>

修改模板 /themes/beautifulhugo/layouts/_default/single.html，載入 share.html。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="container" role="main" itemscope itemtype="http://schema.org/Article"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> <!– post metadata–> {{ if isset .Params "postmeta" }} {{ else }} {{ partial "postmeta.html" . }} {{ end }} <article role="main" class="blog-post" itemprop="articleBody" id="content"> … {{ .Content }} {{ partial "share.html" }} </article> …

如果你想讓某些頁面不開啟分享插件，可以通過參數 (.Params.noshare) 來控制是否載入分享插件。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

這樣我們就可以在頁面中通過 noshare 參數來控制了。如下是不想載入分享插件的文章的 meta 資訊參數：

1 2 3 4 5 6	— title: xxxxxx date: xxxxxx … noshare: true —

3. 更多

關於分享插件的更多自定義配置請參考程式碼倉庫的 README。