最近升级了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
效果截图