一直想为Movable Type增加Tags Clould.
Google三天,终于在5叉4劈点坑完美的Tags Clould里找到比较好的解决方案.
A
下载 TagSupplementals 插件上传至Movable Type的plugins目录
B
在Movable Type模板管理内增加一个索引模板.模板名可随意用英文起,a-cong将其命名tags,输出文件名可有两种方式:(1)tags.html 访问地址是http://www.yoursite.com/tags.html (2)tags/index.html 访问地址是http://www.yoursite.com/tags/自留地的tags clould访问地址就是http://www.a-cong.com/tags/ 鉴于Google对网址排名喜好,建议先择第二种输出方式.记得要把重建索引模板时重建此页面勾选上哦.
C
tags的模板内容请复制以下代码,并保存重建.记得要把重建索引模板时重建此页面勾选上哦.以下粗体代码不建议更改,懂程序的除外,a-cong测试过十几次,当更改时,tag不会显示出来.
<blockquote><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="<$MTProductName version="1"$>" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<style type="text/css">
ul#tags { border: 1px solid #CCC; padding: 10px; margin: 10px; display: none; font: 0.97em "Lucida Grande", Verdana, Arial, sans-serif; line-height: 2.5em;}
#tags li { display: inline; }
#tags li a { border-width: 0; color: #666666; }
#tags li.hot a { color: #0C47A5; }
#tags li.old a { color: #999999; }
#tags li.oldest a { color: #CCC; }
#tags li a:active, #tags li a:hover { color: #FFFFFF; }
.coffButton { color: #000; background: #fff; border: 1px solid #ccc; padding: 2px; cursor: pointer; }
a.coffButton:hover { color: #000; background: #ccc; }
#coff { font-weight: bold; padding: 2px; }
</style>
<title>Tags Cloud-<$MTBlogName encode_html="1"$></title>
<link rel="start" href="<$MTBlogURL$>" title="Home" />
<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>
</head>
<body class="layout-two-column-right master-archive-index">
<div id="container">
<div id="container-inner" class="pkg">
<div id="banner">
<div id="banner-inner" class="pkg">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
</div>
<div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">
<p class="content-nav">
<a href="<$MTBlogURL$>">Main</a>
</p>
<h2 id="archive-title">Tags Cloud</h2>
<div class="archive-date-based archive">
<div class="entry">
<p>
Tags 使用频度过滤:
<a onclick="decCoff(5)" class="coffButton">-5</a>
<a onclick="decCoff(1)" class="coffButton">-1</a>
<a onclick="incCoff(1)" class="coffButton">+1</a>
<a onclick="incCoff(5)" class="coffButton">+5</a>
<span id="coff">0</span>
</p>
<ul id="tags">
<MTTags>
<strong><li title="<$MTTagName$>:<$MTTagCount$>:<$MTTagLastUpdated format="%Y-%m-%d"$>">
<a title="<$MTTagName$>(<$MTTagCount$>)<$MTTagLastUpdated format="%Y-%m-%d"$>" href="<$MTTagSearchLink$>"><$MTTagName$></a></li></strong></MTTags>
</ul>
<script language="javascript" type="text/javascript">
var E = 995 / 268;
function calcFontSize(count) {
return count / E + 11;
//return count / 6 + 12;
}
var tags = new Array();
var now = (new Date()).getTime();
var tagsNode = document.getElementById('tags');
var childNodes = tagsNode.childNodes;
for (var i = 0; i < childNodes.length; i++) {
var e = childNodes.item(i);
if (e.nodeName.match(/li/i)) {
var s = e.title.split(':');
e.style.fontSize = calcFontSize(s[1]) + 'px';
var d = s[2].split('-');
var diff = (now - (new Date(d[0], d[1] - 1, d[2])).getTime()) / 86400000;
if (diff < 14) e.className = 'hot';
else if (diff > 365) e.className = 'oldest';
else if (diff > 60) e.className = 'old';
tags.push([ e, s[1] ]);
}
}
tagsNode.style.display = 'block';
var coff = 0;
var coffNode = document.getElementById('coff');
function decCoff(c) {
if (coff == 0) return;
coff -= c;
if (coff < 0) coff = 0;
coffNode.innerHTML = coff;
refreshCoff();
}
function incCoff(c) {
if (coff == 20) return;
coff += c;
if (coff > 20) coff = 20;
coffNode.innerHTML = coff;
refreshCoff();
}
function refreshCoff() {
for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
tag[0].style.visibility = (tag[1] <= coff) ? "hidden" : "visible";
}
}
</script>
</div>
</div>
</div>
</div>
<div id="beta">
<div id="beta-inner" class="pkg">
<MTIfArchiveTypeEnabled archive_type="Category"><div class="module-categories module">
<h2 class="module-header">About Tags Cloud </h2>
<div class="module-content">
本页列出了自留地使用的所有Tag，根据Tag使用频度和加入日期设定了敏感化的文字和颜色，而使用Tag使用频度过滤，可以方便的查看使用频度高的Tag。
</div>
</div><div class="module-categories module">
<h2 class="module-header">Categories</h2>
<div class="module-content">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
<MTElse>
<li class="module-list-item"><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
</MTIfArchiveTypeEnabled>
<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="module-archives module">
<h2 class="module-header">Archives</h2>
<div class="module-content">
<MTArchiveList archive_type="Monthly">
<MTArchiveListHeader><ul class="module-list"></MTArchiveListHeader>
<li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
<MTArchiveListFooter></ul></MTArchiveListFooter>
</MTArchiveList>
<li class="module-list-item"><a href="http://www.a-cong.com/archives.html">All Archives</a></li>
</div>
</div>
</MTIfArchiveTypeEnabled>
<MTBlogIfCCLicense></MTBlogIfCCLicense>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
</body>
</body>
</html></blockquote>