minimal主题添加hot小图标

在theme.scss.liquid末尾空白处添上.如果你有两个以上的标签想要变红,把下面的代码复制一次,然后把4改成要加的链接的索引即可。



 .site-nav>li:nth-of-type(4)>a{color:red;font-weight:bold;position:relative}


.chicv-relative{
  position:relative;
}

.hotTag::after {
    position: absolute;
    top: 95%;
    left: 5px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: #f35b6e transparent transparent transparent;
}
.hotTag {
    position: absolute;
    padding: 0 6px .5px;
    left: 15px;
    top: -20px;
    color: #fff;
    background-color: #f35b6e;
    line-height: 15px;
    height: 15px;
    font-size: 10px;
    white-space: nowrap;

}

然后再site-nav.liquid文件{{- link.title | escape -}},大概在237行左右添加下面的代码。并且在 <a href="{{ link.url }}" class="Heading u-h6 后面添加 chicv-relative。请仔细对照图片操作。
如果你还有第三或者第四个标签 在下面or forloop.index==11 后面添加 or forloop.index==你想要加的标签索引号,以此类推。

{%- if forloop.index==2 or forloop.index==11  -%}
  <span class="hotTag">hot</span>
{%- endif -%}
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1,用{{}}包围的是变量,如{{person_name}}, 2,用{%%}包围的是块标签,如{%if orde...
    续哥儿阅读 3,971评论 0 0
  • ORA-00001: 违反唯一约束条件 (.) 错误说明:当在唯一索引所对应的列上键入重复值时,会触发此异常。 O...
    我想起个好名字阅读 10,966评论 0 9
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 14,754评论 0 38
  • 模板 上节我们直接将html内容写在代码中直接输出,这样不利于html代码的复用和维护,所以需要模板系统来实现ht...
    iffly阅读 3,853评论 0 3
  • 这次的梦有两点特殊之处,一个是我以为和别人联机了,另一个是验证了另外一个验梦手段。—— 梦 背景故事是我昨晚通宵,...
    学坏未遂阅读 4,223评论 0 0

友情链接更多精彩内容