劉典宓
劉典宓
Apr 8, 2019 閱讀成本 4 分鐘

Hugo Blog 進化筆記

thumbnail for this post

把自己栽入 Hugo 成為網站的工具的人生,一點點紀錄,然後有計劃地慢慢往前進。

目前使用 Hugo 我的網站

基礎設定(適用全體)

  • Meta Tag 優化:單獨 partial 成一個頁面
  • SEO 優化研究:刪除重複
  • rss 訂閱頁面
  • 研究一下 .Paginate 函數(發覺來自 willliu.me)

Hugo 重要設定(已完成)

  • 感謝 Google 大神,網路上找到了一段設定值,這個很有用,基本上同時解決了許多問題,包含(1)字數統計失真;(2)摘要擷取判斷錯誤。

    hasCJKLanguage (false)
    If true, auto-detect Chinese/Japanese/Korean Languages in the content. This will make .Summary and .WordCount behave correctly for CJK languages.
    
    • RSS 更新 原 rss 僅顯示摘要,為了方便訂閱者閱讀,要做全文的更新,但遇到困難點:圖片需要改為絕對位置,不能使用相對位置。因此參考以下文章,並增修絕對路徑如下。

    檔案的部分,需要放在你選用主題底下 layouts/_default/rss.xml

    <description>{{ replaceRE "img src=\"(.*?)\"" (printf "%s%s%s" "img src=\"" .Site.Params.blogimgdir "$1\"") .Content | html }}</description>
    

    Source: https://randomgeekery.org/2017/09/15/full-content-hugo-feeds/ Source: https://ar.al/2018/07/01/refining-the-rss/

  • 更新圖片為絕對路徑 修改文章顯示文章的 partial HTML 內的 {{ .Content }} 如下。

    {{ replaceRE "img src=\"(.*?)\"" (printf "%s%s%s" "img src=\"" .Site.Params.blogimgdir "$1\"") .Content | safeHTML }}
    

    同時於 config.toml 增加函數

    [params]
      blogimgdir = "/blog/"
    

相關文章

  • 新增 partials HTML 檔案,原始檔案參考如下: Source: https://gohugo.io/content-management/related/
  • 修改 CSS 樣式

    .related-post {
      width:100%;
      height: auto;
      float:left;
      padding-top: 20px;
    }    
    .related-post h3 {
      font-family:  jf-jinxuan, sans-serif !important;
      font-weight: 600;
    }   
    .related-post ul{
      width:100%;
      list-style-position: inside;
      padding-left: 0;
    }    
    .related-post li{
      width:33%; // 一欄三列
      padding: 0px 5px;
      margin-bottom: 20px;
      float:left;
      display:block;
    }
    .related-post li p {
      background-color: #333;
      min-height: 3.5em;
      height: auto;
      padding: 5px;
      text-align: center;
    }
    .related-post li a {
      color: #fff;
    }
    .related-post img {
      width: 100%;
      max-height: 150px;
      object-fit: cover; //圖片裁切
    }
    
  • 增加 partial 檔案在想要出現的地方

標籤雲

單獨設定標籤與分類樣式,需要在 layouts/_default/ 新增樣式設定檔案 term.html(或其他可用的檔案名稱),並設定成自己想要的模板。記得頭尾的 partial 都要引入。

Source: http://www.g-var.com/posts/translation/hugo/hugo-36-taxonomy-templates/
Source: https://gohugo.io/templates/lookup-order/
Source: https://bwaycer.github.io/hugo_tutorial.hugo/templates/terms/
Source: https://www.sidorenko.io/post/2017/07/nice-tagcloud-with-hugo/
Source: https://note.qidong.name/2017/10/hugo-taxonomy/

未來 Liu.me

  • Tags/Categories 頁面的樣式設定:移除方框下面的多餘訊息,並看是否能夠增加每個分類的總數
  • blog/media 改為絕對路徑
  • Footer 上下篇文章的對齊方式
  • 尾部的版權
  • 思考是否加入 Disqus 留言平台

  • 電子郵件訂閱〈短期方案 2019.4.8〉

    先透過 Google Feedburner 收集 Email,未來在考慮是否移轉至電子報系統,目前參考系統為台灣廠商「電子豹」,但因正值改版時期,新版的訂閱表單還在開發中,尚無法透過表單收集。

    離開 Upscribe 的原因:(1) 無法自訂表單,代表活化的程度不高;(2) 已經不再使用 Medium 收集 Email,Upscribe 優勢較低。


  • Table 相關 css 修改〈已完成 2019.4.13〉

    Hugo 支援使用 Markdown 語法建立的表格(但原始 Markdown 即不支援合併儲存格功能),因此需要自訂表格樣式。參考如下程式碼,並以黑白為設計樣式。

    Source: https://codepen.io/cssgrid/pen/pRXQzW

    Source: https://pjchender.blogspot.com/2015/12/table-with-border-radius.html

    {
      box-sizing: border-box;
    }
    html {
      font-family: helvetica;
    }
    html, body {
      max-width: 100vw;
    }
    table {
     margin: auto;
      border-collapse: collapse;
      overflow-x: auto;
      display: block;
      width: fit-content;
      max-width: 100%;
      box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
    }
    td, th {
      border: solid rgb(200, 200, 200) 1px;
      padding: .5rem;
    }
    th {
      text-align: left;
      background-color: rgb(190, 220, 250);
      text-transform: uppercase;
      padding-top: 1rem;
      padding-bottom: 1rem;
      border-bottom: rgb(50, 50, 100) solid 2px;
      border-top: none;
    }
    td {
      white-space: nowrap;
      border-bottom: none;
      color: rgb(20, 20, 20);
    }
    td:first-of-type, th:first-of-type {
      border-left: none;
    }
    td:last-of-type, th:last-of-type {
      border-right: none;
    }
    td:first-child{
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    }
    td:last-child{
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    
  • Table css 修改後,思考如何變成 Responsive〈已完成 2019.4.13〉

    本次採用若寬度小於表格寬度,則出現橫向 scroll bar 的方式,一方面是考慮資訊的完整性(以提供資訊為主的寫作方向),同時也能夠影響到最少的版型,構思的時候,有想到符碼記憶的表現方式。

    Source: https://codepen.io/cssgrid/pen/pRXQzW

    table {
      margin: auto;
      border-collapse: collapse;
      overflow-x: auto;
      display: block;
      width: fit-content;
      max-width: 100%;
      box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
    }
    
  • 作者下面增加 Categories 欄位〈已完成 2019.4.9〉

  • 連外網頁自動開新視窗〈已完成 2019.4.8〉

    在頁尾 </body> 前面加上以下程式碼

    Source:https://gist.github.com/CrocoDillon/7989214

    <!--判斷網域後外連網址-->
    <script type="text/javascript">
      var links = document.links;
    for (var i = 0, linksLength = links.length; i < linksLength; i++) {
        if (links[i].hostname != window.location.hostname) {
            links[i].target = '_blank';
        } 
      }
    </script>
    
  • 左上角的 logo 改連至部落格主頁〈已完成 2019.4.8〉

    暫時使用絕對路徑後面連綴 /blog/

  • 本文內的超連結改為黑色字體,主色的底線,移動過去後改變字體顏色(參考報導者網站後的想法)〈已完成 2019.4.8〉

    透過 css 單獨設定文章區塊的 a 以及 a:hover

  • LINE 的分享按鈕製作〈已完成 2019.4.7〉

    Source: https://org-media.line.me/zh_TW/how_to_install#lineitbutton


其他

  • 研究 relLangURL、absURL
  • 研究 urlize
  • 電子報訂閱更新:Herearoma 首頁下方,blog 如何增加?

Hugo 函數研究

Replace

  • replaceRE:可以規則表達式當替代目標的

HTML

字元


參考資料

💡猜你也喜歡

訂閱我們➼不錯過每個開櫃時分

感謝閱讀!如果想要第一時間收到文章與活動通知,請於下方欄位填寫您的 Email,之後將會收到不定期電子報。

訂閱服務確認

已發送 Email 驗證信給你,請點擊信件連結以完成訂閱程序

訂閱失敗

暫時無法接受訂閱,請稍候重新嘗試

Publish by Herearoma & willliu.me