Will
Will
Apr 8, 2019 閱讀成本 5 分鐘

Hugo Blog 進化筆記

thumbnail for this post

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

目前使用 Hugo 我的網站

  • 未來6米:https://willliu.me
  • 塔香食譜:https://blog.he2.in
  • 官網:https://he2.in
  • 色調: 主色 #d79194, rgb(215,145,148) 深色 #00062b, rgb(0,6,43)

基礎設定(適用全體)

  • 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 檔案在想要出現的地方

最後更新日期

  • 在每一篇文章的表頭都加上 PublishDateLastMod 兩個日期,並自動判斷如果日期不相符,文章最後可以靠右顯示更新日期。
  • 使用 partial 的方式放置。

single-partials/lastmod.html

{{ if isset .Params "lastmod" }}
  {{ if ne .Lastmod .PublishDate }}
      <p style="text-align: right;">文章於 {{ .Lastmod.Format "Jan 2, 2006" }} 更新</p>
  {{ end }}
{{ end }}

日期函數

預設日期都將會是格林威治標準時間,如果需要修改時間,時間函數改使用:

publishdate = "2016-04-28T10:00:00+02:00"

Sourece: https://discourse.gohugo.io/t/convert-all-times-to-utc/3206/4

標籤雲

單獨設定標籤與分類樣式,需要在 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/

大小寫問題

Hugo 預設把 URL 中的大寫轉為小寫,加入下面這一行在 config.toml 可以取消這個功能。

disablePathToLower = true

分類(Categories)也會有一樣的問題,自動被轉換為小寫字母,加入下面程式碼,可以停用。

preserveTaxonomyNames = true

Source: https://jdhao.github.io/2018/10/10/hexo_to_hugo/#大小写问题

未來6米

  • 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

字元


Plugins

使用 Javascript 方便在不同的頁面內嵌,透過文字跟底圖的方式,可用一張底圖代表活動類型,並每次修改文字,減少製圖的時間與金錢成本。

  • 透過時間判斷,自動下架已經不再開放的活動,避免需要手動下架。

  • 使用 div-table 讓文字可以自動置中。

  • 因應會在不同裝置的情況,不自動放大縮小,還是開放 scroll bar 捲動。

    
      const EventRegEnd = Date.parse('08 Mar 2020 09:00:00 GMT+8'); //設定活動截止公告時間
    
      if ( EventRegEnd > Date.now())
      {
    
      document.writeln('<div style="display: table; overflow: hidden; width: 600px; height: 130px; max-height: 130px; margin: 0px auto; background-image: url(\'https://ik.imagekit.io/kuenwei/banner/20191208_EO_Background_800x150_ABaTu4uz3.png\'); background-repeat: no-repeat; background-size: cover; background-attachment: ; background-position: left top; padding-right: 1.5%; padding-left: 185px; border: 1px solid #333;">');
      document.writeln('<div style="display: table-cell; vertical-align: middle;">');
      document.writeln('<div>');
      document.writeln('<h3 style="font-size: 25px !important; margin:0px; margin-bottom: 3px; padding: 0px; text-align: left; line-height: 1.1em;">EO 公益體驗</h3>'); //活動標題
      document.writeln('<span style="font-size: 15px !important; font-family: sans-serif; line-height: 0.9em;">即日起至 2020/3/8 ,限額 15 人,額滿即止。</span>'); //活動文字
      document.writeln('<a href="https://he2.tw/eoevent" style="font-weight: bold; font-size: 15px !important; cursor: pointer; font-family: sans-serif !important;">【點此參加】</a>'); //活動連結
      document.writeln('</div>');
      document.writeln('</div>');
      document.writeln('</div>');
    
      }
    
    

參考資料

下面列出系列文章,方便有興趣的朋友點擊閱讀:

文章於 Mar 19, 2021 更新

【免費訂閱】「臨香」雙週報

每月第二與第四個週末,打開信箱直接看最新的:

1. 職場管理、個人成長與數位生活心法

2. 身、心、靈的能量技法與體驗分享

3. 13月亮曆宇宙共時訊息與提醒

訂閱服務確認

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

訂閱失敗

暫時無法接受訂閱,請稍候重新嘗試
如果您喜歡這篇文章,除了按讚、拍手,也歡迎分享到自己的社群中,文章採用創用 CC 姓名標示-非商業性-相同方式分享 3.0 台灣 授權條款授權,分享、引用請依授權規定,並附上原文連結(按右鍵複製連結):Hugo Blog 進化筆記