关于关系网简介
虽然Butterfly主题的博客自带标签导航模块，但不是很有性格。闲来无聊逛逛博客，无意间发现了一款标签导航插件，正是我想象中需要的效果，首先感谢大佬长征部落格提供的插件和帮助，但由于大佬使用的是Volantis主题，本博客使用的是Butterfly主题，与插件不太兼容，在经过和大佬的交流指导和自己修改了部分样式后，在电脑上看起来顺眼多了，但手机显示还是不理想，由于技术有限，期待大佬后续的更新和完善，顺便记录一下修改的地方，分享给有需要的小伙伴！
安装
1
| npm install hexo-generator-tagsnet --save
|
升级
1
| npm install hexo-generator-tagsnet --update --save
|
配置
在Hexo根目录 config.yml追加以下内容，svg参数默认即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| # 标签关系网插件 注意是放到根目录配置文件下
tagsnet:
builtin: false #默认即可
title: 文章导航关系网
quote: 由标签及分类构建关联。本页使用<a target="_blank" href="https://www.npmjs.com/package/hexo-generator-tagsnet">hexo-generator-tagsnet</a>插件构建。<a target="_blank" href="https://www.xyym.cf/tagsnet/">[关系网]</a>
svg:
svg_big_color: "#ff4081"
svg_small_color: "#3f51b5"
svg_line_color: "#b1b1b1"
svg_line_weight: "0.5"
svg_text_weight: "12px"
svg_width: "100%"
svg_exheight: 20
svg_bgcolor: "#faf9f900" //透明背景
svg_force: "-20" //为了紧凑butterfly主题，可自行调整
valine: #渲染页面内valine加载不出来时使用
app_id: z2GwNsG7RRpWpx5rt7psedl5-MdYXbMMI
app_key: gI6Yhfwz4JiUIv9546gepko8
|
美化样式
修改样式的位置：..\node_modules\hexo-generator-tagsnet\lib\templates\tagsnet.ejs
打开tagsnet.ejs文件,可根据自己喜好修改文字段落的样式效果，例如修改代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <div class="dbox"><p class="datacont"><%- quote; %></p></div>
<style>
.dbox {
background: #090c6e;
border-radius: 15px;
padding: 8px 8px;
margin-top: 12px;
}
.dbox .datacont {
font-size: 1rem;
font-weight: 700;
color: #c01f96db;
width: 100%;
line-height: 1.38;
padding-top: 16px;
}
</style>
|
