就一个css的bug,害我找了大半天儿

大家好,我是风筝

事情是这样子的,我前两天用 Hugo 搭了一个个人网站,我添加了几个菜单,其中有一个菜单是「可爱的 Java」。

但是,当网站跑起来之后,发现「可爱的 Java」在菜单栏并不是原样输出的,而是变成了「可爱的 JAVA」,英文变成了大写的,就像下面这个样子的。

哦,对了,我的网站是 一个程序员的博客

寻找解决办法

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 还能做大小写转换,所以从其他方面搜索尝试了半天,也找不到原因,因为方向就不对,能找到才怪。

推荐阅读

➿ 用了这两款插件,同事再也不说我代码写的烂了

➿ 《轻解计算机网络》系列离线版 PDF 终于来了

➿ 5000字,10张图,完全掌握 MySQL 事务隔离级别

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/256365.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vim常见操作

vim常见操作 文章目录 vim常见操作1. 回退/前进2. 搜索3. 删除4. 定位到50行5. 显示行号6. 复制粘贴7. 剪贴8. 替换9. vim打开文件的时候出现 1. 回退/前进 1.esc进入命令模式 2.ctrlr 前进 u 回退2. 搜索 1&#xff09; esc进入命令模式 2&#xff09; /text  查找text&am…

硬件基础:差模和共模

一直以来&#xff0c;都难以理解差模和共模这两个概念&#xff0c;什么差分信号、差模信号、共模信号&#xff0c;差模干扰、共模干扰……虽然看了一些资料&#xff0c;但貌似说法还挺多的&#xff0c;理解起来仍然是一头雾水。所以&#xff0c;专门用一篇文章来好好研究下这个…

正则表达式:深度解析与实用指南

目录 引言 正则表达式的基本概念 1. 字面量字符 2. 元字符 3. 量词 4. 分组和捕获 正则表达式的语法规则 1. 字符类 2. 转义字符 3. 锚点 4. 向前查找和向后查找 实际应用中的正则表达式技巧 1. 邮箱验证 2. URL 提取 3. 电话号码格式化 高级正则表达式技巧 1.…

【vtkWidgetRepresentation】第五期 vtkLineRepresentation

很高兴在雪易的CSDN遇见你 内容同步更新在公众号“VTK忠粉” 【vtkWidgetRepresentation】第五期 一条直线的交互 前言 本文分享vtkLineRepresentation&#xff0c;希望对各位小伙伴有所帮助&#xff01; 感谢各位小伙伴的点赞关注&#xff0c;小易会继续努力分享&#xf…

ESP32-Web-Server编程-通过 Base64 编码在网页中插入图片

ESP32-Web-Server编程-通过 Base64 编码在网页中插入图片 概述 不同于上节 ESP32-Web-Server编程-在网页中通过 src 直接插入图片&#xff0c;本节引入 Base64 编码来显示图片。 Base64 是一种用64个字符来编码表示任意二进制数据的方法。任何符号都可以转换成 Base64 字符集…

HTTP、HTTPS、SSL协议以及报文讲解

目录 HTTP/HTTPS介绍 HTTP/HTTPS基本信息 HTTP请求与应答报文 HTTP请求报文 HTTP响应报文 SSL协议 SSL单向认证 SSL双向认证 HTTP连接建立与传输步骤 HTTP访问全过程相关报文&#xff08;以访问www.download.cucdccom为例子&#xff09; DNS报文解析 TCP三次握手连…

k8s中的Pod网络;Service网络;网络插件Calico

Pod网络&#xff1b;Service网络&#xff1b;网络插件Calico Pod网络 在K8S集群里&#xff0c;多个节点上的Pod相互通信&#xff0c;要通过网络插件来完成&#xff0c;比如Calico网络插件。 使用kubeadm初始化K8S集群时&#xff0c;有指定一个参数–pod-network-cidr10.18.0…

工作中真实的Rest-Assured教程,对标阿里java自动化测试

Rest-Assured 介绍 什么是 Rest-Assured &#xff1f; Rest-Assured 是一套由 Java 实现的轻量级的 REST API 测试框架&#xff0c;可以直接编写代码向服务器端发起 HTTP 请求&#xff0c;并验证返回结果。 看看官方是怎么说的&#xff1a; Testing and validating REST se…

推荐一个可以记录历史进价的进销存软件?

“我是卖数码产品的&#xff0c;数码产品价格变动是比较大的&#xff0c;每次采购时候我都会多家对比价格&#xff0c;再决定在哪个厂家进货。所以基本上我每次进价价格都不一样&#xff0c;但是之前的询价情况又很难一一单独记录&#xff0c;让我采购的时候很被动。” “准备…

初始类与对象

初始类与对象 实验介绍 本课程是进一步对类与对象的深入认识&#xff0c;如何定义并实例化一个类&#xff0c;介绍如何使用 C 标准库 string 类等。 知识点 认识类与对象内联函数string 类类的定义与实例化 认识类与对象 官方定义 类&#xff1a;在面向对象编程中是一种…

【Spring 源码】 深入理解 Bean 定义之 BeanDefinition

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

添加新公司代码的配置步骤-Part1

原文地址&#xff1a;配置公司代码 概述 我们生活在一个充满活力的时代&#xff0c;公司经常买卖子公司。对于已经使用 SAP 的公司来说&#xff0c;增加收购就成为一个项目。我开发了一个电子表格&#xff0c;其中包含向您的结构添加新公司代码所需的所有配置更改。当然&…