寫文章也有 SOP ? 試試看 Archetypes 吧

Archetypes 是 Hugo 模板系統 簡單來說,我們可以預先設定好文章的大綱、架構。 每次新增同樣類型的文章的時候就會自動帶出要編寫的內容 新增一個文章模板 Kattis 解題的文章,通常都是一樣的架構,畢竟解題的流程都大同小異。 還不知道 Kattis 是什麼的朋友,請往這邊走: Kattis 練習程式解題的好所在 archetypes/kattis.md --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} draft: true --- # Hello World! 題目連結:[Hello World!](https://open.kattis.com/problems/hello) ## 題目大意 ## 解題重點 - 練習解題系統操作 <?php echo 'Hello World!'; ## 陷阱提示 - 沒有陷阱 > [完整解法](https://github.com/Hong0308/Kattis/blob/main/hello.php) (真的不會再來參考) 使用方法 hugo new --kind kattis posts/my-kattis....

October 27, 2022 · 1 min

Hugo 應該也要可以留幹話吧!

這裏有這麼多好文章,不用鼓勵一下嗎! 現代人已經脫離不了各種社群媒體,一定要在各種時事新聞底下留言刷個存在感,或者寫一些幹話讓人會心一笑 XD Hugo 內建就有對應能用 Disqus 來做留言功能溜 申請 Disqus 的方式應該不難,就自行申請溜:官網在這 申請完帳號後,會得到一個 Shortname 這會用來對應 Hugo 的參數。 設定 Hugo 變數 config.yml disqusShortname: xxxxxxxxxxxxxxx # 啟用留言功能 params: comments: true 設定留言板塊 這邊參考官方的範例就好:Conditional Loading of Disqus Comments layouts/partials/comments.html <div id="disqus_thread"></div> <script type="text/javascript"> (function() { // Don't ever inject Disqus on localhost--it creates unwanted // discussions from 'localhost:1313' on your Disqus account... if (window.location.hostname == "localhost") return; var dsq = document....

October 25, 2022 · 1 min

Hugo Google Adsense

透過瀏覽廣告支持創作者 Google 就是透過廣告起家,自家的 Google Adsense 廣告服務也很成熟,設定也不難。唯獨會花一些審核時間,以及記得網站多一些內容才能順利通過審核唷。 申請步驟 提交網站資料至 Google 前往 Google Adsense 填寫資料 新增對應廣告程式碼至網站上 layouts/partials/adsense-google.html <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{ .Site.Params.GoogleAdSenseClient }}" crossorigin="anonymous"></script> config.yml params: GoogleAdSenseClient: "ca-pub-0000000000000000" layouts/_default/baseof.html <head> {{- partial "head.html" . }} ... {{ if .Site.Params.GoogleAdSenseClient }} {{ partial "adsense-google.html" . }} {{ end }} ... </head> 審核通過後設定廣告投放條件 Google Adsense 會提供基本設定檔案 ads.txt...

October 15, 2022 · 1 min

Hugo Google Analytics 設定

Google Analytics 現代的網站基本上都必備 Google Analytics (GA) 來分析流量,Hugo 當然也都整合好了。 設定 GA 變數 config.yml googleAnalytics: G-XXXXXXXXXX 加上一個重複利用的版面 layouts/partials/analytics-gtag.html <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.GoogleAnalyticsID }}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{{ .Site.Params.GoogleAnalyticsID }}'); </script> 網站通用版面加上 GA 追蹤 複製 Hugo 預設版面 複製一份檔案,覆蓋預設值用 layouts/_default/baseof.html (路徑需要相同) 加上 GA 設定...

October 9, 2022 · 1 min

設定網站 Logo

Logo 是眾多分頁的識別物 不知道大家都是怎麼使用瀏覽器逛網站的呢? 我是都會開很多分頁啦,這樣就會因為螢幕寬幅的限制,分頁最後都只會剩下 ico (也就是網站設定的 Logo)。所以這時候一個好是別的 Logo 就能夠馬上讓我找到我要去的那個分頁啦,重要 +100 分 設定方法 config.yml params: assets: favicon: "/favicons/favicon.ico" favicon16x16: "/favicons/favicon-16x16.png" favicon32x32: "/favicons/favicon-32x32.png" apple_touch_icon: "/favicons/apple-touch-icon.png" favicon: 最主要的 Logo 檔案 favicon16x16: Logo 檔案的 16x16 大小,如果設備特殊設定會讀取這個檔案 favicon32x32: Logo 檔案的 32x32 大小,如果設備特殊設定會讀取這個檔案 apple_touch_icon: 專門給蘋果產品讀取 Logo 檔,可能會出現在像是 Safari 的喜愛項目顯示

October 2, 2022 · 1 min

界門綱目科屬種?

分門別類,讓讀者更好找到文章 透過分類,讓文章更井然有序 透過標籤,可以學習到更多資訊 透過清單,看看有多少寫作的日子 設定頁首顯示分類三兄弟吧! config.yml menu: main: - identifier: categories name: 文章分類 url: /categories/ weight: 10 - identifier: tags name: 特定標籤 url: /tags/ weight: 20 - identifier: archives name: 所有文章 url: /archives/ weight: 30 項目說明 identifier: 網站對應功能名稱 name: 顯示名稱 url: 網站功能要連結到哪 weight: 這是順序的意思,數字越小越前面(越左邊) 所有文章(archives) 這是內建沒有的功能,所以要特別設定版面 新增所有文章的版面 新增 content/archives....

September 22, 2022 · 1 min

設計一下部落格簡介吧!

部落格簡介是靈魂啊! 我使用的是這個佈景主題: PaperMod ,有支援簡介功能 先來設定 Hugo 基本設定 因為習慣 yaml 格式,所以我的設定檔為 config.yml (另外也能用 toml) config.yml baseURL: "https://software-animal.space/" languageCode: "zh-tw" title: Software Animal theme: "PaperMod" 這些設定分別是 baseURL 部落格的網址 languageCode 預設部落格語言 title 部落格名稱 theme 部落格主題 再來設定部落格簡介 延續設定 config.yml params: homeInfoParams: Title: "嗨,這裡是軟體動物" Content: "這不是指什麼章魚、百變怪(?)之類的,而是在講電腦的軟體程式~ \\ 一切跟軟體有相關的東西都會在這裡,包含:程式語言、演算法... \\ 也會有軟實力的相關事務,像是敏捷開發、軟體工程師的肝苦談 XD" 這邊 \\ 作用為強制換行 同場加碼:設定社群連結 還是繼續設定 config.yml params: socialIcons: - name: linkedin url: "https://www....

September 21, 2022 · 1 min

Hugo 起步走

什麼是 Hugo ? 網路上很多介紹的文章,就不用我多贅述囉~ 歡迎參考 Hugo 官方網站 當然現在你(妳)正在看的這個部落格就是用這個技術架起來的唷! 一切非常簡單、輕鬆,三步驟就能架起來了: 1. 先用萬能的 Homebrew 安裝 Hugo brew install hugo 如果還沒有裝 Homebrew 的朋友 請往這邊走:一行指令裝起 Homebrew 確認一下是否成功安裝? hugo version # hugo v0.98.0+extended darwin/arm64 BuildDate=unknown 2. 想一個部落格資料夾名字,並且加上基本設定 hugo new site myblog # Congratulations! Your new Hugo site is created in xxx/myblog. 一切都是空白的,找一個喜歡的主題吧! Hugo 主題這裡有 cd myblog git init git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke 讓部落格套上主題 echo theme = \"ananke\" >> config....

September 19, 2022 · 1 min