开往   统计
  • 文章总数:256 篇
  • 评论总数:628 条
  • 分类总数:7 个
  • 最后更新:昨天 17:06

typecho热力图插件

本文阅读 1 分钟
首页 建站项目 正文
该插件是一个日历形式的文章发布时间展示插件,通过在首页展示一个具有独特样式的日历图表,用户可以直观地了解文章的发布情况和分布。用户只需简单地将插件放置到特定目录并添加少量代码到模板中即可使用,同时也可以根据个人喜好自定义样式。插件提供了两种使用方式,分别是renderGraph()和renderCalendar()函数,用户可以根据需求选择合适的方式。总的来说,这个插件简单易用,提供了直观的展示效果,帮助用户更好地管理和展示他们的文章发布时间。
摘要由智能技术生成

标题所示插件的具体效果应该通过首页可以看到了,用法很简单。如果是不想修改直接拿来用的话,直接解压缩,然后放到usr/plugins/的CalendarGraph目录下

直接使用的话:

在需要显示的位置:

  <?php \Typecho\Plugin::factory('index.php')->renderGraph() ;?>
  <?php \Typecho\Plugin::factory('index.php')->renderCalendar() ;?>

但在实际应用中,我的这个插件样式肯定不可能和你们现有的模版皮肤相配套,所以其实你们可以参考我的这两个函数的写法,直接在模板里面写上

<style>
    #tooltip {zindex: 999;display: none;position: fixed;left: 0;top: 0;height: 25px;background-color: rgba(0, 0, 0, .8);color: #fff;padding: 4px 10px;border-radius: 3px;font-size: 12px}
    #tooltip:after {display: block;position: absolute;content: '';bottom: -6px;left: 50%;margin-left: -6px;width: 0; height: 0; border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid rgba(0, 0, 0, .8);}
    svg {width: 100%}</style>
<div id='svg' ></div><div id='tooltip'></div>
<?php
        $item = json_encode(\TypechoPlugin\CalendarGraph::getGraphData());
        echo "<script>const graphOption = {tooptipId: '#tooltip',graphId : '#svg' ,tooltipFormat: '{1}篇内容于{0}发表',graphData:{$item}, option: {}};</script>";
?>
<script src='<?php echo Options::alloc()->rootUrl;?>.'/usr/plugins/CalendarGraph/bundle.js' defer></script>

效果图: Test

本文来自投稿,不代表本站立场,如若转载,请注明出处:
-- 展开阅读全文 --
在北海道做了一场不愿醒来的梦
« 上一篇 07-03
恶意盗刷CDN流量IP黑名单
下一篇 » 08-23

发表评论

发表评论


博客

图床

音乐

API
    请配置好页面缩略名选项

标签TAG

最近回复

AI点评
6月13日

#https://www.yvii.cn/archives/2038.html 本文详细介绍了如何通过自定义Chrome扩展来个性化Bing主页,操作简单,方便用户实现定制化体验。提供资源下载链接和设置主页方法,指导步骤清晰,值得一试。

自定义chrome、edge浏览器主页

推荐链接

AI
AI在线
以确保在用户需要帮助时能够及时提供解答和技术支持
您好,这里是「乙未极客」,请问有什么能帮到您?