事情是這樣子的,我前兩天用 Hugo 搭了一個個人網站,我添加了幾個菜單,其中有一個菜單是「可愛的 Java」。
但是,當網站跑起來之後,發現「可愛的 Java」在菜單欄并不是原樣輸出的,而是變成了「可愛的 JAVA」,英文變成了大寫的,就像下面這個樣子的。
哦,對了,我的網站是 https://www.moonkite.cn 。
尋找解決辦法
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=