https://yundaily.com/categories/%E4%BA%A4%E6%98%93%E8%88%87%E7%A8%8B%E5%BC%8F/ Recent content in 交易與程式 on Yun Daily https://i.imgur.com/1RKRr7x.png https://i.imgur.com/1RKRr7x.png Hugo -- gohugo.io zh-tw Sat, 20 Dec 2025 00:00:00 +0000 https://yundaily.com/posts/%E6%9E%B6%E7%B6%B2%E7%AB%99/papermod-%E6%9E%B6%E7%AB%99%E7%BE%8E%E5%8C%96/ Sat, 19 Apr 2025 00:00:00 +0000 https://yundaily.com/posts/%E6%9E%B6%E7%B6%B2%E7%AB%99/papermod-%E6%9E%B6%E7%AB%99%E7%BE%8E%E5%8C%96/ 1. 留言板 我本來是使用 Cusdis，一款不限 Github 用戶就可留言的外掛，但某天 Cusdis 直接 shut down，所以我就轉用 utterances。 介面一樣好看，使用方便，唯一缺點就是只限 Github 用戶留言。 使用utterances，copy 代碼後填上自己的 repo，貼在 themes/layouts/partials/comments.html 內即可使用。 2. 友鏈 參考Aimer’s Blog的 code 架設。 目前還沒有網友，但這個版型很好看，之後也可以當作放作品集的頁面。 3. Buy me a coffee 使用bmc-button by isqua shortcode。 如果想要點入時另開新視窗，可以在 shortcodes/bmc-button.html 下在原本 code 的 href 後增加 target="_blank"。 <a class="hugo-shortcodes-bmc-button" href="{{ $url | safeURL }}" target="_blank" ></a> 4. 目錄放側邊 原出處 Sulv 的文章好像已經失效了，我是參考使用3rd’s Blog 的 code 設置的。 設置完後在文章打開目錄。 --- showToc: true # 顯示目錄 TocOpen: true # 預設打開目錄 --- 5. https://yundaily.com/posts/30%E5%A4%A9%E8%BB%9F%E9%AB%94%E5%B7%A5%E7%A8%8B%E5%B8%AB%E9%AB%94%E9%A9%97%E7%87%9F2025/%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-css-flex%E7%B6%B2%E9%A0%81%E6%8E%92%E7%89%88/ Sat, 20 Dec 2025 00:00:00 +0000 https://yundaily.com/posts/30%E5%A4%A9%E8%BB%9F%E9%AB%94%E5%B7%A5%E7%A8%8B%E5%B8%AB%E9%AB%94%E9%A9%97%E7%87%9F2025/%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-css-flex%E7%B6%B2%E9%A0%81%E6%8E%92%E7%89%88/ FLEX 外層 container 屬性 Class 裡面有兩個樣式, 則兩個樣式都會使用到 <div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> </div> .container { display: flex; width: 500px; background: #004466; margin: 0 auto; } .item { background: #00ffa2; color: #004466; text-align: center; font-size: 36px; margin-right: 10px; margin-left: 10px; } .item1 { width: 150px; height: 150px; } .item2 { height: 200p; } .item3 { height: 300p; } display: flex 要寫在外層(container), 可以讓區塊元素並排展現 會依照 container 設定的寬度, 讓裡面 item 根據比例自動調整 https://yundaily.com/posts/30%E5%A4%A9%E8%BB%9F%E9%AB%94%E5%B7%A5%E7%A8%8B%E5%B8%AB%E9%AB%94%E9%A9%97%E7%87%9F2025/%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-%E4%BD%BF%E7%94%A8css%E8%AE%8A%E6%9B%B4html%E6%A8%99%E7%B1%A4%E7%89%B9%E6%80%A7/ Fri, 12 Sep 2025 00:00:00 +0000 https://yundaily.com/posts/30%E5%A4%A9%E8%BB%9F%E9%AB%94%E5%B7%A5%E7%A8%8B%E5%B8%AB%E9%AB%94%E9%A9%97%E7%87%9F2025/%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-%E4%BD%BF%E7%94%A8css%E8%AE%8A%E6%9B%B4html%E6%A8%99%E7%B1%A4%E7%89%B9%E6%80%A7/ CSS Reset 清空瀏覽器預設樣式 如果只有寫 html，則瀏覽器會有預設的 CSS 樣式帶入 在 Google 上搜尋 CSS reset 點以下連結可以查詢到 CSS reset Code 將這個網頁裡的 code 貼入 自己的 style.css 就可以 reset 預設樣式 貼完之後再寫自己的 CSS code，則下方的 CSS 權重會大於上方，所以會以自己寫的 CSS 為最後呈現 BLOCK 區塊元素 區塊元素特性: 盡可能的占滿版面 區塊元素會另起一行進行呈現 如上圖，a 標籤沒有占滿版面，也沒有另起一行呈現，所以不是區塊元素 從 Computed 中可以看到是 Auto x Auto INLINE 行內元素 行內元素特性: 比較常用在段落 沒辦法設定寬高 SPAN SPAN 本身沒什麼意思，是用來點綴排版用的行內標籤 寫法例如: <p><span>今天</span> 天氣真好</p> 或是使用 class 寫法 <p><span class="red">今天</span> 天氣真好</p> .red { color: red; } 想要讓行內元素變成區塊元素的話，需要在 CSS 中加入 display:block https://yundaily.com/posts/%E6%9E%B6%E7%B6%B2%E7%AB%99/hugo%E6%96%87%E7%AB%A0%E5%8A%A0%E5%AF%86%E6%96%B9%E5%BC%8F/ Thu, 11 Sep 2025 00:00:00 +0000 https://yundaily.com/posts/%E6%9E%B6%E7%B6%B2%E7%AB%99/hugo%E6%96%87%E7%AB%A0%E5%8A%A0%E5%AF%86%E6%96%B9%E5%BC%8F/ 如果將 Hugo 文章加密? Step1 修改 Single.html 在 layouts/_default/single.html 中找到{{- if .Content }}段落，將段落改成以下 code {{- if .Content }} <div class="post-content"> {{ if .Params.password }} <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> <div id="protected"> <input type="password" id="postPassword" placeholder="輸入密碼" /> <button id="unlockBtn">解鎖</button> </div> <div id="postContent" style="display:none; margin-top:1rem;"></div> <script> const secret = "{{ .Params.password }}"; // ✅ 保留 HTML 標籤 const plaintext = {{ .Content | jsonify | safeJS }}; const ciphertext = CryptoJS.AES.encrypt(plaintext, secret).toString(); document.getElementById("unlockBtn").addEventListener("click", function () { const pwd = document. https://yundaily.com/posts/30%E5%A4%A9%E8%BB%9F%E9%AB%94%E5%B7%A5%E7%A8%8B%E5%B8%AB%E9%AB%94%E9%A9%97%E7%87%9F2025/%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-css%E5%9F%BA%E7%A4%8E/ Thu, 01 May 2025 00:00:00 +0000 https://yundaily.com/posts/30%E5%A4%A9%E8%BB%9F%E9%AB%94%E5%B7%A5%E7%A8%8B%E5%B8%AB%E9%AB%94%E9%A9%97%E7%87%9F2025/%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-css%E5%9F%BA%E7%A4%8E/ 標籤選擇器 標籤選擇器 { 屬性: 設定值; 屬性: 設定值; } 例如以下 h1 { color: blue; font-size: 50px; } CSS 除錯分析 檔案路徑是否正確 單字有沒有拼錯 格式是否正確 在 Chrome 瀏覽器頁面按右鍵»檢查 如果 CSS code 當中有寫錯導致無法辨識，在 Element 元素就會出現畫線的錯誤顯示 如下: 擬態選擇器 hover 除了標籤選擇器以外還可以使用擬態選擇器，使用情境： a 標籤文字設定成黑色，但希望當滑鼠滑過去時文字可以變成紅色 這樣可以寫成這樣 a { color: black; } a:hover { color: red; } /*讓滑鼠按下時變成blue的話可以用active*/ a:active { color: red; } 類別選擇器 如果有好幾個 P 段落，但其中某一個段落想要使用客製化 CSS file INDEX.HTML 設定如下 <p>段落一</p> <p>段落二</p> <p class="style1">段落三</p> <p>段落四</p> STYLE.CSS 增加如下 code .style1 { color: red; } class 屬性也同樣可以應用在 a 或是 li 上面 https://yundaily.com/posts/30%E5%A4%A9%E8%BB%9F%E9%AB%94%E5%B7%A5%E7%A8%8B%E5%B8%AB%E9%AB%94%E9%A9%97%E7%87%9F2025/%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-html%E5%9F%BA%E7%A4%8E/ Wed, 30 Apr 2025 00:00:00 +0000 https://yundaily.com/posts/30%E5%A4%A9%E8%BB%9F%E9%AB%94%E5%B7%A5%E7%A8%8B%E5%B8%AB%E9%AB%94%E9%A9%97%E7%87%9F2025/%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-html%E5%9F%BA%E7%A4%8E/ Emmet 載入 在 VSC 或是 Codepen 要載入 Emmet 套件，可以直接打"!"+“Tab"鍵， 就會立馬出現以下 Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> #如果沒有加這行在IE瀏覽器會出現亂碼 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> #針對手機、Ipad做螢幕解析度調整 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> #讓IE更新到最新版本 <title>Document</title> </head> <body></body> </html> 按"P*2"就會自動載入下方 code，如果*3 就會一次出現三個 <p></p> <p></p> 列表標籤 呈現效果會是: ● 項目一 ● 項目二 ● 項目三 1.項目一 2.項目二 3.項目三 <ul> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ul> <ol> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ol> li 可以用來包 a 連結 也可以用來包 img 圖片 https://yundaily.com/posts/%E6%9E%B6%E7%B6%B2%E7%AB%99/%E5%9B%9E%E6%AD%B8github-hugo%E7%B6%B2%E8%AA%8C/ Sun, 13 Apr 2025 00:00:00 +0000 https://yundaily.com/posts/%E6%9E%B6%E7%B6%B2%E7%AB%99/%E5%9B%9E%E6%AD%B8github-hugo%E7%B6%B2%E8%AA%8C/ byebye Wordpress 在架設了 N 個網站之後，本月我還是下定決定跟 Wordpress 說掰掰了，回歸到使用 Github 搭配 Hugo 的組合，釐清自己的文章內容與定位實在很重要，因為我並沒有明確的網站方向以及營利目標，只是單純記錄生活的網誌卻要花費每月 600 多塊的平台費用，對我來說還是覺得太貴。 同時雖然使用 Cloudways 創建的 Wordpress 網站 SEO 表現很好，但從 Google search console 結果來看我的文章內容確認無法導流（太冷門的內容），因此我含淚跟 Wordpress 說 byebye。 接納 Hugo 網站的不便 首先因為我是純文科生，使用 Github 架設 Hugo 網站，從架設網站、修改網站 CSS 到寫文章都需要程式底子，沒有直接用 Wordpress 來的方便省時間。 再來是從之前的測試結果來看，Hugo 網站如果放置太多圖片會非常容易影響網站速度，PageSpeed Insights 檢測出來的網速大幅低於用 Cloudways 架設的網速。 Hugo 還是有我喜歡的地方 我很喜歡超方便的預覽功能，當然如果是用 WD 這點是輕鬆達成，但在 Hugo 這樣複雜的寫文限制下能直接用 hugo server 預覽上傳後的網頁已經非常方便。 最大的優點當然是費用便宜，自訂網域每月只需要約台幣 60 塊，即使升級 Github Pro 也只需要每月 180 塊 total 費用，對於非營利網站這價格非常友善。 從這裡出發記錄我的生活 就從這裡紀錄所有想分享的生活吧!