51工具盒子彩色友链 {#彩色友链}
把友链改成外挂标签形式 {#把友链改成外挂标签形式}
只需要复制原来的友链yml，然后删除，新建一个与之前同名的page，然后编辑：
|---------------|------------------------------------------------|
| 1 2 3 | {% flink %} # 这里粘贴友链yml {% endflink %} |
重新渲染即可生效。
修改外挂标签js {#修改外挂标签js}
修改[blogRoot]\themes\butterfly\scripts\tag\flink.js:
|---------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | /** * flink */ 'use strict' const urlFor = require('hexo-util').url_for.bind(hexo) const flinkFn = (args, content) => { content = hexo.render.renderSync({ text: content, engine: 'yaml' }) let result = '' content.forEach(i => { const className = i.class_name ? `<div class="flink-name">${i.class_name}</div>` : '' const classDesc = i.class_desc ? `<div class="flink-desc">${i.class_desc}</div>` : '' let listResult = '' i.link_list.forEach(j => { if(j.theme_color==undefined){ j.theme_color="#383838" } listResult += ` <div class="flink-list-item" style="background-color:${j.theme_color}"> <a href="${j.link}" title="${j.name}" target="_blank"> <div class="flink-item-icon"> <img class="no-lightbox" src="${j.avatar}" onerror='this.onerror=null;this.src="${urlFor(hexo.theme.config.error_img.flink)}"' alt="${j.name}" /> </div> <div class="flink-item-name">${j.name}</div> <div class="flink-item-desc" title="${j.descr}">${j.descr}</div> </a> </div>` }) result += `${className}${classDesc} <div class="flink-list">${listResult}</div>` }) return `<div class="flink">${result}</div>` } hexo.extend.tag.register('flink', flinkFn, { ends: true }) |
修改css {#修改css}
添加一些css，让友链变得更好看：
|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | #article-container .flink .flink-list { text-align: left!important; } .flink-item-name, .flink-item-desc { color: white!important; } |
然后你还需要在友链yml后面添加theme_color（一定要用引号包起来不然报错），重新渲染就完成了。
参考链接: https://yisous.xyz/posts/ac792cf4/
