Hexo-Sakura标签云分类云

本文参考博客https://www.sakura521.cn/technology/sakurameihua.html

添加优美的标签页

效果图如下：

概览

我们要创建四个文件，修改一个文件,最后新生成一个标签页面

新建文件1

博客目录\themes\Sakura\layout\tages.ejs ⚠：不是tag是tags

其内容如下：

<div class="blank" style="padding-top: 75px;">
</div>
<div class="pattern-center ">
  <div class="pattern-attachment-img">
    <% if (page.photos) { %>
    <img src="<%= page.photos %>" src="<%- theme.lazyloadImg %>" data-src="<%= page.photos %>" class="lazyload" onerror="imgError(this,3)" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;">
    <% } else { %>
      <img src="<%= theme.bg[Math.floor(Math.random() * theme.bg.length + 1)-1] %>" src="<%- theme.lazyloadImg %>" data-src="<%= page.photos %>" class="lazyload" onerror="imgError(this,3)" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;">
    <% } %>
    <header class="pattern-header ">
      <h1 class="entry-title">
        标签云</h1>
        <span class="post-meta-item-icon">
          <i class="iconfont icon-attention"></i>
        </span>
        </span>
    </header>
  </div>
</div>
<div id="content" class="site-content">
  <div id="main">
    <header class="page-header">
      <h1 class="cat-title">
      标签云</h1>
      <span class="cat-des">
        <p>
          <%- "Tags " + site.tags.length %></p>
      </span>
    </header>
    <div id="main-part">
   
        <div class="tag-cloud">
          <div class="tag-cloud-title">
          </div>
          <div class="tag-cloud-tags">
          <%- tagcloud({
            min_font: 15,
            max_font: 30,
            amount: 200,
            color: true,
            start_color: '#ff6666',
            end_color: '#0099cc'
            }) %>
          </div>
        </div>

        <%- partial('_widget/tag-cloud') %>

        <% if (site.tags && site.tags.length > 0) { %>
        <%- partial('_widget/tag-wordcloud') %>
        <% } %>

      
        <section class="author-profile">
          <div class="info" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            <a href="/about/" class="profile gravatar"><img src="<%- (theme.cdn || '') + theme.avatar%>" itemprop="image" alt="hojun" height="70" width="70"></a>
            <div class="meta">
              <span class="title">Author</span>
              <h3 itemprop="name">
              <a href="<%- theme.url%>" itemprop="url" rel="author"><%- config.author %></a>
              </h3>
            </div>
          </div>
          <p id="showStr"></p>
        </section>
      </div>   
  </div>
</div>

新建文件2、3

\themes\Sakura\layout_widget\tag-cloud.ejs

\themes\Sakura\layout_widget\tag-wordcloud.ejs

各自内内容如下

_widget/tag-cloud.ejs

<%
var colorArr = ['#F9EBEA', '#F5EEF8', '#D5F5E3', '#E8F8F5', '#FEF9E7',
    '#F8F9F9', '#82E0AA', '#D7BDE2', '#A3E4D7', '#85C1E9', '#F8C471', '#F9E79F', '#FFF'];
var colorCount = colorArr.length;
var hashCode = function (str) {
    if (!str && str.length === 0) {
        return 0;
    }

    var hash = 0;
    for (var i = 0, len = str.length; i < len; i++) {
        hash = ((hash << 5) - hash) + str.charCodeAt(i);
        hash |= 0;
    }
    return hash;
};
var i = 0;
var isTag = is_tag();
%>

<div id="tags" class="container chip-container">
    <div class="card">
        <div class="card-content">
            <div class="tag-title center-align">
                <i class="fa fa-tags"></i>&nbsp;&nbsp; 标签
            </div>
            <div class="tag-chips">
                <% site.tags.map(function(tag) { %>
                <%
                    i++;
                    var color = i >= colorCount ? colorArr[Math.abs(hashCode(tag.name) % colorCount)]
                            : colorArr[i - 1];
                %>
                <a href="<%- url_for(tag.path) %>" title="<%- tag.name %>: <%- tag.length %>">
                    <span class="chip center-align waves-effect waves-light
                            <% if (isTag && tag.name == page.tag) { %> chip-active <% } else { %> chip-default <% } %>"
                            data-tagname="<%- tag.name %>" style="background-color: <%- color %>;"><%- tag.name %>
                        <span class="tag-length"><%- tag.length %></span>
                    </span>
                </a>
                <% }); %>
            </div>
        </div>
    </div>
</div>
<style>
#tags{
    margin-top: 60px;
}
.center-align{
    text-align:center
}
.chip-container {
    margin-top: -60px;
}

.chip-container .tag-title {
    margin-bottom: 10px;
    color: #3C4858;
    font-size: 1.75rem;
    font-weight: 400;
}

.chip-container .tag-chips {
    margin: 1rem auto 0.5rem;
    max-width: 850px;
    text-align: center;
}

.chip-container .tags-posts {
    margin-top: 20px;
}

.chip-container .chip-default {
    color: #7F95D1;
}

.chip-container .chip-active {
    color: #FFF !important;
    background: linear-gradient(to bottom right, #FF5E3A 0%, #FF2A68 100%) !important;
    box-shadow: 2px 5px 10px #aaa !important;
}

.chip-container .chip {
    margin: 10px 10px;
    padding: 19px 14px;
    display: inline-flex;
    line-height: 0;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .12);
    z-index: 0;
}

.chip-container .chip:hover {
    color: #fff;
    background: linear-gradient(to right, #FFC0BE 0%, #FF82A9 100%) !important;
}

.chip .tag-length {
    margin-left: 5px;
    margin-right: -2px;
    font-size: 0.5rem;
}

.chip-default .tag-length {
    color: #e91e63;
    margin-top: 1px;
}

.chip-active .tag-length {
    color: #fff;
}

</style>

_widget/tag-wordcloud.ejs

<link rel="stylesheet" type="text/css" href="https://blinkfox.github.io/libs/jqcloud/jqcloud.css">
<link rel="stylesheet" type="text/css" href="https://blinkfox.github.io/libs/aos/aos.css">
<style type="text/css">
    #tag-wordcloud {
        width: 100%;
        height: 300px;
    }
</style>

<script type="text/javascript" src="https://blinkfox.github.io/libs/aos/aos.js"></script>
<script>
    AOS.init();
</script>

<div class="container" data-aos="fade-up">
    <div class="card">
        <div class="tag-title center-align">
            <i class="fa fa-tags"></i>&nbsp;&nbsp; 标签云
        </div>
        <div id="tag-wordcloud" class="card-content"></div>
    </div>
</div>

<script type="text/javascript" src="https://blinkfox.github.io/libs/jqcloud/jqcloud-1.0.4.min.js"></script>
<script type="text/javascript">
    <%
    var tagWordArr = [];
    site.tags.map(function (tag) {
        tagWordArr.push({
            'text': tag.name,
            'weight': tag.length,
            'link': decodeURI(url_for(tag.path))
        });
    });

    var tagWords = JSON.stringify(tagWordArr); 
    %>

    $('#tag-wordcloud').jQCloud( <%- tagWords %>, {
        autoResize: true
    });
</script>

新建文件4

目录是博客目录\themes\Sakura\source\css\tags.css

这个文件是给标签tag-cloud增加前面小图标样式的

/*tag-cloud*/
.tag-cloud {
    text-align: center;
    margin-top: 20px;
  }
  .tag-cloud-title {
    font-size: 1.8rem;
    text-align: center;
  }
  .tag-cloud-tags {
    text-align: center;
  }
  .tag-cloud a {
    display: inline-block;
    margin: 0 0.4rem;
    text-decoration: none;
    font-weight: normal;
    font-size: 15px;
    cursor: pointer;
    line-height: normal;
    padding: 5px 5px 5px 10px;
    position: relative;
    border-radius: 0 5px 5px 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
  }
  .tag-cloud a:before {
    content: "🔖";
  }
  .tag-cloud a:hover {
    color: #ff7242 !important;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }

修改文件

博客目录\themes\Sakura\source\css\styles.css

将这段代码复制到style.css末尾

/*标签云*/
.chip-container {
	margin-top: 60px;
}

.chip-container .tag-title {
	margin-bottom: 10px;
	color: #3C4858;
	font-size: 1.75rem;
	font-weight: 400;
}

.chip-container .tag-chips {
	margin: 1rem auto 0.5rem;
	max-width: 850px;
	text-align: center;
}

.chip-container .tags-posts {
	margin-top: 20px;
}

.chip-container .chip-default {
	color: #34495e;
}

.chip-container .chip-active {
	color: #FFF !important;
	background: linear-gradient(to bottom right, #FF5E3A 0%, #FF2A68 100%) !important;
	box-shadow: 2px 5px 10px #aaa !important;
}

.chip-container .chip {
	margin: 10px 10px;
	padding: 19px 14px;
	display: inline-flex;
	line-height: 0;
	font-size: 1rem;
	font-weight: 500;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 0 3px 5px rgba(0, 0, 0, .12);
}

.chip-container .chip:hover {
	color: #fff;
	background: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%) !important;
}

.chip .tag-length {
	margin-left: 5px;
	margin-right: -2px;
	font-size: 0.5rem;
}

.chip-default .tag-length {
	color: #e91e63;
	margin-top: 1px;
}

.chip-active .tag-length {
	color: #fff;
}

.tag-title.center-align {
	margin-top: 100px;
	text-align: center;
}
/*标签云end*/

生成标签界面

使用命令hexo new page “tags”，修改博客根目录下source/tags/index.md

title: tags

date: 2020-03-09 13:50:05

layout: tags

在 http://localhost:4000/tags查看页面

添加优美的分类页

概览

新建文件1

主题目录\layout\categories.ejs

内容为

<%- partial('_partial/header') %>
<main class="content">
 
    <%- partial('_widget/category-cloud') %>
 
    <% if (site.categories && site.categories.length > 0) { %>
    <%- partial('_widget/category-radar') %>
    <% } %>
 
</main>

新建文件2、3

主题目录\layout_widget\category-cloud.ejs

主题目录\layout_widget\category-radar.ejs

_widget\category-cloud.ejs

<%
var colorArr = ['#F9EBEA', '#F5EEF8', '#D5F5E3', '#E8F8F5', '#FEF9E7',
    '#F8F9F9', '#82E0AA', '#D7BDE2', '#A3E4D7', '#85C1E9', '#F8C471', '#F9E79F', '#FFF'];
var colorCount = colorArr.length;
var hashCode = function (str) {
    if (!str && str.length === 0) {
        return 0;
    }
 
    var hash = 0;
    for (var i = 0, len = str.length; i < len; i++) {
        hash = ((hash << 5) - hash) + str.charCodeAt(i);
        hash |= 0;
    }
    return hash;
};
var i = 0;
var isCategory = is_category();
%>
 
<div id="category-cloud" class="container chip-container">
    <div class="card">
        <div class="card-content">
            <div class="tag-title center-align">
                <i class="fa fa-bookmark"></i>&nbsp;&nbsp;文章分类
            </div>
            <div class="tag-chips">
                <% if (site.categories && site.categories.length > 0) { %>
                <% site.categories.map(function(category) { %>
                <%
                    i++;
                    var color = i >= colorCount ? colorArr[Math.abs(hashCode(category.name) % colorCount)]
                            : colorArr[i - 1];
                %>
                <a href="<%- url_for(category.path) %>" title="<%- category.name %>: <%- category.length %>">
                    <span class="chip center-align waves-effect waves-light
                            <% if (isCategory && category.name == page.category) { %> chip-active <% } else { %> chip-default <% } %>"
                            style="background-color: <%- color %>;"><%- category.name %>
                        <span class="tag-length"><%- category.length %></span>
                    </span>
                </a>
                <% }); %>
                <% } else { %>
                <%= __('categoryEmptyTip') %>
                <% } %>
            </div>
        </div>
    </div>
</div>

_widget\category-radar.ejs

<style type="text/css">
    #category-radar {
        margin-top: 50px;
        width: 100%;
        height: 360px;
    }
</style>
 
<div class="container" data-aos="fade-up">
    <div class="card">
        <div id="category-radar" class="card-content"></div>
    </div>
</div>
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/echarts.min.js"></script>
<script type="text/javascript">
    var radarChart = echarts.init(document.getElementById('category-radar'));
 
    <%
        var categories = site.categories;
{1}
        // Find the maximum and average values of the post categories.
        var radarValueArr = [];
        categories.some(function(category) {
            radarValueArr.push(category.length);
        });
{1}
        var max = Math.max.apply(null, radarValueArr) + Math.min.apply(null, radarValueArr);
{1}
        // Calculate the data needed for the radar chart.
        var indicatorArr = [];
        categories.map(function(category) {
            indicatorArr.push({'name': category.name, 'max': max});
        });
{1}
        var indicatorData = JSON.stringify(indicatorArr);
        var radarValueData = JSON.stringify(radarValueArr);
    %>
 
    var option = {
        title: {
            left: 'center',var
            text: '文章分类雷达图',
            textStyle: {
                fontWeight: 500,
                fontSize: 22
            }
        },
        tooltip: {},
        radar: {
            name: {
                textStyle: {
                    color: '#3C4858'
                }
            },
            indicator: <%- indicatorData %>,
            nameGap: 5,
            center: ['50%','55%'],
            radius: '66%'
        },
        series: [{
            type: 'radar',
            color: ['#3ecf8e'],
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data : [
                {
                    value : <%- radarValueData %>,
                    name : '文章分类数量'
                }
            ]
        }]
    };
 
    radarChart.setOption(option);
</script>

接着用命令hexo new page “categories"创建分类页

修改博客根目录下source/categories/index.md

title: categories

date: 2020-03-09 13:50:05

layout: categories

查看http://localhost:4000/categories

最后完善

接着就是把这两个页面放到导航栏上面去

执行

hexo new page tages

hexo new page categories

将source中对应目录下面的index.md中的layout设置成对应的tags和categories就好了

修改主题配置文件，将这两行代码放到留言板之前

标签: {path: /tags/, fa: fa-tag }

分类: {path: /categories/, fa: fa-bookmark }

操作依据

EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。

我们的layout文件夹下的tags.ejs文件引用_widget下的标签相关ejs文件，主要负责生成基本的html要素，内容用到了新的css样式

之后修改source/css/style.css文件加入标签引用的相关样式供使用

最后的问题：

发现加载界面是对于标签下的标签字展示和文章下的文章雷达都会出现需要刷新界面才会展示的问题

2021.01.14日

问题处理

之所以出现刷新界面不显示雷达的问题是因为在同一节点第二次点击时会雷达样式文件中的那个let定义的变量会再次定义

所以我们要把let改为var避免报错js中的变量重复定义的问题。 我已经把上面的js代码中的let改为var了，应该可以正常使用，只是我没验证过

如果出现问题的话，可以按照问题范围查找一下

于2021.01.14日记录