曦语

这篇文章主要是typecho下的彩色标签云实现方式
这篇文章主要是typecho下的彩色标签云实现方式 handsome主题适用 改动不大 修改的有3个文件compo...
扫描右侧二维码阅读全文
10
2018/05

这篇文章主要是typecho下的彩色标签云实现方式

这篇文章主要是typecho下的彩色标签云实现方式 handsome主题适用 改动不大
修改的有3个文件

  1. component/sidebar.php
  2. 新增CSS文件
  3. component/header.php

先放个效果图:stuck_out_tongue:
20181012105759.png

< 一 > 用以下这段代码替换原有的标签云

 <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
        <h3 id="tag-cloud-title" class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3>            
        <div class="tags l-h-2x">
        <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?>
        <?php if($tags->have()): ?>
            <?php while ($tags->next()): ?>
            <span id="tag-clould-color"  style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>)">
                <a  href="<?php $tags->permalink();?>"  title="<?php echo sprintf(_mt("该标签下有 %d 篇文章"),$tags->count); ?>" data-toggle="tooltip" >
                <?php $tags->name(); ?></a>
            </span>
            <?php endwhile; ?>
        <?php endif; ?>
        </div>
    </section>

< 二 > 新增CSS文件 文件名只要不是中文 随你心情

/* tag-clould-color 彩色标签云 */
#tag-clould-color {
    padding: 3px 10px 3px 10px;
    border-radius: 10px;
    color: #FFFFFF;
    margin: 3px 3px 3px 0;
    display: inline-block;
}

建议统一放置于assetscss目录下

< 三 > 在header中引入文件

20181012110914.png

<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/你的CSS文件名.css" type="text/css">

更改完在本地看一下效果 检查一下没什么问题就可以丢到服务器上辣~

浏览器如果没有效果 请检查你的CDN缓存设置
以及清除浏览器缓存刷新再试

啊~ 手贱删库之后又重新敲了这篇
童鞋们数据库记得备份啊喂。

祝好

Last modification:May 10th, 2018 at 03:41 am
If you think my article is useful to you, please feel free to appreciate

No comments

  1. 李青术

    还有你的彩标签云很不错,已经弄好了(ฅ´ω`ฅ)

    1. 曦语
      @李青术

      棒棒哒~OωO

  2. 李青术

    你好ヾ(≧∇≦*)ゝ!你的一些页面的https前面报部分内容不安全,你得把安装ssl证书之前上传的图片前缀改成https,之前默认是http的。

    1. 曦语
      @李青术

      谢谢o(=·ω·=)m~ 之前被我删库了 这些数据是我之前wordpress数据库导出来的部分文章
      这博客都要长草了 也没去管

  3. cnguu

    没看懂

    1. 曦语
      @cnguu

      之前删库之后这篇文章没有恢复 是不全的

      1. cnguu
        @曦语

        我已经知道怎么做了

        1. 曦语
          @cnguu

          优秀OωO

Leave a Comment