Markdown的分级标题十分简洁,但当多级标题同时使用时,有时其渲染的样式显得容易混淆。
通过自定义hugo主题中的css文件,可以实现对heading渲染的自定义,实现以下效果:
实现方法为修改thems/xxx/static/
下的主题css文件即可,在css文件中修改或增加下列内容:
.post-content h1:before {
content: "ⅰ";
background-color: #CE4D45; /* bg-blue-100 */
color: #FFFFFF; /* text-blue-800 */
font-size: 0.6em; /* text-2xl */
font-weight: 600; /* font-semibold */
margin-left: 0em; /* ml-2 */
padding: 0.2em 0.5em; /* px-2.5 py-0.5 */
border-radius: 0.3rem; /* rounded */
display: inline-block; /* to apply padding and border-radius */
vertical-align: top;
}
以上为h1标题的样式修改案例,实现在标题左侧增加一个罗马小写数字“i”并增加颜色样式。 其他标题修改类似。