首页 文章 教程 typecho制作彩色标签云
typecho制作彩色标签云
康露依

康露依

2022-08-23 11:23 / 0 / 0 / 0 / KR4


标签云(TagCloud)是用以表示一个网站中的内容标签。标签的排列顺序一般依照字典排序,按照热门程度确定字体的大小和颜色。这样,依照字典或者热门程度来寻找信息便成为可能。标签通常是超链接,指向分类页面。[^1]

Joe主题的标签云默认的是在电脑端的侧边栏里的 3D标签云 而且作为3D动态标签云,想要准确的点击并进入一个标签是比较困难的(特别是标签比较多的时候)。所以呢,康露依便想着再制作一个简易的标签云来供移动端的朋友们点击~

实现方法

1.在你的主题文件夹里新建“tag.php”。 2.复制你主题文件夹里的“page.php”文件里的所有内容,并粘贴到“tag.php”。 3.在“tag.php”里找到合适的位置粘贴以下内容:[^2] [^3]

<?php Typecho_Widget::widget(\'Widget_Metas_Tag_Cloud\',\'ignoreZeroCount=1&limit=150\')->to($tags); ?>
<?php if($tags->have()): ?>
<?php while ($tags->next()): ?>
<span id=\"tag-clould-color\"  style=\"background-color:rgb(&lt;?php echo(rand(155,255)); ?&gt;,&lt;?php echo(rand(155,255)); ?&gt;,&lt;?php echo(rand(155,255)); ?&gt;)\">
<a >permalink();?&gt;\" title=\"共&lt;?php $tags->count(); ?&gt;篇相关文章\">&lt;?php $tags->name(); ?&gt;(&lt;?php $tags->count(); ?&gt;)</a>
</span>
&lt;?php endwhile; ?&gt;
&lt;?php else: ?&gt;
<li>&lt;?php _e(\&#039;没有任何标签\&#039;); ?&gt;</li>
&lt;?php endif; ?&gt;
<style>
#tag-clould-color {
    padding: 5px 10px 5px 10px;
    border-radius: 20px;
    margin: 6px 3px 3px 0;
    display: inline-block;
}
</style>

4.在“tag.php”最前边添加以下内容:

&lt;?php
    /**
    * 标签云
    *
    * @package custom
    */
?&gt;

5.执行“后台>管理>独立页面>新增”新建独立页,在“编辑页面”右侧(移动端是下方)的“自定义模板”里,选择“标签云”

效果演示

标签云

参数说明

  • sort:排序方式为 mid;
  • ignoreZeroCount:忽略文章数为 0 的;
  • desc:是否降序输出;
  • limit:输出数目。

    其他的修改

    Joe主题可以直接添加到“统计页”

    实现方法

    在主题文件夹(一般是“Joe-master”)找到“census.php”文件,将以下代码添加到“第127行” {tabs} {tabs-pane label=\"添加内容\"}

            <br>
                <div class=\"joe_census__filing\">
             <div class=\"title\">标签云</div>
                    <div class=\"content\">
            &lt;?php Typecho_Widget::widget(\&#039;Widget_Metas_Tag_Cloud\&#039;,\&#039;ignoreZeroCount=1&limit=150\&#039;)->to($tags); ?&gt;
            &lt;?php if($tags->have()): ?&gt;
                &lt;?php while ($tags->next()): ?&gt;
                <span id=\"tag-clould-color\"  style=\"background-color:rgb(&lt;?php echo(rand(155,255)); ?&gt;,&lt;?php echo(rand(155,255)); ?&gt;,&lt;?php echo(rand(155,255)); ?&gt;)\">
                    <a >permalink();?&gt;\" title=\"共&lt;?php $tags->count(); ?&gt;篇相关文章\">&lt;?php $tags->name(); ?&gt;(&lt;?php $tags->count(); ?&gt;)</a>
                </span>
               &lt;?php endwhile; ?&gt;
               &lt;?php else: ?&gt;
               <li>&lt;?php _e(\&#039;没有任何标签\&#039;); ?&gt;</li>
        &lt;?php endif; ?&gt;
    <style>
    #tag-clould-color {
    padding: 5px 10px 5px 10px;
    border-radius: 20px;
    margin: 6px 3px 3px 0;
    display: inline-block;
    }
    </style>
                    </div>
             </div>
            </div>

    {/tabs-pane} {tabs-pane label=\"添加位置\"} Joe标签云添加位置 {/tabs-pane} {tabs-pane label=\"最终效果\"} Joe标签云效果 {/tabs-pane} {/tabs}

!--- 参考资料: [^1]: 标签云_搜狗百科 [color=#ccc][引用时间:2022-08-23][/color] [^2]: typecho标签云页面创建教程 - 银狐笔记 [color=#ccc][引用时间:2022-08-23][/color] [^3]: 输出标签云 - Typecho Docs [color=#ccc][引用时间:2022-08-23][/color]

0
温馨提示:

本文最后更新于 2022-08-23 ,若内容或图片失效,请留言反馈。