[連線] 小白也能用hugo架設屬於自己的網站-6 修改網站分類頁面中的設定,以及不同的MarkDown渲染器設定 - 教學區

[連線] 小白也能用hugo架設屬於自己的網站-6 修改網站分類頁面中的設定,以及不同的MarkDown渲染器設定

文章瀏覽次數 47

小羔羊

小羔羊圖像(預設)

2022-05-10 18:05:25

From:114.34.171.78

小白也能用hugo架設屬於自己的網站-6 修改網站分類頁面中的設定,以及不同的MarkDown渲染器設定

這篇要來介紹meme主題模板中,關於網站中的分類選單,以及markdown的渲染器設定,
(分類)就是上篇我們介紹過的categories,所有文章中有用到categories參數的文章,都跟這篇的設定息息相關,
categories在下面我會以(分類)來稱呼它,比較方便我描述,
接下來的這些設定,都會透過修改專案設定檔,也就是修改config.toml檔案來完成,
開始修改前,強烈建議你也跟前幾篇一樣,啟動虛擬網站server,
親自操作一下修改前後的差別,再根據你自己的想法看看是否要進行修改,
另外,下面的設定並不會影響之後網站的運作,但可能會影響使用螢幕閱讀器操作以及閱讀時的便利性,
基本上,我推薦的設定,都是以螢幕閱讀器軟體的操作便利性為考量,
因此,在視覺上不見得會有更好的效果,當然,你也可以找明眼的朋友幫你看一看差別喔!

設定網站的分類頁面

接下來,我們來修改專案設定檔中,關於分類頁面中的相關參數,
每一個功能,你都能自由選擇要不要用跟我一樣的設定,
設定前後建議也親自操作一下自己的網站,看看究竟有沒有需要修改囉!

  1. 找到你的專案資料夾,並用記事本或notepad++打開專案設定檔,也就是
    config.toml
  2. 利用ctrl+f搜尋功能,找=(等號)前面的英文單字進行搜尋,可以快速找到參數
  3. 下面這些參數,自己嘗試看看是否需要修改,記得true是開啟,false是關閉→
    • 是否開啟樹狀佈局
      enableTree = false
      說明:預設是true,在true模式下會以樹狀目錄顯示每個分類,以及分類下的所有文章,
      在設定為false之後,所有的分類會以標題來顯示,使用螢幕閱讀器時就能按h快速在分類中跳轉,比較方便
  4. 是否顯示文章標題
    displayPosts = false
    說明: 這個功能是在進入分類頁面後,每個分類標題後面要不要再顯示分類下的文章連結,
    當使用true時,每個分類連結後面都會接分類下的文章連結,如果需要在不同的分類中跳轉時,就需要先跳過前一個分類的文章,才能看到下一個分類,比較麻煩,
    因此,我改為false,這樣進入分類頁面後,看到的只有所有的分類,要閱讀文章就只要點進相應的分類才能看到文章
    • 是否顯示每一分類下的文章數
      displayPostsCount = true
      說明: 這個參數能在分類頁面中的每個分類標題後顯示數字,以此表示分類下有多少篇文章,在此我設為true
    • 是否按月份分隔列表
      groupByMonth = true
      說明: 這個參數是在某個分類下,是否要以文章的發布月份,在文章前面加一個月份的標題,以此區分不同月份發布的文章,在此我設為true
    • 是否開啟十二生肖
      chineseZodiac = false
      說明: 這個參數是在分類下,年份的標題要不要有十二生肖的內容,不過在測試的過程中,我沒有找到十二生肖究竟出現在哪裡,因此設為false
  5. 修改完參數後,按
    ctrl+s
    來儲存,但先別急著關閉視窗,後面我們還需要修改專案設定檔

meme主題模板中的MarkDown渲染

前一篇有稍微提到過,markdown在不同的網站可能會有些許的差別,
這個差別不僅在於markdown的語法,不同的markdown渲染器設定,也會影響最後顯示的內容,
到此,我就來簡單介紹一下(渲染)到底是什麼,
如果你有看完整個專案設定檔,你應該會在很多地方看到下面這行注釋→

# 說明:僅在生產環境(production)下渲染

這行提到的(生產環境)是最後我們把專案資料夾轉為網站資料夾的意思,也就是只有在轉為網站資料夾後,該說明下的功能才會啟用,
而(渲染)指的就是轉換的意思,
前面你在cmd裡用指令啟動了虛擬網站server,其實就是將專案資料夾渲染成網站的動作,只不過這個網站僅供測試和預覽,
關於將專案資料夾渲染成網站資料夾,我會在本系列最後一篇進行說明。

預設的渲染

預設的渲染器有個特點,
當你的文章有用手動換行時,在渲染之後,排版會跟你在文字編輯器裡看到的不一樣,
很多時候渲染器會將好幾行的文字合成一行,以將一整行填滿,
但因為NVDA有限制一行的最大閱讀字數,在閱讀時一旦字數超過100,就會被自動截斷換到下一行,
在這種情況下,容易產生一個詞的第一個字在上一行的末尾,後一個字在下一行的行首,
在閱讀時呈現的也不是作者想要呈現給讀者的排版,並且把好幾行合到一行也不利於閱讀,
比方說下面這個例子→

◦ Amount [%]滑桿100.0Enter Matching SliderGroup Slider Readout100 匹配的等級,最大是100%,也就是最大程度匹配,在 Amount [%]滑桿100.0Enter 這裡按上、下可以調整數值

我使用的渲染模式

而如果按照我想給讀者的排版,長的會像這樣→

◦ Amount [%]滑桿100.0Enter
Matching SliderGroup Slider Readout100
匹配的等級,最大是100%,也就是最大程度匹配,在
Amount [%]滑桿100.0Enter
這裡按上、下可以調整數值

修改專案設定檔中的MarkDown

因此,為了不讓這種狀況發生,我會修改專案設定檔,按照下面的步驟修改→

  1. 用記事本或notepad++打開專案設定檔
  2. 按ctrl+f,搜尋框輸入
    hardWraps
    按enter,之後按ESC退出搜尋
  3. 你會看到這行
    hardWraps = false
    將參數改為true,改完後會像這樣→
    hardWraps = true
  4. ctrl+s儲存檔案後關閉視窗,完成修改!

最後更新:2022-05-21 14:10:42

From: 114.34.171.78

By: 小羔羊