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

news2024/12/24 20:36:33

大家好,我是风筝

事情是这样子的,我前两天用 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.coloradmin.cn/o/1292987.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

推荐一个FL Studio最适配的midi键盘?

Hello大家好&#xff01;好消息&#xff01;好消息&#xff01;特大好消息&#xff01; 水果党们&#xff01;终于有属于自己的专用MIDI键盘啦&#xff01; 万众期待的Novation FLKEY系列 正式出炉&#xff01; 做编曲和音乐制作的朋友们&#xff0c;对水果软件FLSTUDIO应该…

2.vue学习笔记(目录结构+模板语法+属性绑定)

1.目录结构 1.vscode ——VSCode工具的配置文件夹 2.node_modules ——Vue项目的运行依赖文件夹 3.public ——资源文件夹&#xff08;浏览器图标&#xff09; 4.src ——源码文件夹 5..gitgnore ——git忽略文件 6.index.html ——如果html文件 7.package.json —…

【Unity动画】Unity 2D动画创建流程

本文以2D为案例&#xff0c;讲解Unity 播放动画的流程 准备和导入2D动画资源 外部导入序列帧生成的 Unity内部制作的 外部导入的3D动画 2.创建动画过程 打开时间轴Ctrl6 选中场景中的一个未来需要播放动画的物体 回到时间轴点击Create一个新动画片段 拖动2D动画资源放入…

class059 建图、链式前向星、拓扑排序【算法】

class059 建图、链式前向星、拓扑排序【算法】 code1 建图 package class059;import java.util.ArrayList; import java.util.Arrays;public class Code01_CreateGraph {// 点的最大数量public static int MAXN 11;// 边的最大数量// 只有链式前向星方式建图需要这个数量// 注…

选择最适合你的接口测试工具:SoapUI、JMeter、Postman!

在软件开发的过程中&#xff0c;接口测试是确保系统正常运行的关键环节。为了有效地执行接口测试&#xff0c;选择适当的工具至关重要。在这篇文章中&#xff0c;我们将比较分析三种常见的接口测试工具&#xff1a;SoapUI、JMeter和Postman&#xff0c;以帮助你了解它们的优势和…

MVSNeRF:多视图立体视觉的快速推广辐射场重建(2021年)

MVSNeRF&#xff1a;多视图立体视觉的快速推广辐射场重建&#xff08;2021年&#xff09; 摘要1 引言2 相关工作3 MVSNeRF实现方法3.1 构建代价体3.2 辐射场的重建3.3 体渲染和端到端训练 3.4 优化神经编码体 Anpei Chen and Zexiang Xu and Fuqiang Zhao et al. MVSNeRF: Fast…

Leetcode 92 反转链表II

反转链表II 题解1 一遍遍历&#xff08;穿针引线&#xff09; 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 提示&#xff1a; 链表中节点数目…

JVM 类的加载器的基本特征和作用

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 1、作用 类加载器是 JVM 执行类加载机制的前提 ClassLoader的作用&#xff1a; ClassLoader是Java的核心组件&#xff0c;所有的Class都是由ClassLoader进行加载的&#xff0c;ClassLoader负责通过各种方式将Class信…

汽车软件大时代,如何提升软件工程创新力?

当前&#xff0c;传统汽车产业正加速数字化转型&#xff0c;“软件定义汽车”不断深化。在电动化、智能化和网联化趋势下&#xff0c;汽车软件已经成为汽车技术革新和发展的核心驱动力之一。根据亿欧智库发布的《2023中国智能电动汽车车载软件市场分析报告》&#xff0c;2022年…

<蓝桥杯软件赛>零基础备赛20周--第9周--前缀和与差分

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周&#xff08;读者可以按…

Docker-compose容器编排与容器监控

一、Docker-compose 1、概念&#xff1a; Docker-Compose 是 Docker 官方的开源项目&#xff0c;负责实现对Docker容器集群的快速编排。 2、作用&#xff1a; Docker-Compose可以管理多个Docker容器组成一个应用。需要定义一个yaml格式的配置文件 docker-compose.yml&#…

2023-12-06 LeetCode每日一题(最小化旅行的价格总和)

2023-12-06每日一题 一、题目编号 2646. 最小化旅行的价格总和二、题目链接 点击跳转到题目位置 三、题目描述 现有一棵无向、无根的树&#xff0c;树中有 n 个节点&#xff0c;按从 0 到 n - 1 编号。给你一个整数 n 和一个长度为 n - 1 的二维整数数组 edges &#xff0…

maven-assembly-plugin 自定义打包

我想把input文件夹给打包进去 pom文件 <build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-assembly-plugin</artifactId><executions><execution><!-- 配置执行器 --><i…

Dockerfile介绍

1. DockerFile介绍 dockerfile是用来构建docker镜像的文件&#xff01;命令参数脚本&#xff01; 构建步骤&#xff1a; 1、编写一个dockerfile文件 2、docker build 构建成为一个镜像 3、docker run运行镜像 4、docker push发布镜像&#xff08;DockerHub、阿里云镜像仓库…

『亚马逊云科技产品测评』活动征文|AWS云服务器EC2实例实现ByConity快速部署

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 前言 亚马逊是全球最大的在线零售商和云计算服务提供商。AWS云服务器在…

5G入门到精通 - 5G的十大关键技术

文章目录 一、网络切片二、自组织网络三、D2D技术四、低时延技术五、MIMO技术六、毫米波七、内容分发网络八、M2M技术九、频谱共享十、信息中心网络 一、网络切片 5G中的网络切片是一项关键技术&#xff0c;它允许将整个5G网络分割成多个独立的虚拟网络&#xff0c;每个虚拟网络…

一维相位解包裹

一维相位解包裹 本文首先介绍最简单的一维的位相解包裹算法。设W是包裹运算符&#xff0c;中是解包裹位相&#xff0c;是包裹的位相。则一维位相解包裹可表示为&#xff1a; 解包裹就是要选取正确的k,满足&#xff1a; 两个相邻像素位相的差值如下&#xff1a; 由式(2-1)和式(2…

从零开始学习 JS APL(六):完整指南和实例解析

学习目标&#xff1a; 1. 能够利用正则表达式校验输入信息的合法性 2. 具备利用正则表达式验证小兔鲜注册页面表单的能力 学习内容&#xff1a; 正则表达式 综合案例 阶段案例 学习时间&#xff1a; 周一至周五晚上 7 点—晚上9点周六上午 9 点-上午 11 点周日下午 3 点-下…

PCIe 数据链路层

PCIe 总线的数据链路层处于事务层和物理层之间&#xff0c;主要功能是保证来自事务层的TLP在PCle链路中的正确传递&#xff0c;为此数据链路层定义了一系列数据链路层报文&#xff0c;即DLLP。数据链路层使用了容错和重传机制保证数据传送的完整性与一致性&#xff0c;此外数据…