为Ghost添加标签云

最近升级了Ghost,发现Ghost多了Public API功能,正好可以给单调的Ghost页面添加一点小玩意儿。

要使用标签云,只需要在Ghost的Code injection的Blog Footer中添加如下代码(
cdn.rawgit已经挂了,可以直接把压缩代码放到ghost的code injection中,详情查看。
https://www.hoyt-tian.com/cdn-rawgitwu-fa-fang-wen/


<script src="//cdn.rawgit.com/hoyt-tian/tagCloud/v0.3.0/dist/tagcloud.js"></script>   
<script>
    // 手机上不显示Tag Cloud;  Never show Tag Cloud on Mobile Browser
    var isMobile = (function(){
    return  navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i);})();
    
    if(!isMobile){
        fetch(ghost.url.api('tags',{limit:'all'}))
        .then(function(response){
                               return response.json();
                               })
        .then(function(data){
            new TagCloud(data.tags, TagCloud.prototype.plugins.ellipse).start();
        });
    }

</script>

该插件默认使用椭圆轨迹移动,还可以通过编写自定义插件,实现不同的效果,抽空了来讲讲实现。Github地址:https://github.com/hoyt-tian/tagCloud

效果截图
tag-cloud-1

Show Comments

Get the latest posts delivered right to your inbox.