寻找解决办法

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

寻找解决办法

灵光乍现