[連線] 小白也能用hugo架設屬於自己的網站-7 修改網站的頁尾設定,把自己的rss、聯絡方式、youtube頻道等放到網站底部 - 教學區

[連線] 小白也能用hugo架設屬於自己的網站-7 修改網站的頁尾設定,把自己的rss、聯絡方式、youtube頻道等放到網站底部

文章瀏覽次數 71

小羔羊

小羔羊圖像(預設)

2022-05-14 11:53:56

From:114.34.171.78

小白也能用hugo架設屬於自己的網站-7 修改網站的頁尾設定,把自己的rss、聯絡方式、youtube頻道等放到網站底部

這篇要介紹的是網站的頁尾,所有的設定終於快到尾聲了,希望你還能繼續完成網站的最後一塊拼圖啦,
OK! 接下來一起來看看,究竟什麼是頁尾,以及該如何修改囉!

什麼是網站的頁尾

(頁尾)其實就是網站中底部的區塊,
如果之前介紹過的選單是在網站頁面中的上面,那頁尾就是在網站頁面中的下面,
通常在頁尾都會留下作者自己的mail、rss的訂閱連結、你的youtube頻道、FB之類的內容,
但東西太多也會讓瀏覽網站的人眼花撩亂,因此放什麼內容會讓訪客更容易找到你,就是你需要思考的問題囉!

頁尾的檔案設定

頁尾的設定分為兩個部分,一個是修改專案設定檔,另一個是頁尾社交欄的設定檔。

修改專案設定檔中關於頁尾的參數

下面介紹的參數是影響頁尾是否能顯示出來的參數,以及幾個比較重要的參數,
在專案設定檔中還有一些跟頁尾有關的參數,不過有些是視覺上比較有差異的,有些則不那麼重要,就不在下面列出了。

  1. 找到你的專案資料夾,用記事本或notepad++開啟專案設定檔,也就是
    config.toml
  2. 在檔案裡利用ctrl+f的搜尋功能,搜尋下面=(等號)前面的參數名稱,快速找到那一行並進行修改,
    記得true是開啟、false是關閉喔→
    • 是否在文章頁面顯示頁尾
      displayFooter = true
    • 是否在首頁顯示頁尾
      displayFooterInHome = true
    • 是否顯示站點的版權資訊
      displaySiteCopyright = true
    • 自定義頁尾(支援 Markdown)
      customFooter = ""
      這個參數很重要,你可以用markdown在頁尾的開頭加上標題或分隔線,以跟網頁的其他部分區分開來,
      要特別注意的是,如果要換行,不是直接按enter換行,而是輸入\n
      例如下面這樣→
      customFooter = "--- \n ## 頁尾"
      這樣輸入後,在頁尾開始的區塊就會先看到一條分隔線,然後多出一個寫有(頁尾)的二級標題
    • 流量統計
      displayBusuanziSiteUVAndPV = true
      這個參數只有在最後渲染成網站資料夾,並放到真正的server中時才會生效,因此你在虛擬網站server看不到這個參數帶來的流量統計
    • 社交連結
      enableSocials = true
      這個參數必須要開啟,否則在首頁跟其他頁面都看不到頁尾的社交欄

修改頁尾社交欄的設定檔

  1. 你需要先從meme的主題模板資料夾中,複製一個社交欄的模板檔案來用,
    首先,找到你的專案資料夾,並依序找下面這幾個資料夾並按enter進入→
    themes
    data
    最後找到這個檔案並按ctrl+c複製→
    Socials.toml3 之 2
  2. 回到專案資料夾的根目錄,並找到
    data
    資料夾,enter進入後,按ctrl+v貼上檔案,之後你會看到→
    Socials.toml
    用記事本或notepad++打開它
  3. 修改的方法類似前面修改選單的概念,不過參數稍有不同,下面我拿幾個例子舉例→
    • 每一個頁尾的選單,都需要有的開頭參數
      [[socials]]
    • 這個選單的名字,隨意即可
      id = "rss"
    • 這個選單的路徑,下面這個例子是指向網站資料夾內的rss.xml
      url = "/rss.xml"
    • 這個選單的圖片
      icon = "rss"
    • 這個選單要顯示在網頁上的名字
      title = "訂閱RSS"
    • 這個選單在整個頁尾社交欄的順序
      weight = 1
  4. 另外要注意的是,每個選單開頭的
    [[socials]]
    都是不空格的,在它下面的參數才會有四個空格,直到下一個[[socials]]參數出現,以此區分各個頁尾選單,
    另外url除了可以指向網站資料夾內的某個檔案,也可以指向mail跟站外連結,例如→
    • 指向youtube
      url = "https://www.youtube.com/"
    • 指向mail地址
      url = "mailto:c469591@mail.batol.net"
  5. OK! 你可以任意的新增多個頁尾選單,或是將不用的選單以#注釋掉,修改完後按ctrl+s完成修改
  6. 打開虛擬網站server,看看頁尾有沒有按照你的設定顯示在網站上

補充

恭喜你看到這裡! 完成了網站的大部分設定啦!
完成了這一步後,下篇就要來介紹如何把專案資料夾渲染成網站資料夾,並放到真正的server囉!
在第一到第七篇講到的所有參數,都是我比較常用到的參數,你也可以自己挖掘meme的專案設定檔,看看有沒有什麼我沒介紹到的功能,
相信你有看完整個專案設定檔的話,你應該能發現meme模板還有搜尋跟評論功能,
不過這兩個功能在設定上都比較複雜,我會在完成如何上傳網站資料夾到server後,再介紹給你,
搜尋和評論功能也不是網站必備的,你可以在之後看情況選用這些功能。

最後更新:2022-05-20 16:23:59

From: 114.34.171.78

By: 小羔羊