使用even的github最新主题,发现更改主题样式无法生效,很多样式的更改都无法失效 😭 ,最终查阅issuse得知更改src目录后需要使用npm run build命令重新编译scss文件,但是github上最新的源码没有src文件夹,应该是配置好package.json就可以使用了,但我一开始将无用的文件都剔除了,所以直接到release里下载了一份,下载地址这个是有src 目录的
注意,修改了src目录下的文件后记得在src目录下执行npm run build 重新编译
代码风格跟主题颜色由原来的红色改为了薄荷绿 😂 ,在高分辨率屏幕上看红色有种暗的感觉,换为绿色后背景有由原来的些许红色改为了白色,整个样式风格看起来素净了许多 😄
原先的文章看起来总感觉密密麻麻全是字,在碰到文字居多的文章时更看的头皮发麻,所以更改了一下文章内容的字体间距
通过浏览器开发者工具找到文章的class,然后在源码中全局搜索,大概是在src/css/_partial/_post/_content.scss文件中,新增下面样式即可
letter-spacing: .05em;本主题不支持下拉子菜单,hugo的子菜单形式只需要在 menu属性中加入parent属性就可以归类为某一个菜单的子菜单,属性值必须是父级的identifier
找到custom.scss文件,将下拉菜单的样式添加进去. 位置even/src/css/_custom.scss
.dropbtn { background-color: white; color: black; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; }文件位置 even/layouts/partials/header.html
<div class="logo-wrapper"> <a href="{{ "/" | relLangURL }}" class="logo"> {{- if .Site.Params.logoTitle -}} <img src="/images/jay.jpg" class="logo-img" alt="logo-img"> {{ .Site.Params.logoTitle }} {{- else -}} {{ .Site.Title }} {{- end -}} </a> </div> <nav class="site-navbar"> {{ range .Site.Menus.main -}} <div class="dropdown"> <a href="{{ .URL | safeURL }}" class="menu">{{ .Name }}</a> <div class="dropdown-content"> {{ if .HasChildren }} {{ range .Children }} <a href="{{ .URL | safeURL }}" class="menu-item">{{ .Name }}</a> {{ end }} {{ end }} </div> </div> {{- end }} </nav>添加子菜单有两种方式
在配置文件中添加,修改config.toml
[[menu.main]] name = "搜索" weight = 400 identifier = "search" url = "/search" parent = "about" [[menu.main]] name = "友情链接" identifier = "friends" url = "/about/friends" parent = "about" weight = 300 [[menu.main]] name = "联系我" identifier = "call-me" url = "/about/call-me" parent = "about" weight = 200在markdown文件中添加menu标签, (官方文档是这样,但测试后并为生效)
menu: docs: parent: 'extras' weight: 20此时,将鼠标放在有子菜单的菜单上时, 即可以呼出下面的子菜单
参考文章: css下拉菜单–菜鸟教程
