这个包能在hexo的tranquilpeak主题中使用吗？

[edonyzpc]

这个tag cloud能添加到hexo别的主题吗？例如tranquilpeak。 我没有接触过js，所以具体怎么我不会，能不能指教一下。谢谢！

[D0n9X1n]

http://mikecoder.github.io/all-tags/ 是要这样的效果吗？

[D0n9X1n]

先安装 hexo-tag-cloud 插件，具体可以看 ReadMe。然后在贴代码的部分改成在 /hexo/themes/tranquilpeak/layout/all-tags.ejs 这里面加上：

<% if (site.tags.length){ %>
    <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
    <div class="widget-wrap">
        <h3 class="widget-title"><%= __('tagcloud') %></h3>
        <div id="myCanvasContainer" class="widget tagcloud">
            <canvas width="250" height="250" id="resCanvas" style="width=100%">
                <%- tagcloud() %>
            </canvas>
        </div>
    </div>
<% } %>

就好了。 具体的样式，你可以慢慢改，附上我修改好的 all-tags.ejs 内容。

[D0n9X1n]

<div id="tags-archives" class="main-content-wrap">
    <form id="filter-form" action="#">
        <input name="tag" type="text" class="form-control input--xlarge" placeholder="<%= __('global.search_tag') %>" autofocus="autofocus">
    </form>
    <h4 class="archive-result text-color-base text-xlarge"
        data-message-zero="<%= __('global.tags_found.zero') %>"
        data-message-one="<%= __('global.tags_found.one') %>"
        data-message-other="<%= __('global.tags_found.other') %>"></h4>

        <section>
        <% site.tags.sort('name').each(function(tag) { %>
            <a class="tag tag--primary tag--small" href="<%= '#' + tag.name + '-list' %>" data-tag="<%= tag.name.toLowerCase() %>">
                <%= tag.name %>
            </a>
        <% }); %>
    </section>
    <section class="boxes">
        <% if (site.tags.length){ %>
            <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
            <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
            <div class="widget-wrap">
                <h3 class="widget-title">标签云</h3>
                <center>
                    <div id="myCanvasContainer" class="widget tagcloud">
                        <canvas width="300" height="300" id="resCanvas" style="width=100%">
                            <%- tagcloud() %>
                        </canvas>
                    </div>
                </center>
            </div>
        <% } %>
        <% site.tags.sort('name').each(function(tag) { %>
            <div id="<%= tag.name + '-list' %>" class="archive box" data-tag="<%= tag.name.toLowerCase() %>">
                <h4 class="archive-title">
                    <a class="link-unstyled" href="<%- url_for(config.tag_dir + '/' + tag.slug) %>">
                        <%= tag.name + ' (' + tag.length + ')' %>
                    </a>
                </h4>
                <ul class="archive-posts">
                    <% site.tags.findOne({'name': tag.name}).posts.each(function(post) { %>
                        <li class="archive-post">
                            <a class="archive-post-title" href="<%- url_for(post.path) %>">
                                <%= post.title || '(' + __('post.no_title') + ')' %>
                            </a>
                            <span class="archive-post-date">
                                <%= ' - ' + post.date.locale(page.lang).format(__('date_format')).toLowerCase() %>
                            </span>
                        </li>
                    <% }) %>
                </ul>
            </div>
        <% }); %>
    </section>
</div>

[edonyzpc]

非常感谢就是这样的效果，我已经尝试成功了，但是不知道能不能添加到sidebar中或者index那一页中？

[D0n9X1n]

可以的，你找到 hexo/themes/tranquilpeak/layout/_partial/sidebar.ejs 然后把内容改成如下代码，可以实现 http://mikecoder.github.io 这样的效果，字体的颜色和高亮可以按照 ReadMe 修改 : )。喜欢记得 star 啊。 👍

<!-- Define author's picture -->
<% var authorPicture = null; %>
<% if (theme.gravatar_email && theme.gravatar_email.length) { %>
    <% authorPicture = gravatar(theme.gravatar_email, 110); %>
<% } else if (theme.author.picture && theme.author.picture.length) { %>
<% if (is_remote_url(theme.author.picture)) { %>
        <% authorPicture = theme.author.picture; %>
    <% } else { %>
        <% authorPicture = url_for(theme.image_dir + '/' + theme.author.picture); %>
    <% } %>
<% } %>
<nav id="sidebar" data-behavior="<%= sidebarBehavior %>">
    <div class="sidebar-container">
        <% if (authorPicture) { %>
            <div class="sidebar-profile">
                <a href="<%- url_for('/#about') %>">
                    <img class="sidebar-profile-picture" src="<%= authorPicture %>" alt="<%= __('global.author_picture') %>"/>
                </a>
                <h4 class="sidebar-profile-name"><%= config.author %></h4>
                <% if (__('author.bio')) { %>
                    <h5 class="sidebar-profile-bio"><%- markdown(__('author.bio')) %></h5>
                <% } %>
            </div>
        <% } %>
        <% for (var i in theme.sidebar) { %>
            <ul class="sidebar-buttons">
            <% for (var n in theme.sidebar[i]) { %>
                <li class="sidebar-button">
                    <% if (url_for(theme.sidebar[i][n].url).indexOf(config.url) < 0 && url_for(theme.sidebar[i][n].url).indexOf(':') >= 0) { %>
                        <a  class="sidebar-button-link <% if (theme.sidebar[i][n].class) { %><%= theme.sidebar[i][n].class %><% } %>" href="<%- url_for(theme.sidebar[i][n].url) %>" target="_blank">
                    <% } else { %>
                        <a  class="sidebar-button-link <% if (theme.sidebar[i][n].class) { %><%= theme.sidebar[i][n].class %><% } %>"
                            <% if (theme.sidebar[i][n].url.indexOf("/") === 0 && theme.sidebar[i][n].url.length === 1) { %> href="<%- url_for(' ') %>"
                            <% } else if (theme.sidebar[i][n].url.indexOf("/") === 0) { %> href="<%- url_for(theme.sidebar[i][n].url.substr(1)) %>"
                            <% } else { %> href="<%- url_for(theme.sidebar[i][n].url) %>"<% } %>
                        >
                    <% } %>
                        <i class="sidebar-button-icon fa fa-lg <%= 'fa-' + theme.sidebar[i][n].icon %>"></i>
                        <span class="sidebar-button-desc"><%= __(theme.sidebar[i][n].title) %></span>
                    </a>
            </li>
            <% } %>
        </ul>
        <% } %>
        <!-- Define Tag Cloud Plugin Start-->
        <% if (site.tags.length){ %>
            <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
            <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
            <div class="widget-wrap">
                <h3 class="widget-title"><%= __('tagcloud') %></h3>
                <div id="myCanvasContainer" class="widget tagcloud">
                    <canvas width="300" height="300" id="resCanvas" style="width=100%;">
                        <%- tagcloud() %>
                    </canvas>
                </div>
            </div>
        <% }
        <!-- Define Tag Cloud Plugin  End-->
    </div>
</nav>

[edonyzpc]

非常感谢，已经成功了，已star

[D0n9X1n]

哈哈，谢谢~