joe主题添加普通样式标签云

迷路的朱朱

修改于 2023-04-13 04:56:47

87400

代码可运行

文章被收录于专栏：Aurora的技术文专栏Aurora的技术文专栏

运行总次数：0

代码可运行

1.查找 functions.php 文件中的内容

$JAside_3DTag = new Typecho_Widget_Helper_Form_Element_Select(
    'JAside_3DTag',
    array(
        'off' => '关闭（默认）',
        'on' => '开启'
    ),
    'off',
    '是否开启3D云标签 - PC',
    '介绍：用于设置侧边栏是否显示3D云标签'
);
$JAside_3DTag->setAttribute('class', 'joe_content joe_aside');
$form->addInput($JAside_3DTag->multiMode());

修改为：

$JAside_Tag = new Typecho_Widget_Helper_Form_Element_Select(
    'JAside_Tag',
    array(
        'off' => '关闭（默认）',
        '1' => '3D云标签',
        '2' => '普通标签',
    ),
    'off',
    '是否开启标签 - PC',
    '介绍：用于设置侧边栏是否显示标签'
);
$JAside_Tag->setAttribute('class', 'joe_content joe_aside');
$form->addInput($JAside_Tag->multiMode());

2.查找 public/aside.php 文件中的内容

options->JAside_3DTag === 'on') : ?>

修改为：

options->JAside_Tag !== 'off') : ?>

3.查找 public/aside.php 文件中的内容

    next()) : ?>

修改为：

options->JAside_Tag === '1') : ?>
    
    
        next()) : ?>
            
        
    

options->JAside_Tag === '2') : ?>
    
        next()) : ?>
            
                name(); ?>

4.查找 public/include.php 文件中的内容

options->JAside_3DTag === 'on') : ?>

修改为：

options->JAside_Tag !== 'off') : ?>

5.添加 CSS 样式

在主题 aside.php 文件最底部添加以下代码

  .common-tag {
  height: 30px;
  font-size: 12px;
  border-radius: 5px;
  display: block;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--classD);
  color: var(--routine);
  padding: 0 5px;
  text-align: center;
}

  .common-tag:hover {
  background: var(--theme);
  color: #fff;
}

  .common-tags {
  display: grid;
  grid-row-gap: 8px;
  grid-column-gap: 8px;
  grid-template-columns: repeat(3, calc((100% - 16px) / 3));
}