Hexo 标签云插件

现已升级至2.0.*版本,请移步 Hexo-Tag-Cloud 查看具体安装方法。

按照常理,首先要说明为什么要写这个东西。最主要的原因是,我在看同学博客的时候,被大部分的标签云恶心到了。 要么就是一个静态的列表,要么就是一个不知道怎么停下来的标签球。为表愤怒,我就写了这个插件。

求 STAR Hexo-Tag-Cloud

使用方法

  • 在 hexo 博客的根目录找到 package.json 这个文件夹,添加如下的依赖:
{
    "name": "hexo-site",
    "version": "0.0.0",
    "private": true,
    "hexo": {
        "version": "3.2.0"
    },
    "dependencies": {
        "hexo": "^3.2.0",
        "hexo-deployer-git": "^0.1.0",
        "hexo-generator-archive": "^0.1.4",
        "hexo-generator-category": "^0.1.3",
        "hexo-generator-index": "^0.2.0",
        "hexo-generator-tag": "^0.2.0",
        "hexo-renderer-ejs": "^0.2.0",
        "hexo-renderer-marked": "^0.2.10",
        "hexo-renderer-stylus": "^0.3.1",
        "hexo-server": "^0.2.0",
        "hexo-tag-cloud": "1.0.*" // 就是这句
    }
} 
  • 执行 npm install
  • 然后可以试着执行 hexo g 重新生成静态文件,这时候可以看一下 public 目录下是否有 tagcloud.xml 和 tagcloud.swf 这两个文件。如果有,则表示插件运行正常。
  • 如果上一步发生问题,请在 github 上提交 issue 并且附上 error log。 提交地址:GITHUB ISSUE
  • 然后运行 hexo s, 查看 http://localhost:4000/tagcloud.swf 是否可以看到标签云。如果不可以,请查看 tagcloud.xml 是否有内容。
  • 最后,就是将系统原有的 tagcloud 换成新版的 tagcloud.这边以官方自带的 landscape 主题为例。
  • 找到 hexo/themes/landscape/layout/_widget/tagcloud.ejs 这个文件,将里面的内容修改为:
<% if (site.tags.length){ %>
  <div class="widget-wrap">
    <h3 class="widget-title"><%= __('tagcloud') %></h3>
    <div class="widget tagcloud">
        <embed tplayername="SWF" splayername="SWF"
            type="application/x-shockwave-flash" src="tagcloud.swf"
            mediawrapchecked="true" pluginspage="http://www.macromedia.com/go/getflashplayer"
            id="tagcloudflash" name="tagcloudflash" bgcolor="#f3f3f3"
            quality="high" wmode="transparent" allowscriptaccess="always"
            flashvars="tcolor=0xbd1016&amp;tcolor2=0x808080&amp;hicolor=0x0065ff&amp;tspeed=100&amp;distr=true"
            height="100%" width="100%">
        </embed>
    </div>
  </div>
<% } %> 
  • 最后再次执行 hexo g && hexo s, 查看首页是否已经替换成功。
  • 好好享受新版的 tagcloud 还有 hexo 吧。
  • 最重要的,请不要使用中文作为 tag,会存在编码问题

效果展示

  1. 这边首先上一个图片效果图:

  2. 然后就是一个 Live Demo:

    请点击这个链接:mikecoder.github.io

原理

这边其实很简单,就是在 exit 事件结束前,遍历所有的 tag,然后记录在 tagcloud.xml 里面,通过将 tagcloud.swf 读取这个 xml,然后前端生成标签云。

接下来吐槽的

  1. 不推荐 Hexo 作为自己的博客系统,虽然这是免费的。不过,官方提供的插件挂载点,真的少。这边是官方文档中,插件的挂载点:

    • deployBefore
    • deployAfter
    • exit
    • generateBefore
    • generateAfter
    • new
  2. 这边和专业的博客系统比起来,真的是少的太多了。能做的事情也确实很少。这边推荐一下 emlog , 虽然不如 wordpress 功能强大,但是作为一个个人博客而言,功能已经可以满足的很好。

  3. Hexo 主要把自己作为一个静态页面生成器,所以在设计上走的是简化的路线。如果重新设计的话,其实可以将前端的页面进行充分模块化,方便用户进行自定义修改。
  4. 还有就是 npm 的设计,也是挺好的,不过踩了一个坑,就是 npm 的包上传的时候,ReadMe 不识别 README.md,所以一开始上传的时候,提示没有找到 ReadMe 相关的文档。后来找到需要在 package.json 里面配置,也是挺蛋疼的。
  5. last but not least, hexo 虽然支持 markdown 语法,但是,博客的本身并不是 markdown, 如果之后想要迁移,得花很大的精力将博客前的那段描述去除掉。这也是我不用 hexo 最主要的原因。

4 Replies to “Hexo 标签云插件”

  1. 如果之后想要迁移,得花很大的精力将博客前的那段描述去除掉。这也是我不用 hexo 最主要的原因
    不明白是什么意思

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.