2019-04-08

Hugo Blog 進化筆記

目前使用 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></description>

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

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

    同時於 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


  
      <p style="text-align: right;">文章於  更新</p>
  

日期函數

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

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/, https://gohugo.io/templates/lookup-order/, https://bwaycer.github.io/hugo_tutorial.hugo/templates/terms/, https://www.sidorenko.io/post/2017/07/nice-tagcloud-with-hugo/, 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/#大小写问题

圖片文字或標題(Caption)自動帶入

Markdown 已經主宰了我現在主要的每天寫作、筆記以及網站的內容。因此,盡可能地找到 Hugo 相容於 Markdown 的機會,當然能夠大幅的提升自己的效率。過去,我通常要自己設定一個 <h4>,然後透過 css 設定,來達到圖片下面附帶標題的功能。

隨著自己技術能力進步,發現原來這些可透過 markup 去完成,而且有點小技巧。

  • 請在 config.toml 裡面增加下面的程式碼,開啟 markup 支援 Content 有 HTML 的功能。
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
  • 在目錄下面增加,路徑如下。我自己是增加在模板的路徑下,有一說是增加在跟目錄下面,大家都可以參考看看。 layouts/_default/_markup/render-image.html

  • render-image.html 內部增加如下程式碼。

<figure>
  <center> <!-- 可不增加,因為我都是讓圖片滿版,所以我沒有加 -->
    <img src="" alt="">
    <figcaption></figcaption>
  </center> <!-- 可不增加,因為我都是讓圖片滿版,所以我沒有加 --> 
</figure>

以上是簡略版本,但我自己做了一些變動:

  • 增加判斷是否有 Caption 可用的文字;
  • Caption 可用的文字先拿取 Title,沒有的話再用 Text,都沒有則省略。

  <figure>
    <img src="" alt="">
    <figcaption></figcaption>
  </figure>

  <figure>
    <img src="" alt="">
    <figcaption></figcaption>
  </figure>

  <img src="" alt="圖片">

這樣一來,我就不用每個圖片都需要設定跟註解文字不一樣的標題了,下面說明 TitleText 的設定。

![圖片註解](圖片位置 "圖片標題")

上面的 圖片註解 就是我們所用的 .Text圖片標題 則是我們使用的 .Title。也就是,其實用 Markdown 我們可以設定兩個文字段,這一點就提供更多變化的可能。例如,我們可以在圖片前使用「圖片標題 .Title」、下面才附上「圖片註解 .Text」,在書籍或者學術文章的時候,這就很好使用。

Source: 让 Hugo 自动给图片加上说明文字Hugo 设置 markdown 图片的标题

主選單(Main Menu)的新增方法

找到一個很棒的方式,既可以設定每一個單頁的標題,也可以直接設定出現在主選單中。直接在該頁的 Markdown Front Matter 增加下面的內容。

menu: 
    main:
        name: title (optional)
        weight: -90

Source:自定义菜单 - Hugo Theme Stack

Widget

搜尋功能

Hugo 本身有許多建議的站內搜尋功能,但因為都需要額外設定或者讀取 Javascript,一方面要啟用的話太複雜,另外一方面看起來效能會被影響,但隨著文章日益增加,搜尋功能的必要性,讓我花了一些時間,去思考解方。

當中看到不少關於使用 Google 當作站內搜尋,剛好找到一篇很棒的技術文章,就這樣加上去囉!很詳細,讓我快速的完成這件事情,大家可以參考下方的資料來源。

不過剛好網站正在整合,發現許多網址都沒有更新,而且自己沒有把 willliu.me / herearoma.com 的網域登記到 Google Search Console,這樣才能確保更新狀態。

Source: 將 Google自訂搜尋引擎 (Google Custom Search) 搭配 OpenSearch 加至 Hugo 網站中

網站專屬設定

未來六米

  • 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, 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>');
    
      }
    

參考資料