文章目录

Joe主题导航栏标签添加角标

行云流水
2022-06-17 / 3 评论 / 715 阅读 / 正在检测是否收录...

前言

Joe主题是一款非常优秀的主题。使用了一段时间,真是太爱了。我在浏览别人的网站的时候发现有的标签有一个小的角标,用来标注重点。自已也想弄一个,一顿折腾,终于搞出来了,特此记录。

Joe项目地址

制作方法

.ff-red {
display: inline-block;
transform: translateY(-12px);
    font-size: .75rem;
    letter-spacing: 0.05em;
    background: linear-gradient(to top, #efd3b0 0%, #eb4444 100%);
    color: #ffffff;
    border-radius: 1rem;
    padding: .15rem .275rem;
    line-height: 1;
    font-weight: bold;
}

/*
路径: usr/themes/Joe/public/header.php
找到导航栏位置,修改代码
*/
<?php foreach (array_slice($pages->stack, 0, $this->options->JNavMaxNum) as $item) : ?>
  <a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"><?php echo $item['title'] ?>
  <?php if ($item['title'] == '服务') : ?>
        <span class="ff-red">付费</span>
        <?php endif; ?>
  </a>
<?php endforeach; ?>

评论 (3)

取消
只有登录/注册用户才可评论
  1. 头像
    韦恩·福斯特
    中国河北省 · Windows 10 · Google Chrome
    沙发

    这个给了我灵感,结果我自己折腾半天整出个更简单的,只需要修改自定义JS就可以了
    https://fostmar.online/archives/577/
    大佬帮忙看看不表情表情

    回复
    1. 头像
      行云流水 作者
      中国河北省 · MacOS · Google Chrome
      @ 韦恩·福斯特

      实现了就好,我现在不咋折腾这个了。

      回复
  2. 头像
    23534
    中国河北省 · Windows 10 · Google Chrome
    板凳

    这个给了我灵感,结果我自己折腾半天整出个更简单的,只需要修改自定义JS就可以了
    https://fostmar.online/archives/577/
    大佬帮忙看看不表情表情

    回复
  3. 头像
    23534
    缅甸 · Windows 10 · Google Chrome
    地毯

    为什么没用呢

    回复