尋找解決辦法

Hugo 是一個快速、便捷搭建網站的開源框架，並且可以結合 GitHub 和 GitHub Pages 使用，這樣就不用自己買伺服器了。官方提供了很多的主題，有個人博客的，也有一些產品宣傳類型的，總之，找什麼樣的都有。

我也是剛好看到別人寫的一篇教程，覺得這個主題很不錯，然後就用它來建了這個網站。但是教程里沒有說到菜單里的英文會變成大寫的。

於是，我就去官方找相關配置說明，沒有找到。

到 Google 搜索相關問題，沒有查到。

沒辦法，找到了網站主題中展現菜單部分的代碼。

 {{ range $index, $menuItem := .Site.Menus.main }}
          <li class="nav-item">
            {{ with $menuItem.Page }}
              <a class="nav-link" href="{{ .Permalink }}">{{ with $menuItem.Pre }}{{ . | safeHTML }}{{ end }}{{ $menuItem.Name }}</a>
            {{ else }}
              {{ if hasPrefix .URL "http" }}
                <a class="nav-link" href="{{ .URL | safeURL }}">{{ with $menuItem.Pre }}{{ . | safeHTML }}{{ end }}{{ $menuItem.Name }}</a>
              {{ else }}
                <a class="nav-link" href="{{ .URL | absLangURL | safeURL }}">{{ with $menuItem.Pre }}{{ . | safeHTML }}{{ end }}{{ $menuItem.Name }}</a>
              {{ end }}
            {{ end }}
          </li>
        {{ end }}

其中{{ $menuItem.Name }}是菜單顯示名稱，沒發現任何問題。

於是向 ChatGPT 提問，他見多識廣的，沒準有辦法呢。

我問了他一下，他還真給我一個答案。

可以呀，於是，我將這個代碼粘過去，結果，並沒有效果。

於是，我只能告訴他「不起作用」。

結果呢，他告訴要自己實現一個函數，用來轉換大小寫。而這個函數要寫在 Hugo 框架的層面，而 Hugo 是用 Go 語言實現的，也就是說要實現這個函數，就要修改 Hugo 的源碼了。

我心想這不至於的吧，就一個大小寫，何以走到要修改 Hugo 源碼這一步，搜了那麼多信息，也沒見有人這個幹過呀。肯定是哪兒出了問題。

靈光乍現

突然想到，查了半天了，怎麼都沒在瀏覽器上看一眼 HTML 源碼。

於是，打開開發者工具，找到菜單所在的元素。不看不要緊，一看才發現一點端倪，您猜怎麼著。

HTML 源碼竟然就是原樣輸出的，根本沒有被轉換成大寫的。

然後，我就順理成章的猜到一個原因，這是我之前從來沒敢想過的原因，怪我學藝不精啊，半吊子前端的水平。

於是，我戰戰兢兢的在 ChatGPT 中提出下面這個問題：

css 可以控制文字大小寫嗎

」

得到的回答是

竟然還真有這個樣式。於是我在瀏覽器中尋找這個樣式，果不其然，這濃眉大眼的傢伙，竟然背地裡搞這套。

當我把這個樣式去掉，世界一下就美妙了，大寫消失了。

text-transform有三種效果：

1、小寫轉大寫，將原本的小寫字母，全部轉換為大寫字母。

text-transform: uppercase;

2、大寫轉小寫，將原本的大寫字母，全部轉換為小寫字母。

text-transform: lowercase;

3、將每個單詞的首字母轉換為大寫，其他字母保持不變。

text-transform: capitalize;

例如 hello world，加上這個樣式後，顯示出來的效果就是 Hello World。

然後，我趁機查了一下CSS的用法，發現 CSS3有很多好玩兒的用法，能做文本特效、能做背景漸變、能控制內容、還能做動畫。

比如我這網站首頁背景里有一些隨機的小星星（✨），就是用 CSS+幾行JavaScript 實現的。

有些時候就是這樣，明明是很簡單的問題，卻怎麼也找不到原因和解決辦法，因為路徑錯了，在不正確的方向上無論怎麼努力，也於事無補，甚至損失更大。

有些時候也和我們的認知上限有關，就像這個問題，我之前從來就不知道 CSS 還能做大小寫轉換，所以從其他方面搜索嘗試了半天，也找不到原因，因為方向就不對，能找到才怪。

來源：https://mp.weixin.qq.com/s?__biz=MzAxMjA0MDk2OA==&mid=

CSS 竟然還能在背地裡搞這個，害我找了半天的bug

尋找解決辦法

靈光乍現