📖 本教程更新于 2023 年 08 月 21 日

📚 文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5
为博主的重构魔改日记，以防自己日后因魔改迷失所做记录 📝

导航栏魔改美化

Butterfly的魔改教程：导航栏魔改美化
魔改一下博客导航栏居中显示，以及PE端的菜单栏样式

loading加载动画

Butterfly的魔改教程：loading加载动画
iCat版Logo加载动画；内附旧版Heo样式魔改教程，以及胶囊加载

语雀同款链接卡片

效果预览

爱吃肉的猫
有肉有猫有生活.

创建数据

  • 创建 [blogRoot]/themes/butterfly/scripts/tag/link.js 文件，并新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*
 * link
 * {% link url,title,favicon,desc %}
 * {% link 链接,标题,图标,介绍 %}
 */

'use strict'

let defaultIcon = '<svg t="1670307855063" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19066" width="200" height="200"><path d="M504.064 516.608m-384.256 0a384.256 384.256 0 1 0 768.512 0 384.256 384.256 0 1 0-768.512 0Z" fill="#009CF5" p-id="19068"></path><path d="M746.112 270.464L472.448 485.12l63.104 63.104L750.08 274.56c2.304-2.688-1.28-6.144-3.968-4.096z" fill="#FF4C3A" p-id="19069"></path><path d="M262.016 762.752l273.664-214.528-63.104-63.104-214.656 273.536c-2.176 2.688 1.28 6.144 4.096 4.096z" fill="#FFFFFF" p-id="19070"></path><path d="M505.216 155.136c-3.2 0-5.888 2.56-5.888 5.888v53.504c0 3.2 2.56 5.888 5.888 5.888s5.888-2.56 5.888-5.888v-53.504c-0.128-3.2-2.688-5.888-5.888-5.888zM442.368 160.512c-3.2 0.512-5.376 3.584-4.736 6.784l9.344 52.736c0.512 3.2 3.584 5.376 6.784 4.736 3.2-0.512 5.376-3.584 4.736-6.784l-9.344-52.736c-0.512-3.2-3.584-5.376-6.784-4.736zM396.288 234.368c1.152 3.072 4.48 4.608 7.552 3.456 3.072-1.152 4.608-4.48 3.456-7.552l-18.304-50.304c-1.152-3.072-4.48-4.608-7.552-3.456-3.072 1.152-4.608 4.48-3.456 7.552l18.304 50.304zM348.928 257.408c1.664 2.816 5.248 3.712 7.936 2.176s3.712-5.248 2.176-7.936l-26.752-46.336c-1.664-2.816-5.248-3.712-7.936-2.176-2.816 1.664-3.712 5.248-2.176 7.936l26.752 46.336zM306.304 288.256c2.048 2.432 5.76 2.816 8.192 0.768 2.432-2.048 2.816-5.76 0.768-8.192l-34.432-40.96c-2.048-2.432-5.76-2.816-8.192-0.768-2.432 2.048-2.816 5.76-0.768 8.192l34.432 40.96zM269.696 326.144c2.432 2.048 6.144 1.792 8.192-0.768 2.048-2.432 1.792-6.144-0.768-8.192l-40.96-34.432c-2.432-2.048-6.144-1.792-8.192 0.768-2.048 2.432-1.792 6.144 0.768 8.192l40.96 34.432zM193.792 342.912l46.336 26.752c2.816 1.664 6.4 0.64 7.936-2.176 1.664-2.816 0.64-6.4-2.176-8.064L199.552 332.8c-2.816-1.664-6.4-0.64-7.936 2.176-1.664 2.688-0.64 6.272 2.176 7.936zM168.32 399.488l50.304 18.304c3.072 1.152 6.4-0.512 7.552-3.456 1.152-3.072-0.512-6.4-3.456-7.552l-50.304-18.304c-3.072-1.152-6.4 0.512-7.552 3.456-1.152 3.072 0.384 6.4 3.456 7.552zM207.872 457.344l-52.736-9.344c-3.2-0.512-6.272 1.536-6.784 4.736-0.512 3.2 1.536 6.272 4.736 6.784l52.736 9.344c3.2 0.512 6.272-1.536 6.784-4.736 0.512-3.2-1.536-6.272-4.736-6.784zM201.984 509.568H148.48c-3.2 0-5.888 2.56-5.888 5.888 0 3.2 2.56 5.888 5.888 5.888h53.504c3.2 0 5.888-2.56 5.888-5.888 0-3.2-2.56-5.888-5.888-5.888zM205.44 562.176l-52.736 9.344c-3.2 0.512-5.376 3.584-4.736 6.784 0.512 3.2 3.584 5.376 6.784 4.736l52.736-9.344c3.2-0.512 5.376-3.584 4.736-6.784s-3.584-5.248-6.784-4.736zM217.856 613.376l-50.304 18.304c-3.072 1.152-4.608 4.48-3.456 7.552 1.152 3.072 4.48 4.608 7.552 3.456l50.304-18.304c3.072-1.152 4.608-4.48 3.456-7.552-1.152-3.072-4.48-4.608-7.552-3.456zM238.976 661.504l-46.336 26.752c-2.816 1.664-3.712 5.248-2.176 8.064 1.664 2.816 5.248 3.712 8.064 2.176l46.336-26.752c2.816-1.664 3.712-5.248 2.176-8.064-1.664-2.816-5.248-3.712-8.064-2.176zM268.16 705.408l-40.96 34.432c-2.432 2.048-2.816 5.76-0.768 8.192 2.048 2.432 5.76 2.816 8.192 0.768l40.96-34.432c2.432-2.048 2.816-5.76 0.768-8.192-1.92-2.56-5.632-2.816-8.192-0.768zM304.512 743.424l-34.432 40.96c-2.048 2.432-1.792 6.144 0.768 8.192 2.432 2.048 6.144 1.792 8.192-0.768l34.432-40.96c2.048-2.432 1.792-6.144-0.768-8.192-2.304-1.92-6.016-1.664-8.192 0.768zM347.008 774.656l-26.752 46.336c-1.664 2.816-0.64 6.4 2.176 7.936 2.816 1.664 6.4 0.64 8.064-2.176l26.752-46.336c1.664-2.816 0.64-6.4-2.176-7.936-2.816-1.536-6.4-0.64-8.064 2.176zM394.24 798.08l-18.304 50.304c-1.152 3.072 0.512 6.4 3.456 7.552 3.072 1.152 6.4-0.512 7.552-3.456l18.304-50.304c1.152-3.072-0.512-6.4-3.456-7.552-3.072-1.152-6.528 0.384-7.552 3.456zM440.192 872.32c3.2 0.512 6.272-1.536 6.784-4.736l9.344-52.736c0.512-3.2-1.536-6.272-4.736-6.784-3.2-0.512-6.272 1.536-6.784 4.736l-9.344 52.736c-0.64 3.2 1.536 6.272 4.736 6.784zM502.912 878.08c3.2 0 5.888-2.56 5.888-5.888v-53.504c0-3.2-2.56-5.888-5.888-5.888-3.2 0-5.888 2.56-5.888 5.888v53.504c0 3.2 2.688 5.888 5.888 5.888zM549.632 815.232l9.344 52.736c0.512 3.2 3.584 5.376 6.784 4.736 3.2-0.512 5.376-3.584 4.736-6.784l-9.344-52.736c-0.512-3.2-3.584-5.376-6.784-4.736-3.2 0.512-5.248 3.584-4.736 6.784zM600.832 802.816l18.304 50.304c1.152 3.072 4.48 4.608 7.552 3.456 3.072-1.152 4.608-4.48 3.456-7.552L611.84 798.72c-1.152-3.072-4.48-4.608-7.552-3.456-3.072 1.152-4.608 4.48-3.456 7.552zM649.088 781.696l26.752 46.336c1.664 2.816 5.248 3.712 8.064 2.176 2.816-1.664 3.712-5.248 2.176-8.064l-26.88-46.336c-1.664-2.816-5.248-3.712-8.064-2.176-2.816 1.664-3.712 5.248-2.048 8.064zM692.864 752.384l34.432 40.96c2.048 2.432 5.76 2.816 8.192 0.768 2.432-2.048 2.816-5.76 0.768-8.192l-34.432-40.96c-2.048-2.432-5.76-2.816-8.192-0.768-2.56 2.048-2.816 5.76-0.768 8.192zM730.88 716.032l40.96 34.432c2.432 2.048 6.144 1.792 8.192-0.768 2.048-2.432 1.792-6.144-0.768-8.192l-40.96-34.432c-2.432-2.048-6.144-1.792-8.192 0.768-1.92 2.432-1.664 6.144 0.768 8.192zM762.112 673.664l46.336 26.752c2.816 1.664 6.4 0.64 8.064-2.176 1.664-2.816 0.64-6.4-2.176-7.936L768 663.552c-2.816-1.664-6.4-0.64-8.064 2.176-1.536 2.688-0.64 6.272 2.176 7.936zM785.536 626.432l50.304 18.304c3.072 1.152 6.4-0.512 7.552-3.456 1.152-3.072-0.512-6.4-3.456-7.552l-50.304-18.304c-3.072-1.152-6.4 0.512-7.552 3.456-1.152 3.072 0.384 6.4 3.456 7.552zM800.256 575.872l52.736 9.344c3.2 0.512 6.272-1.536 6.784-4.736 0.512-3.2-1.536-6.272-4.736-6.784l-52.736-9.344c-3.2-0.512-6.272 1.536-6.784 4.736-0.512 3.2 1.536 6.272 4.736 6.784zM800.256 517.76c0 3.2 2.56 5.888 5.888 5.888h53.504c3.2 0 5.888-2.56 5.888-5.888 0-3.2-2.56-5.888-5.888-5.888h-53.504c-3.328 0-5.888 2.56-5.888 5.888zM802.688 471.04l52.736-9.344c3.2-0.512 5.376-3.584 4.736-6.784-0.512-3.2-3.584-5.376-6.784-4.736l-52.736 9.344c-3.2 0.512-5.376 3.584-4.736 6.784 0.512 3.2 3.584 5.248 6.784 4.736zM790.272 419.84l50.304-18.304c3.072-1.152 4.608-4.48 3.456-7.552-1.152-3.072-4.48-4.608-7.552-3.456l-50.304 18.304c-3.072 1.152-4.608 4.48-3.456 7.552 1.152 2.944 4.48 4.608 7.552 3.456zM769.152 371.584l46.336-26.752c2.816-1.664 3.712-5.248 2.176-7.936-1.664-2.816-5.248-3.712-8.064-2.176l-46.336 26.752c-2.816 1.664-3.712 5.248-2.176 8.064 1.664 2.688 5.248 3.712 8.064 2.048zM739.84 327.808l40.96-34.432c2.432-2.048 2.816-5.76 0.768-8.192-2.048-2.432-5.76-2.816-8.192-0.768l-40.96 34.432c-2.432 2.048-2.816 5.76-0.768 8.192 2.048 2.56 5.76 2.816 8.192 0.768zM703.488 289.664l34.432-40.96c2.048-2.432 1.792-6.144-0.768-8.192-2.432-2.048-6.144-1.792-8.192 0.768l-34.432 40.96c-2.048 2.432-1.792 6.144 0.768 8.192 2.432 2.048 6.144 1.792 8.192-0.768zM661.12 258.56l26.752-46.336c1.664-2.816 0.64-6.4-2.176-7.936-2.816-1.664-6.4-0.64-8.064 2.176l-26.752 46.336c-1.664 2.816-0.64 6.4 2.176 7.936 2.816 1.536 6.4 0.64 8.064-2.176zM613.888 235.136l18.304-50.304c1.152-3.072-0.512-6.4-3.456-7.552-3.072-1.152-6.4 0.512-7.552 3.456L602.88 231.168c-1.152 3.072 0.512 6.4 3.456 7.552 3.072 1.024 6.4-0.512 7.552-3.584zM556.544 225.152c3.2 0.512 6.272-1.536 6.784-4.736l9.344-52.736c0.512-3.2-1.536-6.272-4.736-6.784-3.2-0.512-6.272 1.536-6.784 4.736l-9.344 52.736c-0.512 3.2 1.536 6.144 4.736 6.784zM273.536 290.432c2.432 2.432 6.528 2.432 8.96 0 2.432-2.432 2.432-6.528 0-8.96l-21.12-21.12c-2.432-2.432-6.528-2.432-8.96 0-2.432 2.432-2.432 6.528 0 8.96l21.12 21.12zM237.824 333.824c2.944 2.048 6.912 1.28 8.832-1.536 2.048-2.944 1.28-6.912-1.536-8.832l-24.448-17.152c-2.944-2.048-6.912-1.28-8.832 1.536s-1.28 6.912 1.536 8.832l24.448 17.152zM183.04 370.176l27.136 12.672c3.2 1.536 7.04 0.128 8.448-3.072 1.536-3.2 0.128-7.04-3.072-8.448l-27.136-12.672c-3.2-1.536-7.04-0.128-8.448 3.072-1.536 3.2-0.128 7.04 3.072 8.448zM194.688 423.68l-28.928-7.68c-3.456-0.896-6.912 1.152-7.808 4.48-0.896 3.456 1.152 6.912 4.48 7.808l28.928 7.68c3.456 0.896 6.912-1.152 7.808-4.48 0.896-3.456-1.152-6.912-4.48-7.808zM183.168 478.72l-29.824-2.56c-3.456-0.256-6.656 2.304-6.912 5.76-0.256 3.456 2.304 6.656 5.76 6.912l29.824 2.56c3.456 0.256 6.656-2.304 6.912-5.76 0.384-3.456-2.176-6.528-5.76-6.912zM181.504 535.04l-29.824 2.56c-3.456 0.256-6.144 3.456-5.76 6.912 0.256 3.456 3.456 6.144 6.912 5.76l29.824-2.56c3.456-0.256 6.144-3.456 5.76-6.912-0.256-3.456-3.328-6.016-6.912-5.76zM191.36 590.72l-28.928 7.68c-3.456 0.896-5.376 4.352-4.48 7.808 0.896 3.456 4.352 5.376 7.808 4.48l28.928-7.68c3.456-0.896 5.376-4.352 4.48-7.808-0.896-3.328-4.352-5.376-7.808-4.48zM207.232 644.224l-27.136 12.672c-3.2 1.536-4.608 5.248-3.072 8.448 1.536 3.2 5.248 4.608 8.448 3.072l27.136-12.672c3.2-1.536 4.608-5.248 3.072-8.448-1.408-3.2-5.248-4.48-8.448-3.072zM233.984 693.888l-24.448 17.152c-2.944 2.048-3.584 6.016-1.536 8.832 2.048 2.944 6.016 3.584 8.832 1.536l24.448-17.152c2.944-2.048 3.584-6.016 1.536-8.832-2.048-2.944-6.016-3.584-8.832-1.536zM310.912 775.552L293.76 800c-2.048 2.944-1.28 6.912 1.536 8.832 2.944 2.048 6.912 1.28 8.832-1.536l17.152-24.448c2.048-2.944 1.28-6.912-1.536-8.832-2.816-2.048-6.912-1.408-8.832 1.536zM349.184 840.704c3.2 1.536 7.04 0.128 8.448-3.072l12.672-27.136c1.536-3.2 0.128-7.04-3.072-8.448-3.2-1.536-7.04-0.128-8.448 3.072l-12.672 27.136c-1.408 3.2-0.128 6.912 3.072 8.448zM407.808 862.72c3.456 0.896 6.912-1.152 7.808-4.48l7.68-28.928c0.896-3.456-1.152-6.912-4.48-7.808-3.456-0.896-6.912 1.152-7.808 4.48l-7.68 28.928c-0.896 3.328 1.152 6.912 4.48 7.808zM469.376 874.112c3.456 0.256 6.656-2.304 6.912-5.76l2.56-29.824c0.256-3.456-2.304-6.656-5.76-6.912-3.456-0.256-6.656 2.304-6.912 5.76l-2.56 29.824c-0.256 3.584 2.304 6.656 5.76 6.912zM522.496 839.168l2.56 29.824c0.256 3.456 3.456 6.144 6.912 5.76 3.456-0.256 6.144-3.456 5.76-6.912l-2.56-29.824c-0.256-3.456-3.456-6.144-6.912-5.76-3.456 0.256-6.016 3.328-5.76 6.912zM578.176 830.976l7.68 28.928c0.896 3.456 4.352 5.376 7.808 4.48 3.456-0.896 5.376-4.352 4.48-7.808l-7.68-28.928c-0.896-3.456-4.352-5.376-7.808-4.48-3.328 0.896-5.376 4.48-4.48 7.808zM631.68 813.312l12.672 27.136c1.536 3.2 5.248 4.608 8.448 3.072 3.2-1.536 4.608-5.248 3.072-8.448l-12.672-27.136c-1.536-3.2-5.248-4.608-8.448-3.072-3.2 1.536-4.48 5.248-3.072 8.448zM681.344 786.688l17.152 24.448c2.048 2.944 6.016 3.584 8.832 1.536 2.944-2.048 3.584-6.016 1.536-8.832l-17.152-24.448c-2.048-2.944-6.016-3.584-8.832-1.536-2.944 1.92-3.584 5.888-1.536 8.832zM725.504 751.744l21.12 21.12c2.432 2.432 6.528 2.432 8.96 0 2.432-2.432 2.432-6.528 0-8.96l-21.12-21.12c-2.432-2.432-6.528-2.432-8.96 0-2.432 2.432-2.432 6.528 0 8.96zM763.008 709.76l24.448 17.152c2.944 2.048 6.912 1.28 8.832-1.536 2.048-2.944 1.28-6.912-1.536-8.832l-24.448-17.152c-2.944-2.048-6.912-1.28-8.832 1.536-2.048 2.816-1.408 6.784 1.536 8.832zM792.576 661.888l27.136 12.672c3.2 1.536 7.04 0.128 8.448-3.072 1.536-3.2 0.128-7.04-3.072-8.448l-27.136-12.672c-3.2-1.536-7.04-0.128-8.448 3.072-1.536 3.2-0.128 6.912 3.072 8.448zM813.44 609.536l28.928 7.68c3.456 0.896 6.912-1.152 7.808-4.48 0.896-3.456-1.152-6.912-4.48-7.808l-28.928-7.68c-3.456-0.896-6.912 1.152-7.808 4.48-0.896 3.456 1.024 6.912 4.48 7.808zM824.832 554.368l29.824 2.56c3.456 0.256 6.656-2.304 6.912-5.76 0.256-3.456-2.304-6.656-5.76-6.912l-29.824-2.56c-3.456-0.256-6.656 2.304-6.912 5.76-0.256 3.584 2.304 6.656 5.76 6.912zM826.624 498.176l29.824-2.56c3.456-0.256 6.144-3.456 5.76-6.912-0.256-3.456-3.456-6.144-6.912-5.76l-29.824 2.56c-3.456 0.256-6.144 3.456-5.76 6.912 0.256 3.456 3.328 6.016 6.912 5.76zM818.432 442.368l28.928-7.68c3.456-0.896 5.376-4.352 4.48-7.808-0.896-3.456-4.352-5.376-7.808-4.48l-28.928 7.68c-3.456 0.896-5.376 4.352-4.48 7.808 0.896 3.456 4.48 5.376 7.808 4.48zM800.768 388.992l27.136-12.672c3.2-1.536 4.608-5.248 3.072-8.448-1.536-3.2-5.248-4.608-8.448-3.072l-27.136 12.672c-3.2 1.536-4.608 5.248-3.072 8.448 1.536 3.072 5.248 4.48 8.448 3.072zM774.144 339.328l24.448-17.152c2.944-2.048 3.584-6.016 1.536-8.832-2.048-2.944-6.016-3.584-8.832-1.536L766.848 328.96c-2.944 2.048-3.584 6.016-1.536 8.832 1.92 2.816 5.888 3.584 8.832 1.536zM697.216 257.664l17.152-24.448c2.048-2.944 1.28-6.912-1.536-8.832-2.944-2.048-6.912-1.28-8.832 1.536l-17.152 24.448c-2.048 2.944-1.28 6.912 1.536 8.832 2.816 2.048 6.784 1.408 8.832-1.536zM658.944 192.512c-3.2-1.536-7.04-0.128-8.448 3.072l-12.672 27.136c-1.536 3.2-0.128 7.04 3.072 8.448 3.2 1.536 7.04 0.128 8.448-3.072l12.672-27.136c1.408-3.2 0-7.04-3.072-8.448zM600.192 170.496c-3.456-0.896-6.912 1.152-7.808 4.48l-7.68 28.928c-0.896 3.456 1.152 6.912 4.48 7.808 3.456 0.896 6.912-1.152 7.808-4.48l7.68-28.928c1.024-3.328-1.024-6.912-4.48-7.808zM534.912 201.6c3.456 0.256 6.656-2.304 6.912-5.76l2.56-29.824c0.256-3.456-2.304-6.656-5.76-6.912-3.456-0.256-6.656 2.304-6.912 5.76l-2.56 29.824c-0.256 3.456 2.304 6.528 5.76 6.912zM476.032 158.464c-3.456 0.256-6.144 3.456-5.76 6.912l2.56 29.824c0.256 3.456 3.456 6.144 6.912 5.76 3.456-0.256 6.144-3.456 5.76-6.912l-2.56-29.824c-0.256-3.456-3.328-6.016-6.912-5.76zM422.144 173.312c-0.896-3.456-4.352-5.376-7.808-4.48-3.456 0.896-5.376 4.352-4.48 7.808l7.68 28.928c0.896 3.456 4.352 5.376 7.808 4.48 3.456-0.896 5.376-4.352 4.48-7.808l-7.68-28.928zM376.448 219.776l-12.672-27.136c-1.536-3.2-5.248-4.608-8.448-3.072-3.2 1.536-4.608 5.248-3.072 8.448L364.8 225.28c1.536 3.2 5.248 4.608 8.448 3.072 3.2-1.536 4.608-5.376 3.2-8.576zM316.416 253.824c2.048 2.944 6.016 3.584 8.832 1.536 2.944-2.048 3.584-6.016 1.536-8.832l-17.152-24.448c-2.048-2.944-6.016-3.584-8.832-1.536-2.944 2.048-3.584 6.016-1.536 8.832l17.152 24.448z" fill="#FFFFFF" p-id="19071"></path></svg>'

function link(args) {
    args = args.join(' ').split(',');
    // 获取参数
    let url = (args[0] || '').trim(),
        title = (args[1] || '点击直达链接').trim(),
        favicon = (args[2] ? `<img src="${args[2]}" class="no-lightbox">` : defaultIcon).trim(),
        desc = (args[3] || '').trim()

    return `<a href="${url}" ${url.includes('http')?'target="_blank"':''} title="${title}" referrerPolicy="no-referrer" class="link_card"><div class="link_icon">${favicon}</div><div class="link_content"><div class="link_title">${title}</div>${desc?`<div class="link_desc">${desc}</div>`:''}</div></a>`
}

hexo.extend.tag.register('link', link, { ends: false })
  • 创建 [blogRoot]/themes/butterfly/source/css/_tags/link.styl 样式文件，并新增以下内容
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
42
.link_card
  display: flex
  margin: 10px 0
  color: var(--font-color) !important
  text-decoration: none !important
  background: var(--icat-background)
  border-radius: 8px
  border: var(--style-border)
  padding: 12px
  &:hover
    background: var(--icat-theme)
    color: white !important
  .link_icon,.link_content
    height: 4rem
  .link_icon
    img,svg
      height: 4rem
      width: 4rem
      border-radius: 6px !important
  .link_content
    margin-left: 1rem
    width: calc(100% - 6rem)
    overflow: hidden
    line-height: 1.5
    display: flex
    flex-direction: column
    justify-content: center
    .link_title
      font-weight: bold
      font-size: 1.2rem
    .link_title,.link_desc
      word-break: break-all
      overflow:hidden
      text-overflow: ellipsis
    &:not(:has(.link_desc)) .link_title
      display:-webkit-box
      -webkit-box-orient:vertical
      -webkit-line-clamp:2
    .link_desc
      opacity: .6
    .link_desc,&:has(.link_desc) .link_title
      white-space: nowrap

使用参数

1
2
3
4
5
6
7
8
9
10
11
<!-- 使用html是为了高亮代码，不必在意 -->
<!-- 参数如下： -->
{% link 链接,标题,图标,介绍 %}
<!-- 示例如下： -->
{% link https://meuicat.com/,MeuiCat,https://meuicat.com/media/favicon.ico,有肉有猫有生活. %}
<!-- 你也可以什么都不填，将会全部使用默认值，如下： -->
{% card %}
<!-- 你也可以省略部分内容，如下： -->
{% link https://meuicat.com/ %}
<!-- 位置在后面的参数不填的话可以直接省略，但是如果中间的不想填必须留空，如下： -->
{% link https://meuicat.com/,,,有肉有猫有生活. %}
参数描述默认值
链接如果连接中包含http则新标签打开，否则本标签页打开无
标题网站的标题点击直达链接
图标网站favicon链接
介绍网站的description无

个性定位欢迎语

Butterfly的魔改教程：个性定位信息
来给你的侧边栏添加个性定位信息吧

Ai文章摘要

让你的博客网站接入 TianliGPT ，使用基于 GPT-3.5 的文字摘要生成工具自动生成文章摘要
你只需要在博客中引入TianliGPT的服务支持，同时填写相应的参数即可

什么是TianliGPT

TianliGPT 是一个基于 GPT-3.5 的文字摘要生成工具
你可以将需要提取摘要的文本内容发送给TianliGPT，稍等一会他就可以给你发送一个基于这段文本内容的摘要

部署TianliGPT

  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 和 bottom 分别引入 tianli_gpt.css 和 Key tianli_gpt.js
1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
  	- <link rel="stylesheet" href="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.9/tianli_gpt.css"> # Ai摘要 - 样式
  bottom:
  	- <script>let tianliGPT_postSelector = '\#post \#article-container';let tianliGPT_key = '你购买的Key';</script> # Ai摘要 - Key验证
	  - <script src="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.9/tianli_gpt.js"></script>  # Ai摘要 - 逻辑JS

 ···

Key购买

前往 张洪Heo 的 爱发电主页中购买，原价10元5万字符（Heo限量限时折扣9元）
请求过的内容再次请求不会消耗Key，可以无限期使用

购买完成后，添加机器人客服：2102916311，回复 /chat 你的key 你的博客地址注意保留最后的斜杠

1
2
3
例如：

/chat SICx6u******P64118hI https://meuicat.com/
直接请求openai：GPT-3.5部署时本地构建请求：HeoGPT使用专业的文章摘要生成AI：TianliGPT
扣费方式每次请求均需要费用，发送请求扣费，收到GPT发来的内容扣费在构建时支付费用，发送请求扣费，收到GPT发来的内容扣费✓ 部署后，在首次请求时支付费用，重复访问不扣费，key无余额后已生成的内容仍可用。发送请求扣费，收到的内容不扣费
请求速度要求中转服务器符合严苛的网络环境要求本地符合严苛的网络环境✓ 适用于全球任何国家
合规无无（需要额外人工审核）✓ 适用于中国大陆法规
防止恶意扣费容易被恶意盗刷，会扣除信用卡✓ 安全✓ 安全，key与网站绑定保证安全性，余额使用完后，已生成过的文章仍然可用，新文章业务停止
构建时间✓ 即时因为请求速度限制，首次部署需要消耗大量的时间✓ 即时，将生成时间分摊到用户访问网站中，全程无感知。让博客文章很多的博主也能轻松接入
文章更新✓ 可同步文章更新每次更新文章内容需要手动标记✓ 可同步文章更新
费用需要绑定国外信用卡，成本不可控，按照tocken双向计费需要绑定国外信用卡，成本不可控，按照tocken双向计费✓ 爱发电购买key，成本可控，按照字符单向计费
  • 查询余额 - 向机器人客服再次发送绑定时的内容，会返回你剩余的tocken额度
1
2
3
例如：

/chat SICx6u******P64118hI https://meuicat.com/

高级技巧

指定文章页面使用Ai

当主题存在其他页面和文章页面结构相同时，可以通过通配符url域名来实现只在指定域名中执行

例如：let tianliGPT_postURL = '*/blog/*';

只会在地址含有 /blog/ 的域名中执行（如：https://meuicat.com/blog/6/），避免非文章页面添加

  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入的 Key 进行修改
1
2
3
4
5
6
inject:
  head:
    - ···
  bottom:
    - ···
    - <script>let tianliGPT_postURL = '*/blog/*'; let tianliGPT_postSelector = '\#post \#article-container';let tianliGPT_key = '你购买的Key';</script> # Ai摘要 - Key验证

提交字数限制

⚠️危险：更改此变量损失已消耗过的key，因为你提交的内容发生了变化

可以设置提交的字数限制，默认为1000字
这意味着每个文章最多消耗你1000字符 （因为只有提交扣费，生成文本不扣费）
你可以降低字符数来让扣费变得更少，也可以增加字符数让文章变得更准确
上限为5000，超过5000字符将被截断

例如：let tianliGPT_wordLimit = 1000;

  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入的 Key 进行修改
1
2
3
4
5
6
inject:
  head:
    - ···
  bottom:
    - ···
    - <script>let tianliGPT_wordLimit = 1000; let tianliGPT_postSelector = '\#post \#article-container';let tianliGPT_key = '你购买的Key';</script> # Ai摘要 - Key验证

指定特定的文章使用Ai

如若只想在特定的文章只用Ai摘要，即不需要在 _config.butterfly.yml 主题配置文件中引入 CSS 和 JS
只需在文章页内容前加入以下内容即可

1
2
3
4
5
6
<link rel="stylesheet" href="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.7/tianli_gpt.css">
<script>
let tianliGPT_postSelector = '\#post \#article-container';
let tianliGPT_key = '你购买的Key';
</script>
<script src="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.7/tianli_gpt.js"></script>

本节技术支持

张洪Heo
如何让博客支持AI摘要，使用TianliGPT自动生成文章的AI摘要
GitHub
Post-Abstract-AI - 项目仓库

文章meta显示位置

给文章添加一个位置显示

创建数据

  • 新增 [blogRoot]/themes/butterfly/layout/includes/header/post-info.pug 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
          ···
          else
            - let data_type_update = theme.post_meta.post.date_type === 'updated'
            - let date_type = data_type_update ? 'updated' : 'date'
            - let date_icon = data_type_update ? 'fas fa-history' :'iconfont icat-calendar'
            - let date_title = data_type_update ? _p('post.updated') : _p('post.created')
            i.fa-fw.post-meta-icon(class=date_icon)
            span.post-meta-label= date_title
            time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format)
+        span.post-meta-Publish-Location
+          span.post-meta-separator |
+          i.iconfont.icat-publish-location
+          span= page.publish_location || _p('未知')
      if (theme.post_meta.post.categories && page.categories.data.length > 0)
        span.post-meta-categories
          if (theme.post_meta.post.date_type)
        ···

使用方式

  • Post Front-matter 内加 publish_location 项
1
2
3
4
5
6
7
---
···

publish_location: 上海
---

<!-- 文章内容 -->

文章meta显示调整

PE端顶部文章meta居中显示，并调整添加位置后meta重新排序

  • 修改 [blogRoot]/themes/butterfly/layout/includes/header/post-info.pug 页面内容
    （ + 号直接删除 即是正常缩进）
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
        ···
        span.post-meta-Publish-Location
          span.post-meta-separator |
          i.iconfont.icat-publish-location
          span= page.publish_location || _p('未知')
-     if (theme.post_meta.post.categories && page.categories.data.length > 0)
-       span.post-meta-categories
-         if (theme.post_meta.post.date_type)
-           span.post-meta-separator |
-
-         each item, index in page.categories.data
-           i.iconfont.icat-categories.fa-fw.post-meta-icon
-           a(href=url_for(item.path)).post-meta-categories #[=item.name]
-           if (index < page.categories.data.length - 1)
-             i.fas.fa-angle-right.post-meta-separator

    .meta-secondline
+      if (theme.post_meta.post.categories && page.categories.data.length > 0)
+        span.post-meta-categories
+          if (theme.post_meta.post.date_type)
+
+          each item, index in page.categories.data
+            i.iconfont.icat-categories.fa-fw.post-meta-icon
+            a(href=url_for(item.path)).post-meta-categories #[=item.name]
+            if (index < page.categories.data.length - 1)
+              i.fas.fa-angle-right.post-meta-separator
      - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
      if (postWordcount)
        span.post-meta-separator |
        span.post-meta-wordcount
          if theme.wordcount.post_wordcount
          ···
  • 修改 [blogRoot]/themes/butterfly/source/css/_layout/head.styl 样式内容
    （ + 号直接删除 即是正常缩进）
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
  ···
  #post-info
    position: absolute
    bottom: 100px
    padding: 0 8%
    width: 100%
    text-align: center

    +maxWidth900()
      bottom: 30px
-     text-align: left

  ···

  #post-meta
    color: var(--light-grey)
    font-size: 95%

-   +minWidth768()
-     > .meta-secondline
-       > span:first-child
-         display: none

    +maxWidth768()
      font-size: 90%

      > .meta-firstline,
      > .meta-secondline
-       display: inline
+        display: -webkit-inline-box

    .post-meta
      &-separator
-       margin: 0 5px
+        margin: 0 3px
+        padding-left: 5px
  ···

meta去除类文字

只想显示图标和数值，多余的文字就删了，看起来简洁

  • 修改 [blogRoot]/themes/butterfly/layout/includes/header/post-info.pug 页面内容
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
- let comments = theme.comments
#post-info
  h1.post-title= page.title || _p('no_title')
    if theme.post_edit.enable
      a.post-edit-link(href=theme.post_edit.url + page.source title=_p('post.edit') target="_blank")
        i.fas.fa-pencil-alt
        
  #post-meta
    .meta-firstline
      if (theme.post_meta.post.date_type)
        span.post-meta-date
          if (theme.post_meta.post.date_type === 'both')
            i.iconfont.icat-calendar.fa-fw.post-meta-icon
-            span.post-meta-label= _p('post.created')
            time.post-meta-date-created(datetime=date_xml(page.date) title=_p('post.created') + ' ' + full_date(page.date))=date(page.date, config.date_format)
            span.post-meta-separator |
            i.fas.fa-history.fa-fw.post-meta-icon
            span.post-meta-label= _p('post.updated')
            time.post-meta-date-updated(datetime=date_xml(page.updated) title=_p('post.updated') + ' ' + full_date(page.updated))=date(page.updated, config.date_format)
          else
            - let data_type_update = theme.post_meta.post.date_type === 'updated'
            - let date_type = data_type_update ? 'updated' : 'date'
            - let date_icon = data_type_update ? 'fas fa-history' :'iconfont icat-calendar'
            - let date_title = data_type_update ? _p('post.updated') : _p('post.created')
            i.fa-fw.post-meta-icon(class=date_icon)
-            span.post-meta-label= date_title
            time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format)
        span.post-meta-Publish-Location
          span.post-meta-separator |
          i.iconfont.icat-publish-location
          span= page.publish_location || _p('未知')

    .meta-secondline
      if (theme.post_meta.post.categories && page.categories.data.length > 0)
        span.post-meta-categories
          if (theme.post_meta.post.date_type)

          each item, index in page.categories.data
            i.iconfont.icat-categories.fa-fw.post-meta-icon
            a(href=url_for(item.path)).post-meta-categories #[=item.name]
            if (index < page.categories.data.length - 1)
              i.fas.fa-angle-right.post-meta-separator
      - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
      if (postWordcount)
        span.post-meta-separator |
        span.post-meta-wordcount
          if theme.wordcount.post_wordcount
            i.far.fa-file-word.fa-fw.post-meta-icon
-            span.post-meta-label= _p('post.wordcount') + ':'
            span.word-count= wordcount(page.content)
            if theme.wordcount.min2read
              span.post-meta-separator |
          if theme.wordcount.min2read
            i.far.fa-clock.fa-fw.post-meta-icon
-            span.post-meta-label= _p('post.min2read') + ':'
            span= min2read(page.content, {cn: 350, en: 160}) + _p('post.min2read_unit')
    
      //- for pv and count
      mixin pvBlock(parent_id,parent_class,parent_title)
        span.post-meta-separator |
        span(class=parent_class id=parent_id data-flag-title=page.title)
          i.far.fa-eye.fa-fw.post-meta-icon
          span.post-meta-label=_p('post.page_pv') + ':'
          if block
            block

      - const commentUse = comments.use
      if page.comments !== false && commentUse && !comments.lazyload
        if commentUse[0] === 'Valine' && theme.valine.visitor
          +pvBlock(url_for(page.path),'leancloud_visitors',page.title)
            span.leancloud-visitors-count
              i.fa-solid.fa-spinner.fa-spin
        else if commentUse[0] === 'Waline' && theme.waline.pageview
          +pvBlock('','','')
            span.waline-pageview-count(data-path=url_for(page.path))
              i.fa-solid.fa-spinner.fa-spin
        else if commentUse[0] === 'Twikoo' && theme.twikoo.visitor
          +pvBlock('','','')
            span#twikoo_visitors
              i.fa-solid.fa-spinner.fa-spin
        else if commentUse[0] === 'Artalk' && theme.artalk.visitor
          +pvBlock('','','')
            span#ArtalkPV
              i.fa-solid.fa-spinner.fa-spin
        else if theme.busuanzi.page_pv
          +pvBlock('','post-meta-pv-cv','')
            span#busuanzi_value_page_pv
              i.fa-solid.fa-spinner.fa-spin
      else if theme.busuanzi.page_pv
        +pvBlock('','post-meta-pv-cv','')
          span#busuanzi_value_page_pv
            i.fa-solid.fa-spinner.fa-spin

      if comments.count && !comments.lazyload && page.comments !== false && comments.use
        - var whichCount = comments.use[0]

        mixin countBlock
          span.post-meta-separator |
          span.post-meta-commentcount
            i.iconfont.icat-message.fa-fw.post-meta-icon
            span.post-meta-label= _p('post.comments') + ':'
            if block
              block
        
        case whichCount
          when 'Disqus'
            +countBlock
              span.disqus-comment-count
                a(href=full_url_for(page.path) + '#disqus_thread')
                  i.fa-solid.fa-spinner.fa-spin
          when 'Disqusjs'
            +countBlock
              a(href=full_url_for(page.path) + '#disqusjs')
                span.disqus-comment-count(data-disqus-url=full_url_for(page.path))
                  i.fa-solid.fa-spinner.fa-spin
          when 'Valine'
            +countBlock
              a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
                span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount")
                  i.fa-solid.fa-spinner.fa-spin
          when 'Waline'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
                span.waline-comment-count(data-path=url_for(page.path))
                  i.fa-solid.fa-spinner.fa-spin
          when 'Gitalk'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
                span.gitalk-comment-count
                  i.fa-solid.fa-spinner.fa-spin
          when 'Twikoo'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
                span#twikoo-count
                  i.fa-solid.fa-spinner.fa-spin
          when 'Facebook Comments'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
                span.fb-comments-count(data-href=urlNoIndex())
          when 'Remark42'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
                span.remark42__counter(data-url=urlNoIndex())
                  i.fa-solid.fa-spinner.fa-spin
          when 'Artalk'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
                span.artalk-count
                  i.fa-solid.fa-spinner.fa-spin
  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#post-info #post-meta .post-meta-separator {
  margin: 0 6px;
  padding-left: 0;
}
#post-meta .meta-firstline * > i,
#post-meta .meta-secondline * > i{
  margin-right: 6px !important;
}
@media screen and (max-width: 768px) {
  #page-header #post-info {
      bottom: 100px;
  }
}

/* meta样式调整 */

右键菜单

在本站PC端自行右键体验

创建数据

  • 创建 [blogRoot]/themes/butterfly/layout/includes/rightmenu.pug 页面文件，并新增以下内容
    （注意该内容中 fontawesome 图标 需要自行替换）
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
#rightMenu.js-pjax
    .rightMenu-group.rightMenu-small
        a.rightMenu-item(href="javascript:window.history.back();")
            i.iconfont.icat-angle-left
        a.rightMenu-item(href="javascript:window.history.forward();")
            i.iconfont.icat-angle-right
        a.rightMenu-item(href="javascript:window.location.reload();")
            i.iconfont.icat-refresh
        a.rightMenu-item(href="javascript:rmf.switchDarkMode();")
            i.iconfont.icat-changing-over
    .rightMenu-group.rightMenu-line.hide#menu-text
        a.rightMenu-item(href="javascript:rmf.copySelect();")
            i.iconfont.icat-copy-paste
            span='复制'
        a.rightMenu-item(href="javascript:window.open(\"https://www.baidu.com/s?wd=\"+window.getSelection().toString());window.location.reload();")
            i.iconfont.icat-baidu
            span='百度搜索'
    .rightMenu-group.rightMenu-line.hide#menu-too
        a.rightMenu-item(href="javascript:window.open(window.getSelection().toString());window.location.reload();")
            i.iconfont.icat-jump-link
            span='转到链接'
    .rightMenu-group.rightMenu-line.hide#menu-paste
        a.rightMenu-item(href='javascript:rmf.paste()')
            i.iconfont.icat-copy-paste
            span='粘贴'
    .rightMenu-group.rightMenu-line.hide#menu-post
        if is_post()||is_page()
            a.rightMenu-item(href="javascript:rmf.switchReadMode();")
                i.iconfont.icat-read
                span='阅读模式'
        a.rightMenu-item(href="javascript:rmf.copyWordsLink()")
            i.iconfont.icat-copy-paste
            span='复制本文地址'
    .rightMenu-group.rightMenu-line.hide#menu-to
        a.rightMenu-item(href="javascript:rmf.openWithNewTab()")
            i.iconfont.icat-new-window
            span='新窗口打开'
        a.rightMenu-item#menu-too(href="javascript:rmf.open()")
            i.iconfont.icat-jump-link
            span='转到链接'
        a.rightMenu-item(href="javascript:rmf.copyLink()")
            i.iconfont.icat-copy-paste
            span='复制链接'
    .rightMenu-group.rightMenu-line.hide#menu-img
        a.rightMenu-item(href="javascript:rmf.saveAs()")
            i.iconfont.icat-download-save
            span='保存图片'
        a.rightMenu-item(href="javascript:rmf.openWithNewTab()")
            i.iconfont.icat-new-window
            span='在新窗口打开'
        a.rightMenu-item(href="javascript:rmf.click()")
            i.iconfont.icat-full-screen
            span='全屏显示'
        a.rightMenu-item(href="javascript:rmf.copyLink()")
            i.iconfont.icat-copy-paste
            span='复制图片链接'
    .rightMenu-group.rightMenu-line
        a.rightMenu-item(href="javascript:toRandomPost()")
            i.iconfont.icat-random
            span='随便逛逛'
        a.rightMenu-item(href="javascript:rmf.translate();")
            i.iconfont.icat-simple-complex
            span='繁简转换'
    .rightMenu-group.rightMenu-line
        a.rightMenu-item(href="javascript:pjax.loadUrl(\"/privacy/\");")
            i.iconfont.icat-conceal
            span='隐私协议'
        a.rightMenu-item(href="javascript:pjax.loadUrl(\"/cc/\");")
            i.iconfont.icat-cc
            span='版权协议'
  • 新增 [blogRoot]/themes/butterfly/layout/includes/layout.pug 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
  ···

    else
      include ./404.pug

    include ./rightside.pug
    include ./additional-js.pug
+    !=partial('includes/rightmenu',{}, {cache:true})

引入CSS

  • 新建 [blogRoot]/themes/butterfly/source/css/rightmenu.css 样式文件，并新增以下内容
    （也可以在自建的css文件里新增内容）
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
#rightMenu{
  display: none;
  position: fixed;
  width: 160px;
  height: fit-content;
  top: 10%;
  left: 10%;
  background-color: var(--icat-maskbgdeep);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transform: translateZ(0);
  border: var(--style-border);
  border-radius: 8px;
  z-index: 100;
  box-shadow: var(--icat-shadow-black);
  transition: border 0.3s;
}
#rightMenu .rightMenu-group{
  padding: 7px 6px;
}
#rightMenu .rightMenu-group:not(:nth-last-child(1)){
  border-bottom: 1px solid var(--icat-card-border);
}
#rightMenu .rightMenu-group.rightMenu-small{
  display: flex;
  justify-content: space-between;
}
#rightMenu .rightMenu-group .rightMenu-item{
  height: 30px;
  line-height: 30px;
  border-radius: 8px;
  transition: 0.3s;
  color: var(--font-color);
}
#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item{
  display: flex;
  height: 40px;
  line-height: 40px;
  padding: 0 4px;
}
#rightMenu .rightMenu-group .rightMenu-item:hover{
  background-color: var(--text-bg-hover);
}
#rightMenu .rightMenu-group .rightMenu-item i{
  display: inline-block;
  text-align: center;
  line-height: 30px;
  width: 30px;
  height: 30px;
  padding: 0 5px;
}
#rightMenu .rightMenu-group .rightMenu-item span{
  line-height: 30px;
}

#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item *{
  height: 40px;
  line-height: 40px;
}
.rightMenu-group.hide{
  display: none;
}

#rightMenu .rightMenu-group .rightMenu-item .icat-refresh,
#rightMenu .rightMenu-group .rightMenu-item .icat-changing-over,
#rightMenu .rightMenu-group .rightMenu-item .icat-simple-complex {
  font-weight: 900;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 右键样式 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 rightmenu.css
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/rightmenu.css"> # 右键菜单样式
  bottom:
    - ···

  ···

引入JS

  • 创建 [blogRoot]/themes/butterfly/source/js/rightmenu.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
function setMask(){//设置遮罩层
    if(document.getElementsByClassName("rmMask")[0]!=undefined){
        return document.getElementsByClassName("rmMask")[0];
    }
    mask = document.createElement('div');
    mask.className = "rmMask";
    mask.style.width = window.innerWidth + 'px';
    mask.style.height = window.innerHeight + 'px';
    mask.style.background = '#fff';
    mask.style.opacity = '.0';
    mask.style.position = 'fixed';
    mask.style.top = '0';
    mask.style.left = '0';
    mask.style.zIndex = 998;
    document.body.appendChild(mask);
    document.getElementById("rightMenu").style.zIndex=19198;
    return mask;
}

function insertAtCursor(myField, myValue) {

    //IE 浏览器
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
        sel.select();
    }

    //FireFox、Chrome等
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;

        // 保存滚动条
        var restoreTop = myField.scrollTop;
        myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);

        if (restoreTop > 0) {
            myField.scrollTop = restoreTop;
        }

        myField.focus();
        myField.selectionStart = startPos + myValue.length;
        myField.selectionEnd = startPos + myValue.length;
    } else {
        myField.value += myValue;
        myField.focus();
    }
}
let rmf = {};
rmf.showRightMenu = function (isTrue, x = 0, y = 0) {
    let $rightMenu = $('#rightMenu');
    $rightMenu.css('top', x + 'px').css('left', y + 'px');

    if (isTrue) {
        $rightMenu.show();
    } else {
        $rightMenu.hide();
    }
}
rmf.switchDarkMode = function () {
    const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
    if (nowMode === 'light') {
        activateDarkMode()
        saveToLocal.set('theme', 'dark', 2)
        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
    } else {
        activateLightMode()
        saveToLocal.set('theme', 'light', 2)
        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
    }
    typeof utterancesTheme === 'function' && utterancesTheme()
    typeof FB === 'object' && window.loadFBComment()
    window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
};
// 日夜模式切换
rmf.copyWordsLink = function () {
    let url = window.location.href
    let txa = document.createElement("textarea");
    txa.value = url;
    document.body.appendChild(txa)
    txa.select();
    document.execCommand("Copy");
    document.body.removeChild(txa);
    Snackbar.show({
        text: '链接复制成功！快去分享吧！',
        pos: 'bottom-center',
        showAction: false
    });
}
// 复制链接
rmf.switchReadMode = function () {
    const $body = document.body
    $body.classList.add('read-mode')
    const newEle = document.createElement('button')
    newEle.type = 'button'
    newEle.className = 'fas fa-sign-out-alt exit-readmode'
    $body.appendChild(newEle)

    function clickFn() {
        $body.classList.remove('read-mode')
        newEle.remove()
        newEle.removeEventListener('click', clickFn)
    }

    newEle.addEventListener('click', clickFn)
}
// 阅读模式

rmf.copySelect = function () {
    document.execCommand('Copy', false, null);
    //这里可以写点东西提示一下 已复制
    Snackbar.show({
        text: '复制成功！快去分享吧！',
        pos: 'bottom-center',
        showAction: false
    });
}
//复制选中文字

rmf.translate = function () {
    document.getElementById("translateLink").click();
}
// 繁简转换
rmf.searchinThisPage=()=>{
    document.body.removeChild(mask);
    document.getElementsByClassName("local-search-box--input")[0].value=window.getSelection().toString()
    document.getElementsByClassName("search")[0].click()
    var evt = document.createEvent("HTMLEvents");evt.initEvent("input", false, false);document.getElementsByClassName("local-search-box--input")[0].dispatchEvent(evt);
}
document.body.addEventListener('touchmove', function(e){
    
}, { passive: false });
function popupMenu() {
    //window.oncontextmenu=function(){return false;}
    window.oncontextmenu = function (event) {
        if(event.ctrlKey||document.body.clientWidth<900) return true;
        $('.rightMenu-group.hide').hide();
        if (document.getSelection().toString()) {
            $('#menu-text').show();
        }
        if (document.getElementById('post')) {
            $('#menu-post').show();
        } else {
            if (document.getElementById('page')) {
                $('#menu-post').show();
            }
        }
        var el = window.document.body;
        el = event.target;
        var a=/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/
        if (a.test(window.getSelection().toString())&&el.tagName!="A"){
            $('#menu-too').show()
        }
        if (el.tagName == 'A') {
            $('#menu-to').show()
            rmf.open = function () {
                if(el.href.indexOf("http://")==-1&&el.href.indexOf("https://")==-1||el.href.indexOf("yisous.xyz")!=-1){
                    pjax.loadUrl(el.href)
                }
                else{
                    location.href = el.href
                }
            }
            rmf.openWithNewTab = function () {
                window.open(el.href);
                // window.location.reload();
            }
            rmf.copyLink = function () {
                let url = el.href
                let txa = document.createElement("textarea");
                txa.value = url;
                document.body.appendChild(txa)
                txa.select();
                document.execCommand("Copy");
                document.body.removeChild(txa);
            }
        }
        if (el.tagName == 'IMG') {
            $('#menu-img').show()
            rmf.openWithNewTab = function () {
                window.open(el.src);
                // window.location.reload();
            }
            rmf.click = function () {
                el.click()
            }
            rmf.copyLink = function () {
                let url = el.src
                let txa = document.createElement("textarea");
                txa.value = url;
                document.body.appendChild(txa)
                txa.select();
                document.execCommand("Copy");
                document.body.removeChild(txa);
            }
            rmf.saveAs=function(){
                var a = document.createElement('a');
                var url = el.src;
                var filename = url.split("/")[-1];
                a.href = url;
                a.download = filename;
                a.click();
                window.URL.revokeObjectURL(url);
            }
        } else if (el.tagName == "TEXTAREA" || el.tagName == "INPUT") {
            $('#menu-paste').show();
            // rmf.paste=function(){
            //     input.addEventListener('paste', async event => {
            //         event.preventDefault();
            //         const text = await navigator.clipboard.readText();
            //         el.value+=text;
            //       });
            // }
            rmf.paste = function () {
                navigator.permissions
                    .query({
                        name: 'clipboard-read'
                    })
                    .then(result => {
                        if (result.state == 'granted' || result.state == 'prompt') {
                            //读取剪贴板
                            navigator.clipboard.readText().then(text => {
                                console.log(text)
                                insertAtCursor(el, text)
                            })
                        } else {
                            Snackbar.show({
                                text: '请允许读取剪贴板！',
                                pos: 'top-center',
                                showAction: false,
                            })
                        }
                    })
            }
        }
        let pageX = event.clientX + 10;
        let pageY = event.clientY;
        let rmWidth = $('#rightMenu').width();
        let rmHeight = $('#rightMenu').height();
        if (pageX + rmWidth > window.innerWidth) {
            pageX -= rmWidth + 10;
        }
        if (pageY + rmHeight > window.innerHeight) {
            pageY -= pageY + rmHeight - window.innerHeight;
        }
        mask=setMask();
        window.onscroll=()=>{
            rmf.showRightMenu(false);
            window.onscroll=()=>{}
            document.body.removeChild(mask);
        }
        $(".rightMenu-item").click(()=>{
            document.body.removeChild(mask);
        })
        $(window).resize(()=>{
            rmf.showRightMenu(false);
            document.body.removeChild(mask);
        })
        mask.onclick=()=>{
            document.body.removeChild(mask);
        }
        rmf.showRightMenu(true, pageY, pageX);
        return false;
    };

    window.addEventListener('click', function () {
        rmf.showRightMenu(false);
    });
}
if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    popupMenu()
}
const box = document.documentElement

function addLongtabListener(target, callback) {
    let timer = 0 // 初始化timer

    target.ontouchstart = () => {
        timer = 0 // 重置timer
        timer = setTimeout(() => {
            callback();
            timer = 0
        }, 380) // 超时器能成功执行，说明是长按
    }

    target.ontouchmove = () => {
        clearTimeout(timer) // 如果来到这里，说明是滑动
        timer = 0
    }

    target.ontouchend = () => { // 到这里如果timer有值，说明此触摸时间不足380ms，是点击
        if (timer) {
            clearTimeout(timer)
        }
    }
}

addLongtabListener(box, popupMenu)
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 rightmenu.js
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - ···
  bottom:
    - <script type="text/javascript" src="/js/rightmenu.js"></script> # 右键菜单 - 多样式JS

  ···

声明三重曲

隐私协议

  • 创建 [blogRoot]/source/privacy/index.md 页面，配置以下内容
1
2
3
4
5
6
7
8
9
---
title: 隐私政策
date: 2023-03-14 12:04:24
top_img: false
aside: false
comments: false
---

<!-- 页面内容 -->
  • 新增 [blogRoot]/source/privacy/index.md 页面内容
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<script>
    window.addEventListener('load', function() {
        icat.getIpInfo();
    });
</script>


本站非常重视用户的隐私和个人信息保护。你在使用网站时，可能会收集和使用你的相关信息；通过《隐私政策》向你说明在你访问 `meuicat.com`网站时，如何收集、使用、保存、共享和转让这些信息

## 最新更新时间

协议最新更新时间为：**2023-05-13**

### 一、在访问时如何收集和使用你的个人信息

**在访问时，收集访问信息的服务会收集不限于以下信息：**

<font color="Peru">**网络身份标识信息**</font>（浏览器UA、IP地址）

<font color="Peru">**设备信息**</font>

<font color="Peru">**浏览过程**</font>（操作方式、浏览方式与时长、性能与网络加载情况）


**在访问时，本站内置的第三方服务会通过以下或更多途径，来获取你的以下或更多信息：**

* <font color="ForestGreen">**百度统计工具**</font> 会收集你的访问信息、访问操作过程

* <font color="ForestGreen">**谷歌统计分析**</font> 会收集你的访问信息、访问操作过程

* <font color="ForestGreen">**51la统计工具**</font> 会收集你的访问信息

* <font color="ForestGreen">**灵雀应用监控平台**</font> 会收集你的访问操作过程和资源加载情况

* <font color="ForestGreen">**busuanzi统计**</font> 会收集你的访问信息

* <font color="ForestGreen">**阿里云**</font> 会收集你的访问信息

* <font color="ForestGreen">**腾讯Codesign**</font> 会收集你的访问信息

* <font color="ForestGreen">**多吉云CDN**</font> 会收集你的访问信息

* <font color="ForestGreen">**腾讯位置服务**</font> 会收集你的访问位置


**在访问时，本人仅会处于以下目的，使用你的个人信息：**

* 用于网站的优化与文章分类，用户优化文章

* 恶意访问识别，用于维护网站

* 恶意攻击排查，用于维护网站

* 网站点击情况监测，用于优化网站页面

* 网站加载情况监测，用于优化网站性能

* 用于网站搜索结果优化

* 浏览数据的展示

**第三方信息获取方将您的数据用于以下用途：**
第三方可能会用于其他目的，详情请访问对应第三方服务提供的隐私协议

**你应该知道在你访问的时候不限于以下信息会被第三方获取并使用：**
第三方部分为了抵抗攻击、使用不同节点cdn加速等需求会收集不限于以下信息

| 网络信息<div style="width:100px"> | 内容 |
| :----: | :----: |
| IP地址 | <div id="userAgentIp"></div> |
| 国家 | <div id="userAgentCountry"></div> |
| 省份 | <div id="userAgentRegion"></div> |
| 城市 | <div id="userAgentCity"></div> |
| 运营商 | <div id="userAgentIsp"></div> |

| 设备信息 | 内容 |
| :----: | :----: |
| 设备 | <div id="userAgentDevice"></div> |

> 此页面如果未能获取到信息并不代表无法读取上述信息，以实际情况为准

### 二、在评论时如何收集和使用你的个人信息

评论使用的是无登陆系统的匿名评论系统，你可以自愿填写真实的、或者虚假的信息作为你评论的展示信息。<font color="Peru">**鼓励你使用不易被人恶意识别的昵称进行评论**</font>，但是建议你填写<font color="Peru">**真实的邮箱**</font>以便收到回复（邮箱信息不会被公开）

在你评论时，会额外收集你的个人信息

#### 在评论时，本站内置的第三方服务会通过以下或更多途径，来获取你的相关信息：

* <font color="ForestGreen">**cravatar**</font> 会收集你的访问信息、评论填写的个人信息用于展示头像

#### 在访问时，本人仅会处于以下目的，收集并使用以下信息：

* 评论时会记录你的QQ帐号（如果在邮箱位置填写QQ邮箱或QQ号），方便获取你的QQ头像。如果使用QQ邮箱但不想展示QQ头像，可以填写不含QQ号的QQ邮箱。（主动，存储）

* 评论时会记录你的邮箱，当我回复后会通过邮件通知你（主动，存储，不会公开邮箱）

* 评论时会记录你的网址，用于点击头像时快速进入你的网站（主动，存储）

* 评论时会记录你的IP地址，作为反垃圾的用户判别依据（被动，存储，不会公开IP，会公开IP所在城市）

* 评论会记录你的浏览器代理，用作展示系统版本、浏览器版本方便展示你使用的设备，快速定位问题（被动，存储）

### 三、如何使用 Cookies 和本地 LocalStorage 存储

本站为实现深色模式切换，不蒜子的uv统计等功能，会在你的浏览器中进行本地存储，你可以随时清除浏览器中保存的所有 Cookies 以及 LocalStorage，不影响你的正常使用

本博客中的以下业务会在你的计算机上主动存储数据：

#### <font color="Peru">**内置服务**</font>

* 即刻短文
* 生活相册
* 我の文字瞬间
* 人生足迹
* 评论系统

#### <font color="Peru">**第三方服务**</font>

* 百度统计
* 谷歌统计
* 51la分析
* 灵雀监控
* busuanzi统计
* 多吉云CDN
* 腾讯位置服务

关于如何使用你的Cookies，请访问 [**Cookies政策**](/cookies/)
关于如何[**在 Chrome 中清除、启用和管理 Cookie**](https://support.google.com/chrome/answer/95647?co=GENIE.Platform=Desktop&hl=zh-Hans)

### 四、如何共享、转让你的个人信息
本人不会与任何公司、组织和个人共享你的隐私信息

本人不会将你的个人信息转让给任何公司、组织和个人

第三方服务的共享、转让情况详见对应服务的隐私协议

### 五、附属协议
当监测到存在恶意访问、恶意请求、恶意攻击、恶意评论的行为时，为了防止增大受害范围，可能会临时将你的ip地址及访问信息短期内添加到黑名单，短期内禁止访问

此黑名单可能被公开，并共享给其他站点（主体并非本人）使用，包括但不限于：IP地址、设备信息、地理位置
  • 创建 [blogRoot]/source/js/privacy.js 文件，并新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var icat = {
  getIpInfo: function() {
      var fetchUrl = "https://api.ooomn.com/api/ip"
      fetch(fetchUrl)
        .then(res => res.json())
        .then(json =>{
          var country = json.country;
          var ip = json.ip;
          var province = json.province;
          var city = json.city;
          var isp = json.isp;
          document.getElementById("userAgentIp").innerHTML = ip;
          document.getElementById("userAgentCountry").innerHTML = country;
          document.getElementById("userAgentRegion").innerHTML = province;
          document.getElementById("userAgentCity").innerHTML = city;
          document.getElementById("userAgentIsp").innerHTML = isp;
          var uaInfo = navigator.userAgent;
          document.getElementById("userAgentDevice").innerHTML = uaInfo;
        })
    }
}

// 获取ip

Cookies政策

  • 创建 [blogRoot]/source/cookies/index.md 页面，配置以下内容
1
2
3
4
5
6
7
8
9
---
title: Cookies
date: 2023-03-14 13:07:26
top_img: false
aside: false
comments: false
---

<!-- 页面内容 -->
  • 新增 [blogRoot]/source/cookies/index.md 页面内容
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
我使用Cookies来保持我的网站和我开发的软件的可靠性，安全性和个性化。当你接受Cookies时，这有助于通过我识别你的身份、记住你的偏好、或提供个性化用户体验来帮助我改善网站

本政策应与我的 [**隐私政策**](/privacy/) 一起阅读，该隐私政策解释了我如何使用个人信息

如果你对我使用你的个人信息或Cookies的方式有任何疑问，请通过 `meuicat_718@163.com` 与我联系

如果你想管理你的Cookies，请按照下面“如何管理Cookies”部分中的说明进行操作。


# 什么是Cookies？

Cookies是一种小型文本文件，当你访问网站时，网站可能会将这些文件放在你的计算机或设备上。Cookies会帮助网站或其他网站在你下次访问时识别你的设备。网站信标、像素或其他类似文件也可以做同样的事情。我在此政策中使用术语“Cookies”来指代以这种方式收集信息的所有文件

Cookies提供许多功能。例如，他们可以帮助我记住你喜欢深色模式还是浅色模式，分析我网站的效果

大多数网站使用Cookies来收集和保留有关其访问者的个人信息。大多数Cookies收集一般信息，例如访问者如何到达和使用我的网站，他们使用的设备，他们的互联网协议地址（IP地址），他们正在查看的页面及其大致位置（例如，我将能够认识到你正在从深圳访问我的网站）


# Cookies的目的

我将Cookies分为以下类别:

| 用途 | 说明 |
| :----: | :----: |
| 授权 | 你访问我的网站时，我可通过 Cookie 提供正确信息，为你打造个性化的体验。例如：Cookie会告知你通过搜索引擎搜索的具体内容来改善文章的标题优化关键词、或者创建更符合你搜索需求的文章内容 |
| 安全措施 | 我通过 Cookie 启用及支持安全功能，监控和防止可疑活动、欺诈性流量和违反版权协议的行为 |
| 偏好、功能和服务 | 我使用功能性Cookies来让我记住你的偏好，或保存你向我提供的有关你的喜好或其他信息 |
| 个性化广告 | 本站及所属软件没有个性化广告 |
| 网站性能、分析和研究 | 我使用这些cookie来监控网站性能。这使我能够通过快速识别和解决出现的任何问题来提供高质量的体验 |


# 我的网站上的第三方Cookies

我还在我的网站上使用属于上述类别的第三方Cookies，用于以下目的：

* 帮助我监控网站上的流量；
* 识别欺诈或非人为性流量；
* 协助市场调研；
* 改善网站功能；
* 监督我的版权协议和隐私政策的遵守情况

| 第三方服务商 | 用途 |
| :----: | :----: |
| baidu.com | 用于统计站内访问情况，进行针对性优化 |
| search.google.com | 用于站内针对性优化 |
| 51.la | 用于统计站内访问情况，进行针对性优化异常 |
| ibruce.info | busuznzi统计，用于区分访问pv数量和uv数量，在文章处展示人气 |
| lbs.qq.com | 腾讯位置服务，用于获取当前位置，展示在访客栏 |


# 如何管理Cookies？

在将Cookie放置在你的计算机或设备上之前，系统会显示一个弹出窗口，要求你同意设置这些Cookie。通过同意放置Cookies，你可以让我为你提供最佳的体验和服务。如果你愿意，你可以通过浏览器设置关闭本站的Cookie来拒绝同意放置Cookies；但是，我网站的部分功能可能无法完全或按预期运行。你有机会允许和/或拒绝使用Cookie。你可以通过访问浏览器设置随时返回到你的Cookie偏好设置以查看和/或删除它们

除了我提供的控件之外，你还可以选择在Internet浏览器中启用或禁用Cookie。大多数互联网浏览器还允许你选择是要禁用所有Cookie还是仅禁用第三方Cookie。默认情况下，大多数互联网浏览器都接受Cookie，但这可以更改。有关详细信息，请参阅Internet浏览器中的帮助菜单或设备随附的文档

以下链接提供了有关如何在所有主流浏览器中控制Cookie的说明：

* [**Google Chrome**](https://support.google.com/chrome/answer/95647?hl=en)
* [**IE**](https://support.microsoft.com/en-us/help/260971/description-of-cookies)
* [**Safari（桌面版）**](https://support.apple.com/guide/safari/manage-cookies-and-website-data-sfri11471/mac)
* [**Safari（移动版）**](https://support.apple.com/en-us/HT201265)
* [**火狐浏览器**](https://support.mozilla.org/en-US/kb/Cookies-information-websites-store-on-your-computer)
* [**Android浏览器**](http://support.google.com/ics/nexus/bin/answer.py?hl=en&answer=2425067)

如你使用其他浏览器，请参阅浏览器制造商提供的文档。
有关Cookies以及如何管理Cookies的更多信息，请访问：

[**wikipedia.org**](https://zh.wikipedia.org/wiki/Cookie) 、 [**allaboutCookies.org**](https://www.allaboutcookies.org/) 或 [**aboutCookies.org**](https://www.aboutcookies.org/)


# 更多信息

有关我数据处理的更多信息，请参阅我的隐私政策。如果你对此Cookie政策有任何疑问，请通过 `meuicat_718@163.com` 与我联系


# 对此Cookie政策的更改

我可能对此Cookie政策所做的任何更改都将发布在此页面上。如果更改很重要，我会在我的主页或应用上明确指出该政策已更新

版权协议

  • 创建 [blogRoot]/source/cc/index.md 页面，配置以下内容
1
2
3
4
5
6
7
8
9
---
title: 版权协议
date: 2023-03-14 13:27:27
top_img: false
aside: false
comments: false
---

<!-- 页面内容 -->
  • 新增 [blogRoot]/source/cc/index.md 页面内容
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
为了保持文章质量，并保持互联网的开放共享精神，保持页面流量的稳定，综合考虑下本站的所有原创文章均采用cc协议中比较严格的[署名-非商业性使用-禁止演绎 4.0 国际](https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh)标准。这篇文章主要想能够更加清楚明白的介绍本站的协议标准和要求。方便你合理的使用本站的文章

本站无广告嵌入和商业行为。违反协议的行为不仅会损害原作者的创作热情，而且会影响整个版权环境。强烈呼吁你能够在转载时遵守协议。遵守协议的行为几乎不会对你的目标产生负面影响，鼓励创作环境是每个创作者的期望


# 哪些文章适于本协议？

所有原创内容均在文章标题顶部，以及文章结尾的版权说明部分展示

原创内容的非商用转载必须为完整转载且标注出处的 `带有完整url链接` 或 `访问原文` 之类字样的超链接

作为参考资料的情况可以无需完整转载，摘录所需要的部分内容即可，但需标注出处


# 你可以做什么？

只要你遵守本页的许可，你可以自由地共享文章的内容 — 在任何媒介以任何形式复制、发行本作品。并且无需通知作者


# 你需要遵守什么样的许可？

### 署名

你必须标注内容的来源，你需要在文章开头部分（或者明显位置）标注原文章链接（建议使用超链接提升阅读体验）

### 禁止商用

本站内容免费向互联网所有用户提供，分享本站文章时禁止商业性使用、禁止在转载页面中插入广告（例如谷歌广告、百度广告）、禁止阅读的拦截行为（例如关注公众号、下载App后观看文章）

### 禁止演绎
* 分享全部内容（无修改）
你需要在文章开头部分（或者明显位置）标注原文章链接（建议使用超链接）

* 分享部分截取内容或者衍生创作
目前本站全部原创文章的衍生品禁止公开分享和分发。如有更好的修改建议，可以在对应文章下留言。如有衍生创作需求，可以在评论中联系。

* 作为参考资料截取部分内容
作为参考资料的情况可以无需完整转载，摘录所需要的部分内容即可，但需标注出处。


# 什么内容会被版权保护

**包括但不限于：**

* 文章封面图片
* 文章标题和正文
* 站点图片素材（不含主题自带素材）


# 例外情况
本着友好互相进步的原则，被本站友链收录的博客允许博客文章内容的衍生品的分享和分发，但仍需标注出处

本着互联网开放精神，你可以在博客文章下方留言要求授权博文的衍生品的分享和分发，标注你的网站地址

关于主题样式的版权信息，可以详见[Butterfly](https://github.com/jerryc127/hexo-theme-butterfly/)主题说明


# 网站源代码协议
网站源代码（仅包含css、js）的代码部分采用GPL协议

最新文章标志

原理：通过 hexo 的 api 获取所有文章，然后比较时间得到最新文章的名字，返回给pug文件比较并添加元素

  • 新增 [blogRoot]/themes/butterfly/scripts/helpers/page.js 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  ···

  return loop(menu) || defaultTitle
})

hexo.extend.helper.register('isImgOrUrl', function (path) {
  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
  if (path.indexOf('//') !== -1 || imgTestReg.test(path)) {
    return true
  }
  return false
})

+hexo.extend.helper.register('newPost', function() {
+  let name, time;
+  hexo.locals.get('posts').map((item, index) => {
+      if (index == 0) name = item.title, time = item.date
+      else if (item.date > time) { name = item.title, time = item.date }
+  });
+  return name
+})
+// 最新文章
  • 新增 [blogRoot]/themes/butterfly/layout/includes/mixins/post-ui.pug 页面第二行 和 二十二行的内容
    （ + 号直接删除 即是正常缩进）
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
mixin postUI(posts)
+  - let newTitle= newPost()
  each article , index in page.posts.data
    .recent-post-item
      -
        let link = article.link || article.path
        let title = article.title || _p('no_title')
        const position = theme.cover.position
        let leftOrRight = position === 'both'
          ? index%2 == 0 ? 'left' : 'right'
          : position === 'left' ? 'left' : 'right'
        let post_cover = article.cover
        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
      -
      if post_cover && theme.cover.index_enable
        .post_cover(class=leftOrRight)
          a(href=url_for(link) title=title)
            if article.cover_type === 'img'
              img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
            else
              div.post-bg(style=`background: ${post_cover}`)
      .recent-post-info(class=no_cover)
+        if newTitle == title
+          span(class=`newPost-${leftOrRight=='left'?'left':'right'}`) 最新文章
          p(class=`p-icat-${leftOrRight=='left'?'right':'left'}`)
        a.article-title(href=url_for(link) title=title)= title

  ···
  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
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
#recent-posts>.recent-post-item {
  position: relative;
}
.newPost-left,
.newPost-right {
  position: absolute;
  top: 12px;
  color: white;
  padding: 0 12px;
  background-color: #49b1f5;
  box-shadow: 0 8px 12px -3px rgba(73,177,245, .20);
  border-radius: 6px;
  border: var(--style-border);
  letter-spacing: 1px;
}
.newPost-left {
  left: 12px;
}
.newPost-right {
  right: 12px;
}
/* PC端样式 */
@media screen and (max-width: 768px) {
  .newPost-left,
  .newPost-right {
      top: -4px;
      padding: 0 18px;
      border-radius: 0 0 8px 8px;
  }
  .newPost-left {
    left: calc(100% / 2 - 50px);
  }
  .newPost-right {
    right: calc(100% / 2 - 50px);
  }
}
/* PE端样式 */

/* 最新文章图标样式 */
旧版本 - 已弃用

此方法是在文章标题上方显示最新文章标识

  • 新增 [blogRoot]/themes/butterfly/layout/includes/mixins/post-ui.pug 页面第二行 和 二十二行的内容
    （ + 号直接删除 即是正常缩进）
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
mixin postUI(posts)
+  - let newTitle= newPost()
  each article , index in page.posts.data
    .recent-post-item
      -
        let link = article.link || article.path
        let title = article.title || _p('no_title')
        const position = theme.cover.position
        let leftOrRight = position === 'both'
          ? index%2 == 0 ? 'left' : 'right'
          : position === 'left' ? 'left' : 'right'
        let post_cover = article.cover
        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
      -
      if post_cover && theme.cover.index_enable
        .post_cover(class=leftOrRight)
          a(href=url_for(link) title=title)
            if article.cover_type === 'img'
              img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
            else
              div.post-bg(style=`background: ${post_cover}`)
      .recent-post-info(class=no_cover)
+        if newTitle == title
+          span(class=`newPost-${leftOrRight=='left'?'right':'left'}`) 最新文章
          p(class=`p-icat-${leftOrRight=='left'?'right':'left'}`)
        a.article-title(href=url_for(link) title=title)= title

  ···
  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
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
#recent-posts>.recent-post-item {
  position: relative;
}

.newPost-left,
.newPost-right {
  color: white;
  padding: 4px 10px;
  background-color: #E60012;
  border-radius: 9px 9px 9px 9px;
  letter-spacing: 2px;
  padding-left: 13px;
}

.newPost-left {
  left: 15px;
}

.newPost-right {
  right: 15px;
}

.p-icat-left,
.p-icat-right {
margin: 8px;
}

/* 最新文章图标 */

即刻短文

Butterfly的魔改教程：即刻短文页
属于私人的叨叨池，说你想说的；多种部署方式的iCat版动静态即刻短文

友联页调整

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

效果预览

我的网上邻居们
与 数百名博主 无限进步

创建数据

  • 新增 [blogRoot]/themes/butterfly/layout/includes/page/flink.pug 里第二十三 至 五十六行的内容
    （ + 号直接删除 即是正常缩进）
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
#article-container
  .flink
    - let pageContent = page.content
    if page.flink_url
      script.
        (()=>{
          const replaceSymbol = (str) => {
            return str.replace(/[\p{P}\p{S}]/gu, "-")
          }

          let result = ""
          fetch("!{url_for(page.flink_url)}")
            .then(response => response.json())
            .then(str => {
              for(let i = 0; i < str.length; i++){
                const replaceClassName = replaceSymbol(str[i].class_name)
                const className = str[i].class_name ? `<h2 id="${replaceClassName}"><a href="#${replaceClassName}" class="headerlink" title="${str[i].class_name}"></a>${str[i].class_name}</h2>` : ""
                const classDesc = str[i].class_desc ? `<div class="flink-desc">${str[i].class_desc}</div>` : ""
                
                let listResult = ""
                const lists = str[i].link_list
                for(let j = 0; j < lists.length; j++){
+                  const hexToRgb = (hex) => {
+                    const r = parseInt(hex.slice(1, 3), 16);
+                    const g = parseInt(hex.slice(3, 5), 16);
+                    const b = parseInt(hex.slice(5, 7), 16);
+                    return `${r},${g},${b}`;
+                  };
+                  let rgbColor = hexToRgb(label_color);
+                  let label = ""
+                  if (lists[j].label) {
+                    label = `<span class="flink-item-tag" style="background-color: ${label_color}; box-shadow: 0 8px 12px -3px rgba(${rgbColor}, .20)">${lists[j].label}</span>`;
+                  }
                  listResult += `
                    <div class="flink-list-item">
+                      ${label}
                      <a href="${lists[j].link}" title="${lists[j].name}" target="_blank">
                        <div class="flink-item-icon">
                          <img class="no-lightbox" src="${lists[j].avatar}" onerror='this.onerror=null;this.src="!{url_for(theme.error_img.flink)}"' alt="${lists[j].name}" />
                        </div>
                        <div class="flink-item-name">${lists[j].name}</div> 
                        <div class="flink-item-desc" title="${lists[j].descr}">${lists[j].descr}</div>
                      </a>
                    </div>`
                }

                result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
              }

              document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
              window.lazyLoadInstance && window.lazyLoadInstance.update()
            })
        })()

    else
      if site.data.link
        - let result = ""
        each i in site.data.link
          - let className = i.class_name ? markdown(`## ${i.class_name}`) : ""
          - let classDesc = i.class_desc ? `<div class="flink-desc">${i.class_desc}</div>` : ""

          - let listResult = ""

          each j in i.link_list
+            - let label_color = j.label_color || '#0084FF'
            - 
+              const hexToRgb = (hex) => {
+                const r = parseInt(hex.slice(1, 3), 16);
+                const g = parseInt(hex.slice(3, 5), 16);
+                const b = parseInt(hex.slice(5, 7), 16);
+                return `${r},${g},${b}`;
+              };
+              const rgbColor = hexToRgb(label_color);
+              let label = ""
+              if (j.label) {
+                label = `<span class="flink-item-tag" style="background-color: ${label_color}; box-shadow: 0 8px 12px -3px rgba(${rgbColor}, .20)">${j.label}</span>`
+              }
              listResult += `
                <div class="flink-list-item">
+                  ${label}
                  <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="${url_for(theme.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>`

        - pageContent = result + pageContent
    != pageContent
  • 修改 [blogRoot]/source/about/index.md 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 友情链接
date: 2021-10-16 14:44:55
type: "link"
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 友情链接
top_title: 我的网上邻居们
top_tips: 与 数百名博主 无限进步
---

<!-- 页面内容 -->
  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
.flink-item-icon {
  margin-right: 0 !important;
  transition: .5s !important;
}
/* 头像微调 */

#article-container .flink .flink-list>.flink-list-item::before {
  content: none;
}
/* 去掉原来自带的before */

#article-container .flink .flink-list>.flink-list-item:hover {
  background-color: #49B1F5;
  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
  transition: 0.5s;
}
/* 鼠标经过改变背景 */

#article-container .flink .flink-list>.flink-list-item:hover a {
  color: white !important;
}
/* 鼠标经过改变文字颜色 */

#article-container .flink .flink-list>.flink-list-item:hover .flink-item-icon {
  width: 60px;
  margin-left: -70px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
@media screen and (max-width: 900px){
  #article-container .flink .flink-list>.flink-list-item:hover .flink-item-icon {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  #article-container .flink .flink-list>.flink-list-item:hover .flink-item-tag {
    display: none;
  }
}
/* 鼠标经过头像滚动 */

#article-container .flink .flink-list > .flink-list-item a .flink-item-icon {
  margin: 26px 21px;
  width: 66px;
  height: 66px;
  border-radius: 33px;
}
#article-container .flink .flink-list > .flink-list-item a {
  display: block;
  height: 100%;
}
#article-container .flink .flink-item-name {
  text-align: start;
  padding: 40px 12px 0;
  height: auto;
}
#article-container .flink .flink-item-desc {
  text-align: start;
  padding: 10px 12px 0;
  height: auto;
}
.flink-item-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 6px;
  color: var(--icat-white);
  z-index: 1;
  border-radius: 6px;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: 0.3s;
  font-size: 0.6rem;
  opacity: .8;
}
/* 友联推荐Tag */

/* PC端友联页样式 */

#article-container .flink > h2 {
  margin: 20px 7px 0;
}
#article-container .flink .flink-desc {
  margin: 0 7px;
  color: var(--icat-secondtext);
}
#article-container .flink .flink-list {
  padding: 10px 0 0;
}
#article-container .flink .flink-list > .flink-list-item {
  border: 1px solid var(--icat-secondbg) !important;
  background: var(--icat-card-bg);
  height: 120px;
  margin: 8px 8px;
  width: calc(100% / 4 - 16px);
}
@media screen and (max-width: 900px){
  #article-container .flink .flink-list > .flink-list-item {
    height: 110px;
  }
  #article-container .flink .flink-list > .flink-list-item {
    border: 2px solid var(--icat-secondbg) !important;
  }
  #article-container .flink .flink-list {
    padding: 10px 0 0;
  }
  #article-container .flink .flink-list > .flink-list-item {
    margin: 6px 6px;
    width: calc(50% - 12px) !important;
  }
  #article-container .flink > h2 {
    margin: 20px 12px 0;
  }
  #article-container .flink .flink-desc {
    margin: 0 12px;
  }
  #article-container .flink .flink-item-name {
    font-size: 1.1rem;
    padding: 30px 12px 0;
  }
  #article-container .flink .flink-list > .flink-list-item a .flink-item-icon {
    position: absolute;
    bottom: -30%;
    right: 0;
    float: right;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(35%,30%); 
    -moz-transform: translate(35%,30%);
    -o-transform: translate(35%,30%);
    -ms-transform: translate(35%,30%);
    transform: translate(35%,30%);
    margin-top: -12px;
    margin-left: -12px;
    border-radius: 26px;
    opacity: .2;
  }
  .flink-item-tag {
    top: 8px;
    right: 8px;
  }
}
/* PE端友联页样式 */

/* iCat新友链样式 */

友联Tag标签使用

  • 在 [blogRoot]/source/_data/likn.yml 页面配置文件的 link_list 内加 label label_color 即可
1
2
3
4
5
6
7
8
9
10
11
12
13
  ···

- class_name: 旗下网站
  class_desc: 博主搭建的那些小玩意
  link_list:
    - name: Melancholia
      link: https://github.com/yife68/Hexo-Theme-Melancholia
      avatar: https://meuicat.com/media/favicon.png
      descr: 一款纯记录写作类Hexo主题 ✍️
      label: 新品
      label_color: '#FF3842'

  ···
参数描述优先级默认值
labelTag名称选填默认关闭；如不配置此项就不显示（不需要新增配置为false，默认是关闭的），如需启用请新增配置并将 top_page 配置为 你想要的名称内容
label_colorTag背景色选填默认显示色值为：#0084FF；可新增配置项设置你需要的内容（优先级最高，但必须是 # 开头的Hex标注颜色代码）

mini友联栏

  • 新增 [blogRoot]/themes/butterfly/layout/includes/page/flink.pug 页面内容
    （ + 号直接删除 即是正常缩进）
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
42
43
44
45
46
47
48
          ···

          - result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
+
+        - let fresult = ""
+        each l in site.data.flink
+          - let className = l.class_name ? markdown(`## ${l.class_name}`) : ""
+          - let classDesc = l.class_desc ? `<div class="flink-desc">${l.class_desc}</div>` : ""
+
+          - let flistResult = ""
+
+          each k in l.flink_list
+            -
+              flistResult += `
+                <div class="flink-list-item mini">
+                  <a href="${k.link}" title="${k.name}" target="_blank">
+                    <div class="flink-item-icon">
+                      <img class="no-lightbox" src="${k.avatar}" onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt="${k.name}" />
+                    </div>
+                    <div class="flink-item-name">${k.name}</div>
+                  </a>
+                </div>`
+            -
+
+          - fresult += `${className}${classDesc} <div class="flink-list">${flistResult}</div>`
+
+        - let nresult = ""
+        each p in site.data.nlink
+          - let className = p.class_name ? markdown(`## ${p.class_name}`) : ""
+          - let classDesc = p.class_desc ? `<div class="flink-desc">${p.class_desc}</div>` : ""
+
+          - let nlistResult = ""
+
+          each o in p.nlink_list
+            -
+              nlistResult += `
+                <div class="flink-list-item fnull">
+                  <a href="${o.link}" title="${o.name}" target="_blank">
+                    <div class="flink-item-name">${o.name}</div>
+                  </a>
+                </div>`
+            -
+
+          - nresult += `${className}${classDesc} <div class="flink-list">${nlistResult}</div>`

-       - pageContent = result +pageContent
+        - pageContent = result + fresult + nresult +pageContent
    != pageContent
  • 创建 [blogroot]/source/_data/flink.yml 添加mini友联数据
1
2
3
- class_name: 友情链接
  class_desc: 一起玩耍的小伙伴们 ~
  flink_list:
  • 创建 [blogroot]/source/_data/nlink.yml 添加fnull友联数据
1
2
3
- class_name: 友情链接
  class_desc: 一起玩耍的小伙伴们 ~
  nlink_list:
  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
#article-container .flink .flink-list > .flink-list-item.mini {
  height: 60px;
  width: calc(100% / 6 - 16px);
}
#article-container .flink .flink-list > .flink-list-item.fnull {
  height: 40px;
  width: auto !important;
}
#article-container .flink .flink-list > .flink-list-item.mini a .flink-item-icon {
  margin: 9px 9px;
  width: 40px;
  height: 40px;
}
#article-container .flink .flink-list>.flink-list-item.mini:hover .flink-item-icon {
  width: 40px;
  margin-left: -70px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
#article-container .flink .flink-list>.flink-list-item.mini .flink-item-name {
  padding: 21px 12px;
  font-size: 1.23em;
}
#article-container .flink .flink-list>.flink-list-item.fnull .flink-item-name {
  padding: 10px 16px;
  font-size: 1.13em;
}
@media screen and (max-width: 900px) {
  #article-container .flink .flink-list > .flink-list-item.mini {
    width: calc(100% / 3 - 12px) !important;
  }
  #article-container .flink .flink-list > .flink-list-item.mini a .flink-item-icon {
    bottom: 0;
    width: 60px;
    height: 60px;
    -webkit-transform: translate(35%,50%);
    -moz-transform: translate(35%,50%);
    -o-transform: translate(35%,50%);
    -ms-transform: translate(35%,50%);
    transform: translate(35%,50%);
    border-radius: 50%;
  }
  #article-container .flink .flink-list>.flink-list-item.mini:hover .flink-item-icon {
    bottom: -2px;
    right: 6px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  #article-container .flink .flink-list>.flink-list-item.mini .flink-item-name {
    font-size: 1.13em;
  }
  #article-container .flink .flink-list>.flink-list-item.fnull .flink-item-name {
    font-size: 1em;
  }
}
/* mini友联栏样式 */

足迹页

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

效果预览

足迹阁
人生足迹 - 那些我观赏过的艺术

创建数据

  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'collect'
+        include includes/page/collect.pug
      default
        include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/collect.pug 页面，并新增以下内容
    （样式可能需要根据自己的页面进行微调）
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
#article-icat-collect
  .icat-collect
    - let collectPageContent = page.content
    if site.data.collect
      - let result = ""
      each i in site.data.collect
        - let className = i.class_name ? `<h2 ${i.class_desc?'':'style="margin-bottom:12px"'}>${i.class_name} (${i.link_list.length})</h2>` : ""
        - let classDesc = i.class_desc ? `<div class="icat-collect-desc">${i.class_desc}</div>` : ""
        - let listResult = ""
        each j in i.link_list
          - 
            listResult += `
              <div title="${j.name}" referrerPolicy="no-referrer" class="icat-collect_box" style="${j.img?`background-image: url(${j.img})`:'background-color: var(--icat-card-bg);'}">
                  <div class="icat-collect_top">
                    <i class="${j.icon?j.icon:'fa-solid fa-film'}"></i>
                    <span>${j.premiere?j.premiere:'看过?'}</span>
                  </div>
                  <div class="icat-collect_content">
                    <span>${j.name?j.name:'未知'}</span>
                    <div>${j.score?toStar(j.score):toStar(0)}</div>
                    <p>${j.time?j.time:'时间'}</p>
                  </div>
                  <div class="icat-collect-div"><a class="icat-collect-a" href="${j.link?j.link:'链接'}"></a></div>
                </div>
              `
          -
        - result += `${className}${classDesc} <div class="icat-collect-list">${listResult}</div>`
      - collectPageContent = collectPageContent + result
    != collectPageContent
  • 新建 [blogRoot]/themes/butterfly/source/css/_page/collect.styl 样式文件，并新增以下内容
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
.icat-collect
  h2
    margin-bottom: 0
  .icat-collect-desc
    margin-bottom: 10px
  .icat-collect-list
    display: flex
    gap: 18px
    flex-wrap: wrap
    .icat-collect_box
      --w: calc(100% / 6 - 15px)
      width: var(--w)
      aspect-ratio: 3/4
      display: flex
      justify-content: space-between
      flex-direction: column
      background-position: center
      background-size: cover
      border-radius: 12px
      border: var(--style-border-always)
      box-shadow: var(--icat-shadow-border)
      position: relative
      overflow: hidden
      padding: 10px
      color: #fff
      transition: .5s
      &::after
        content: ''
        position: absolute
        height: 100%
        width: 100%
        left: 0
        top: 0
        background: rgba(0,0,0,0.3)
        z-index: 0
        transition: .5s
      &:hover
        transform: translateY(-10px)
        &::after
          background: rgba(0,0,0,0.1)
      .icat-collect_top
        display: flex
        z-index: 1
        align-items: center
        justify-content: space-between
      .icat-collect_content
        z-index: 1
        margin-top: 53%
        span
          display: block
          font-size: 18px
          font-weight: bold
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
        p
          font-size: 12px
          margin-top: -6px
          margin-bottom: 2px
          --font-color: rgba(0,0,0,0.3)

[data-theme='dark']
  .icat-collect .icat-collect-list .icat-collect_box
    color: #ddd !important
    &:hover
      transform: translateY(-10px)
      &::after
        background: rgba(0,0,0,0.2)
    &::after
      background: rgba(0,0,0,0.5)
.icat-collect .icat-collect-list
  @media screen and (max-width: 1100px)
    gap: 15px
    .icat-collect_box
      --w: calc(20% - 12px)
  @media screen and (max-width: 900px)
    gap: 16px
    .icat-collect_box
      --w: calc(25% - 12px)
  @media screen and (max-width: 768px)
    gap: 15px
    .icat-collect_box
      --w: calc(100% / 3 - 10px)
  @media screen and (max-width: 500px)
    gap: 16px
    .icat-collect_box
      --w: calc(50% - 8px)


.icat-collect-div
  position: absolute
  z-index: 1
  width: 85%
  height: 90%
.icat-collect-a
  height: 100%
  display: flex
  • 新增 [blogRoot]/themes/butterfly/scripts/helpers/page.js 页面内容，将以下内容加到最后一行处即可
    （注意该内容中部分 fontawesome 图标 需要自行替换）
1
2
3
4
5
6
7
8
9
10
  ···

hexo.extend.helper.register('toStar', function(num) {
  let tmp = ''
  for (let i = 0; i < Math.floor(num); i++) { tmp += '<i class="iconfont icat-star"></i>' } // 整数部分加 实心星星
  if (num - Math.floor(num) != 0) tmp += '<i class="iconfont icat-star-half"></i>' // 小数部分转成 半星
  for (let i = 0; i < 5 - Math.ceil(num); i++) { tmp += '<i class="iconfont icat-star-empty"></i>' } // 不够5个补 空心星星
  return tmp
})
// 足迹藏宝阁星星
  • 新建 [blogRoot]/source/_data/collect.yml 数据文件，参照以下内容进行添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- class_name: 📽️ 荧幕电影 # 电影图标
  class_desc: # 分类描述
  link_list:
    - name: 流浪地球2 # 片名
      score: 5 # 1-5星
      premiere: 三刷 # N刷
      icon: fa-solid fa-film # 左上角图标
      time: 2023/02/13 # 观影时间
      img: https://yife68.gitee.io/icat-pic/collect/film/1.webp #图片链接
      link: https://movie.douban.com/subject/35267208/ # 影片地址

    - name: 盛夏未来
      score: 5
      premiere: 已看
      icon: fa-solid fa-film
      time: 2021/08/22
      img: https://yife68.gitee.io/icat-pic/collect/film/39.webp
      link: https://movie.douban.com/subject/35158124/
  • 创建并修改 [blogRoot]/source/collect/index.md 页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 人生足迹
date: 2023-02-20 00:28:12
type: collect
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 阅历
top_title: 人生足迹
top_tips: 正在持续体验人生...
---

<!-- 页面内容 -->

使用参数

  • 在 [blogRoot]/source/_data/collect.yml 页面配置文件的 link_list 内配置即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  ···

- class_name: 📽️ 荧幕电影 # 电影图标
  class_desc: # 分类描述
  link_list:
    - name: 流浪地球2 # 片名
      score: 5 # 1-5星
      premiere: 三刷 # N刷
      icon: fa-solid fa-film # 左上角图标
      time: 2023/02/13 # 观影时间
      img: https://yife68.gitee.io/icat-pic/collect/film/1.webp #图片链接
      link: https://movie.douban.com/subject/35267208/ # 影片地址

  ···
参数描述
name名称
score评分/打分
premiere右上角文字，随意填写
icon卡片左上角图标
time底部显示观看的时间
img卡片图片
link卡片跳转的链接

动态相册

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

Butterfly 基于Memos动态相册 参考 - Leonus
如果没有服务器可以搭建memos，可以使用iCat自用的memos服务：iCat - Memos

效果预览

生活相册
关于我 快门の色彩瞬间

创建数据

  • 创建并修改 [blogRoot]/source/photos/index.md 页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: 生活相册
date: 2023-03-14 21:47:47
type: photo
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 相册
top_title: 快门の色彩瞬间
top_tips: 活在当下 热烈且自由
comments: false
---

<!-- 页面内容 -->
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/photo.pug 页面，并新增以下内容
1
2
div.gallery-photos.page
  img(src="https://yife68.gitee.io/icat-pic/blog/loading.svg" style="margin:auto")
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'photo'
+        include includes/page/photo.pug
      default
        include includes/page/default-page.pug
  • 新建 [blogRoot]/source/css/photo.css 样式文件，并新增以下内容
    （也可以在自建的css文件里新增内容）
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
.gallery-photos {
	width:100%;
	margin-top:16px;
    text-align: center;
}
.gallery-photo {
	min-height:5rem;
	width:24.99%;
	padding:4px;
	position:relative;
}
.gallery-photo a {
	border-radius:8px;
  border: var(--style-border-always);
  box-shadow: var(--icat-shadow-border);
	display:block;
	overflow:hidden;
}
.gallery-photo img {
	display:block;
	width:100%;
	animation:fadeIn 1s;
	cursor:pointer;
	transition:all .4s ease-in-out !important;
}
.gallery-photo span.photo-title,.gallery-photo span.photo-time {
	max-width:calc(100% - 7px);
	line-height:1.8;
	position:absolute;
	left:4px;
	font-size:14px;
	background:rgba(0,0,0,0.3);
	padding:0px 8px;
	color:#fff;
	animation:fadeIn 1s;
}
.gallery-photo span.photo-title {
	bottom:4px;
	border-radius:0 8px 0 8px;
}
.gallery-photo span.photo-time {
	top:4px;
	border-radius:8px 0 8px 0;
}
.gallery-photo:hover img {
	transform:scale(1.1);
}
@media screen and (max-width:1100px) {
	.gallery-photo {
	width:33.3%;
}
}@media screen and (max-width:768px) {
	.gallery-photo {
	width:49.9%;
	padding:3px
}
/* .gallery-photo span.photo-time {
	display:none
}手机端隐藏时间显示 */
.gallery-photo span.photo-title {
	font-size:12px
}
.gallery-photo span.photo-title {
	left:3px;
	bottom:3px;
}
}@keyframes fadeIn {
	0% {
	opacity:0;
}
100% {
	opacity:1;
}
}

/* Memos动态相册样式 */
  • 创建 [blogRoot]/source/js/memos/photo.js 文件，并新增以下内容，用来处理Memos动态相册的函数
    （或写在自建的公共 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
42
43
44
45
46
47
48
49
50
51
function whenDOMReady() {
  if (location.pathname == '/photos/') photos();
}
whenDOMReady()
document.addEventListener("pjax:complete", whenDOMReady)

// 适配pjax

window.onresize = () => {
  if (location.pathname == '/photos/') waterfall('.gallery-photos');
};

// 自适应

function photos() {
  let url = '你的memos地址' // 修改api
  fetch(url + '/api/v1/memo?creatorId=用户ID&tag=相册').then(res => res.json()).then(data => {
      let html = '',
          imgs = []
      data.forEach(item => {
          let ls = item.content.match(/\!\[.*?\]\(.*?\)/g)
          if (ls) imgs = imgs.concat(ls)
          if (item.resourceList.length) {
              item.resourceList.forEach(t => {
                  if (t.externalLink) imgs.push(`![](${t.externalLink})`)
                  else imgs.push(`![](${url}/o/r/${t.id}/${t.publicId}/${t.filename})`)
              })
          }
      })

      if (imgs) imgs.forEach(item => {
          let img = item.replace(/!\[.*?\]\((.*?)\)/g, '$1'),
              time, title, tat = item.replace(/!\[(.*?)\]\(.*?\)/g, '$1')
          if (tat.indexOf(' ') != -1) {
              time = tat.split(' ')[0]
              title = tat.split(' ')[1]
          } else title = tat

          html += `<div class="gallery-photo"><a href="${img}" data-fancybox="gallery" class="fancybox" data-thumb="${img}"><img class="no-lazyload photo-img" loading='lazy' decoding="async" src="${img}"></a>`
          title ? html += `<span class="photo-title">${title}</span>` : ''
          time ? html += `<span class="photo-time">${time}</span>` : ''
          html += `</div>`
      })

      document.querySelector('.gallery-photos.page').innerHTML = html
      imgStatus.watch('.photo-img', () => { waterfall('.gallery-photos') })
      window.Lately && Lately.init({ target: '.photo-time' })
  }).catch()
}

// 函数
Memos1.4.0以上版本
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
function whenDOMReady() {
  if (location.pathname == '/photos/') photos();
}
whenDOMReady()
document.addEventListener("pjax:complete", whenDOMReady)

// 适配pjax

window.onresize = () => {
  if (location.pathname == '/photos/') waterfall('.gallery-photos');
};

// 自适应

function photos() {
  fetch('你的memos地址/api/memo?creatorId=用户ID&tag=相册').then(res => res.json()).then(data => { // 记得修改memos地址
      let html='', imgs = [];
      data.data.forEach(item => { imgs = imgs.concat(item.content.match(/\!\[.*?\]\(.*?\)/g)) });
      imgs.forEach(item => {
          let img = item.replace(/!\[.*?\]\((.*?)\)/g, '$1'),
              time, title, tat = item.replace(/!\[(.*?)\]\(.*?\)/g, '$1');
          if (tat.indexOf(' ') != -1) {
              time = tat.split(' ')[0];
              title = tat.split(' ')[1];
          } else title = tat

          html += `<div class="gallery-photo"><a href="${img}" data-fancybox="gallery" class="fancybox" data-thumb="${img}"><img class="photo-img" loading='lazy' decoding="async" src="${img}"></a>`;
          title ? html += `<span class="photo-title">${title}</span>` : '';
          time ? html += `<span class="photo-time">${time}</span>` : '';
          html += `</div>`;
      });

      document.querySelector('.gallery-photos.page').innerHTML = html
      imgStatus.watch('.photo-img', () => { waterfall('.gallery-photos'); });
      window.Lately && Lately.init({ target: '.photo-time' });
  }).catch()
}

// 函数

获取api地址
memos地址就是首页地址，如：memos.meuicat.com

  • 发送一条 公共 memos

  • 点击 探索 接着点击用户名

  • 查看URL获取ID

如url是：https://memos.meuicat.com/u/1
则creatorId就是1
最后完整链接如下：
https://memos.meuicat.com/api/memo?creatorId=1&tag=相册
能看到数据则为正确链接

  • 创建 [blogRoot]/source/js/memos/imgStatus.min.js 文件，并新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
! function() {
	this.loaded = 0, this.failed = 0, this.total = 0, this.watch = function(a, b) {
		var c = document.querySelectorAll(a);
		if (!c.length) return console.log("[imgStatus]: There aren't any images associated with this selector (" + a + ")!");
		this.total = c.length;
		for (var d = 0; d < this.total; d++) isCached(c[d].src) ? this._setLoaded(b) : c[d].addEventListener ? (c[d].addEventListener("load", this._setLoaded.bind(this, b)), c[d].addEventListener("error", this._setFailed.bind(this, b))) : (c[d].attachEvent("onload", this._setLoaded.bind(this, b)), c[d].attachEvent("onerror", this._setFailed.bind(this, b)))
	}, this.isCached = function(a) {
		var b = new Image;
		return b.src = a, b.complete
	}, this._setFailed = function(a, b) {
		++this.failed, "function" == typeof a && a(this)
	}, this._setLoaded = function(a, b) {
		++this.loaded, "function" == typeof a && a(this)
	}, this.isDone = function() {
		return this.loaded + this.failed === this.total ? !0 : !1
	}, "object" == typeof window && (window.imgStatus = this)
}();

// imgStatus.min.js
  • 创建 [blogRoot]/source/js/memos/lately.min.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
! function() {
	window.Lately = new function() {
		var t = this;
		this.lang = {
			second: "秒",
			minute: "分钟",
			hour: "小时",
			day: "天",
			month: "个月",
			year: "年",
			ago: "前",
			error: "NaN"
		};
		var e = function(e) {
			e = new Date(n(e));
			var r = new function() {
					this.second = (Date.now() - e.getTime()) / 1e3, this.minute = this.second / 60, this.hour = this.minute / 60, this.day = this.hour / 24, this.month = this.day / 30, this.year = this.month / 12
				}, i = Object.keys(r).reverse().find(function(t) {
					return r[t] >= 1
				});
			return (i ? function(t, e) {
				return Math.floor(t) + e
			}(r[i], t.lang[i]) : t.lang.error) + t.lang.ago
		}, n = function(t) {
				return t = new Date(t && ("number" == typeof t ? t : t.replace(/-/g, "/").replace("T", " "))), !isNaN(t.getTime()) && t.getTime()
			};
		return {
			init: function() {
				var r = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, i = r.target,
					a = void 0 === i ? "time" : i,
					o = r.lang;
				o && (t.lang = o);
				var u = !0,
					h = !1,
					l = void 0;
				try {
					for (var s, c = document.querySelectorAll(a)[Symbol.iterator](); !(u = (s = c.next()).done); u = !0) {
						var f = s.value,
							g = n(f.dateTime) || n(f.title) || n(f.innerHTML) || 0;
						if (!g) return;
						f.title = new Date(g).toLocaleString(), f.innerHTML = e(g)
					}
				} catch (t) {
					h = !0, l = t
				} finally {
					try {
						!u && c.
						return &&c.
						return ()
					} finally {
						if (h) throw l
					}
				}
			},
			format: e
		}
	}
}();

/*
 * Lately.min.js 2.5.2
 * MIT License - http://www.opensource.org/licenses/mit-license.php
 * https://tokinx.github.io/lately/
 */
  • 创建 [blogRoot]/source/js/memos/waterfall.min.js 文件，并新增以下内容，用来处理Memos动态相册的瀑布流
    （在上几节的即刻短文教程里添加了瀑布流的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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
function waterfall(a) {
	function b(a, b) {
		var c = window.getComputedStyle(b);
		return parseFloat(c["margin" + a]) || 0
	}

	function c(a) {
		return a + "px"
	}

	function d(a) {
		return parseFloat(a.style.top)
	}

	function e(a) {
		return parseFloat(a.style.left)
	}

	function f(a) {
		return a.clientWidth
	}

	function g(a) {
		return a.clientHeight
	}

	function h(a) {
		return d(a) + g(a) + b("Bottom", a)
	}

	function i(a) {
		return e(a) + f(a) + b("Right", a)
	}

	function j(a) {
		a = a.sort(function(a, b) {
			return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a)
		})
	}

	function k(b) {
		f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a))
	}
	"string" == typeof a && (a = document.querySelector(a));
	var l = [].map.call(a.children, function(a) {
		return a.style.position = "absolute", a
	});
	a.style.position = "relative";
	var m = [];
	l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0]));
	for (var n = 1; n < l.length; n++) {
		var o = l[n - 1],
			p = l[n],
			q = i(o) + f(p) <= f(a);
		if (!q) break;
		p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p)
	}
	for (; n < l.length; n++) {
		j(m);
		var p = l[n],
			r = m.pop();
		p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p)
	}
	j(m);
	var s = m[0];
	a.style.height = c(h(s) + b("Bottom", s));
	var t = f(a);
	window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k
}

// 瀑布流处理
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 和 bottom 分别引入 photo.css waterfall.min.js lately.min.js imgStatus.min.js photo.js
1
2
3
4
5
6
7
8
9
10
11
12
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/photo.css"> # 动态相册样式
  bottom:
    - <script type="text/javascript" src="/js/memos/waterfall.min.js"></script> # memos动态相册 - waterfall
    - <script type="text/javascript" src="/js/memos/imgStatus.min.js"></script> # memos动态相册 - imgStatus
    - <script type="text/javascript" src="/js/memos/lately.min.js"></script> # memos动态相册 - lately
    - <script type="text/javascript" src="/js/memos/photo.js"></script> # memos动态相册 - 格式链JS

  ···

使用参数

1
2
3
4
5
6
7
8
9
#相册
<!-- 写法就是markdown的写法，中括号里先写时间再写标题，中间使用空格隔开 -->
![2023-01-29 我是标题](图片链接)
<!-- 若不想要时间只写标题即可 -->
![我是标题](图片链接)
<!-- 若不想要标题只写时间即可，只不过后面需要添加空格 -->
![2023-01-29 ](图片链接)
<!-- 也可以只填写图片链接 -->
![](图片链接)
  • 在 memos 内的写法
1
2
3
4
5
#相册
![2023-02-09 ](https://s1.ax1x.com/2023/03/16/pp3jQ3V.jpg)
![ 犹豫没要微信](https://s1.ax1x.com/2023/03/17/ppGlZid.jpg)
![2022-10-12 可可爱爱没有脑袋](https://s1.ax1x.com/2023/03/16/pp34dpj.jpg)
![](https://s1.ax1x.com/2023/03/15/pp39iRI.jpg)

待办清单页

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

如果没有服务器可以搭建memos，可以使用iCat自用的memos服务：iCat - Memos

效果预览

待办录
我の那些待办清单

创建数据

  • 创建 [blogRoot]/source/project/index.md 页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: 清单
date: 2023-04-20 11:56:42
type: project
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 待办
top_title: 生活清单
top_tips: 原来我有这么多想要做的事情
comments: false
---

<!-- 页面内容 -->
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'project'
+        include includes/page/project.pug
      default
        include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/project.pug 页面，并新增以下内容
1
2
3
4
#todolist
.bottom
    p Powered by 
        a(target="_blank" href="https://github.com/usememos/memos" rel="noopener external nofollow") memos
  • 新建 [blogRoot]/source/css/project.css 样式文件，并新增以下内容
    （也可以在自建的css文件里新增内容）
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
#todolist {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.list_item {
  display: inline-block;
  width: calc(33.333% - .5rem);
  background: #ffe3dd;
  border-radius: 12px;
  border: var(--style-border-always);
  box-shadow: var(--icat-shadow-border);
  padding: 10px 1rem 1.2rem;
  border: 2px dashed #f7a796;
  --todo-border: 1px solid #f7a796;
  margin-right: 1rem;
  margin-bottom: 1rem;
}
.list_item h3 {
  margin: 0;
  color: #333;
  border-bottom: var(--todo-border);
}
.list_item ul {
  font-size: 17px;
  padding: 0 !important;
  margin: 0;
}
.list_item li{
  margin: 0 !important;
  color: #333;
  border-bottom: var(--todo-border);
}
.list_item li::marker {
content: none;
}
li.achieve {
  opacity: .8;
  text-decoration: line-through;
}
.bottom {
  line-height: 1.5;
  text-align: right;
}
.bottom p {
  margin: 0 !important;
}
.bottom a {
  font-weight: 700;
  color: var(--font-color) !important;
}
[data-theme="dark"] .list_item {
  border: 2px solid var(--icat-card-border) !important;
}
@media screen and (max-width: 900px) {
  div#todolist {
    margin: 1rem 5px 0;
  }
}
@media screen and (max-width: 768px) {
  .list_item{
    width: 100%;
  }
  .bottom {
    text-align: center;
  }
}

/* Memos清单页样式 */
  • 创建 [blogRoot]/source/js/memos/project.js 文件，并新增以下内容，用来处理Memos清单的函数
    （或写在自建的公共 js 中也可以）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
todolist();
function todolist() {
    fetch('你的memos地址/api/v1/memo?creatorId=用户ID&tag=清单').then(res => res.json()).then(data => {
        // 获取并处理数据
        data.forEach(item => {
            // 处理数据
            let content = item.content,
                title = content.match(/\[(.*?)\]/g)[0].replace(/\[(.*?)\]/, '$1');
            // 去掉多余内容，替换清单内容
            content = content.replace(/#.*\s/g, '').replace(/(-\s\[\s\]\s)(.*)/g, `<li><i style="margin-right: 5px;" class="fa-regular fa-circle"></i>$2</li>`).replace(/(-\s\[x\]\s)(.*)/g, `<li class="achieve"><i style="margin-right: 5px;" class="fa-regular fa-circle-check"></i>$2</li>`);
            // 渲染数据
            let div = document.createElement('div');
            div.className = 'list_item';
            div.innerHTML = `<h3>${title}</h3><ul>${content}</ul>`;
            document.getElementById('todolist').appendChild(div);
        });
        waterfall('#todolist');
    }).catch()
}

// 清单函数
Memos1.4.0以上版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
todolist();
function todolist() {
    fetch('你的memos地址/api/memo?creatorId=用户ID&tag=清单').then(res => res.json()).then(data => { // 注意替换链接和ID
        // 获取并处理数据
        data = data.data
        let box = document.getElementById('todolist')
        data.forEach(item => {
            // 处理数据
            let content = item.content,
                title = content.match(/\[(.*?)\]/g)[0].replace(/\[(.*?)\]/,'$1');
            // 去掉多余内容，替换清单内容
            content = content.replace(/#.*\s/g, '').replace(/(-\s\[\s\]\s)(.*)/g, `<li><i style="margin-right: 5px;" class="fa-regular fa-circle"></i>$2</li>`).replace(/(-\s\[x\]\s)(.*)/g, `<li class="achieve"><i style="margin-right: 5px;" class="fa-regular fa-circle-check"></i>$2</li>`);
            // 渲染数据
            let div = document.createElement('div');
            div.className = 'list_item';
            div.innerHTML = `<h3>${title}</h3><ul>${content}</ul>`;
            box.appendChild(div);
        });
        waterfall('#todolist');
    }).catch()
}

// 清单函数

获取api地址
memos地址就是首页地址，如：memos.meuicat.com

  • 发送一条 公共 memos

  • 点击 探索 接着点击用户名

  • 查看URL获取ID

如url是：https://memos.meuicat.com/u/1
则creatorId就是1
最后完整链接如下：
https://memos.meuicat.com/api/memo?creatorId=1&tag=清单
能看到数据则为正确链接

  • 创建 [blogRoot]/source/js/memos/waterfall.min.js 文件，并新增以下内容，用来处理Memos清单页的瀑布流
    （在前几节的即刻短文和上一节的Memos动态相册教程里都有此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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
function waterfall(a) {
	function b(a, b) {
		var c = window.getComputedStyle(b);
		return parseFloat(c["margin" + a]) || 0
	}

	function c(a) {
		return a + "px"
	}

	function d(a) {
		return parseFloat(a.style.top)
	}

	function e(a) {
		return parseFloat(a.style.left)
	}

	function f(a) {
		return a.clientWidth
	}

	function g(a) {
		return a.clientHeight
	}

	function h(a) {
		return d(a) + g(a) + b("Bottom", a)
	}

	function i(a) {
		return e(a) + f(a) + b("Right", a)
	}

	function j(a) {
		a = a.sort(function(a, b) {
			return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a)
		})
	}

	function k(b) {
		f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a))
	}
	"string" == typeof a && (a = document.querySelector(a));
	var l = [].map.call(a.children, function(a) {
		return a.style.position = "absolute", a
	});
	a.style.position = "relative";
	var m = [];
	l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0]));
	for (var n = 1; n < l.length; n++) {
		var o = l[n - 1],
			p = l[n],
			q = i(o) + f(p) <= f(a);
		if (!q) break;
		p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p)
	}
	for (; n < l.length; n++) {
		j(m);
		var p = l[n],
			r = m.pop();
		p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p)
	}
	j(m);
	var s = m[0];
	a.style.height = c(h(s) + b("Bottom", s));
	var t = f(a);
	window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k
}

// 瀑布流处理
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 和 bottom 分别引入 project.css waterfall.min.js project.js
1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/project.css"> # 清单页样式
  bottom:
    - <script type="text/javascript" src="/js/memos/waterfall.min.js"></script> # memos清单页 - waterfall瀑布流
    - <script type="text/javascript" src="/js/memos/project.js"></script> # memos清单页 - 逻辑函数

  ···

使用参数

  • 在 memos 内的写法
1
2
3
#清单 [我是标题栏]
- [ ] 我是内容1
- [x] 我是内容2

注意：
前面的 #清单 是固定的
标题用中括号包起来
已完成的将括号内的空格改成 x 即可

聊天记录页面

Butterfly的魔改教程：聊天记录页
硬盘存储不了记录，聊天记录页，一个突发奇想的产物，可二改，自定性强

关于页美化

样式参考 洪佬的 可自行移步张洪Heo

效果预览

关于本站
山高路遠 看世界 也找自己.

创建数据

  • 创建 [blogRoot]/source/about/index.md 页面
1
2
3
4
5
6
7
8
9
---
title: 关于本站
date: 2021-10-16 13:42:00
type: about
top_img: false
aside: false
---

<!-- 页面内容 -->
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'about'
+        include includes/page/about.pug
      default
        include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/about.pug 页面，并新增以下内容
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
#icat-about-page
  .icat-author-box
    .icat-author-img
      img.no-lightbox(src='https://s1.ax1x.com/2023/07/07/pCc1TSO.jpg')
    .image-dot
  .icat-author-content
    .icat-author-content-item.myInfoAndSayHello
      .title-one Hey，很高兴认识你👋
      .title-two
        | 我叫
        span.inline-word  亦封
      .title-one
        | 是一名 自媒体iCat博主 & 
        span.inline-word 数控项目师
    .aboutsiteTips.icat-author-content-item
      .icat-author-content-item-tips 追求
      h2
        | 源于
        br
        | 热爱而去
        span.inline-word 体验
        .mask
          span.first-tips 旅行
          |
          span 生活
          |
          span(data-up) 设计
          |
          span(data-show) 感受

  .hello-about
    .cursor(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
    .shapes
      .shape.shape-1(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
      .shape.shape-2(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
      .shape.shape-3(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
    .content
      h1 MeuiCat

  .icat-author-content
    .icat-author-content-item.skills
      .card-content
        .icat-author-content-item-tips 技能
        span.icat-author-content-item-title 极致创造
        .skills-style-group
          .tags-group-all
            .tags-group-wrapper
              each i in site.data.creativity
                - const evenNum = i.creativity_list.filter((x, index) => index % 2 === 0);
                - const oddNum = i.creativity_list.filter((x, index) => index % 2 === 1);
                each item, index in i.creativity_list
                  if ((index+1 <= evenNum.length) && (index+1 <= oddNum.length))
                    .tags-group-icon-pair
                      .tags-group-icon(style=`background: ${evenNum[index].color}`)
                        img.no-lightbox(title=evenNum[index].name, src=evenNum[index].icon)
                      .tags-group-icon(style=`background: ${oddNum[index].color}`)
                        img.no-lightbox(title=oddNum[index].name, src=oddNum[index].icon)
          .skills-list
            each i in site.data.creativity
              each item, index in i.creativity_list
                .skill-info
                  .skill-icon(style=`background: ${item.color}`)
                    img.no-lightbox(title=item.name, src=item.icon)
                  .skill-name
                    span=item.name
            .etc ...
    .icat-author-content-item.careers
      .card-content
        .icat-author-content-item-tips 生涯
        span.icat-author-content-item-title 無限進步
        .careers-group
          .careers-item
            .circle(style='background:#357ef5')
            .name EC/DC | 电商设计师
          .careers-item
            .circle(style='background:#937df7')
            .name EC/TP | 运营规划师
          .careers-item
            .circle(style='background:#00d0e1')
            .name UGC | 自媒体IP
          .careers-item
            .circle(style='background:#ff0000')
            .name CNC/PE | 数控项目师
        img.icat-author-content-img.no-lightbox(alt='生涯', src='https://yife68.gitee.io/icat-pic/blog/2.webp')

  .icat-author-content
    .about-statistic.icat-author-content-item
      .card-content
        .icat-author-content-item-tips 数据
        span.icat-author-content-item-title 访问统计
        #statistic
        .post-tips
          | 统计信息来自
          a(href='https://user.51.la/activity/invite?cc=22L4t3', target='_blank', rel='noopener nofollow') 51la网站统计
        .icat-banner-button-group
          a.banner-button(onclick='pjax.loadUrl("/census/")', data-pjax-state)
            i.iconfont.icat-51la
            |
            span.banner-button-text 访问统计
    .icat-author-content-item-group.column.mapAndInfo
      .icat-author-content-item.map.single
        span.map-title
          | 现在住在
          b 上海 虹口
      .icat-author-content-item.selfInfo.single
        div
          span.selfInfo-title 生于
          |
          span.selfInfo-content(style='color:#43a6c6') 2002
        div
          span.selfInfo-title 星座
          |
          span.selfInfo-content(style='color:#c69043') 狮子座
        div
          span.selfInfo-title 现在职业
          |
          span.selfInfo-content(style='color:#b04fe6') 数控工程/项目师

  .icat-author-content
    .icat-author-content-item.personalities
      .icat-author-content-item-tips 性格
      span.icat-author-content-item-title 活动家
      .title-two(style='color:#56a178') ENFP-T
      .post-tips
        | 在 
        a(href='https://www.16personalities.com/', target='_blank', rel='noopener nofollow') 16Personalities 
        | 了解关于 
        a(target='_blank', rel='noopener external nofollow', href='https://www.16personalities.com/enfp-personality?utm_source=welcome-turbulent-campaigner&utm_medium=email&utm_campaign=results&utm_content=type-personality-0') 活动家 
        | 的更多信息
      .image
        img.no-lightbox(src='https://www.16personalities.com/static/images/personality-types/avatars/email/large/ENFP_male.png?v=1')
    .icat-author-content-item.myphoto
      img.icat-author-content-img.no-lightbox(alt='img', src='https://yife68.gitee.io/icat-pic/blog/6.webp')

  .icat-author-content
    .icat-author-content-item.maxim
      .icat-author-content-item-tips 座右铭
      span.maxim-title
        span(style='opacity:.6;margin-bottom:8px') 山高路遠
        |
        span 看世界 也找自己.
    .icat-author-content-item.buff
      .card-content
        .icat-author-content-item-tips 特长
        span.buff-title
          span(style='opacity:.6;margin-bottom:8px')
            | 说走就走的
            span.inline-word 追风狂魔
          |
          span
            | 各项学习能力
            span.inline-word MAX
      .card-background-icon
        i.fa-solid.fa-dice-d20

  .icat-author-content
    .icat-author-content-item.game-yuanshen
      .card-content
        .icat-author-content-item-tips 爱好游戏
        span.icat-author-content-item-title Minecraft
        .content-bottom
          .tips.game-yuanshen-uid ID: Beam_Sealed
    .icat-author-content-item.comic-content
      .card-content
        .icat-author-content-item-tips 爱好电影
        span.icat-author-content-item-title 动物世界
        .content-bottom
          .icat-banner-button-group
            a.banner-button(onclick='window.open("https://movie.douban.com/subject/26925317/")', data-pjax-state)
              i.iconfont.icat-play
              |
              span.banner-button-text 豆瓣详情

  .icat-author-content
    .icat-author-content-item.like-technology
      .card-content
        .icat-author-content-item-tips 关注偏好
        span.icat-author-content-item-title 数码科技
        .content-bottom
          .tips 手机、电脑软硬件
    .icat-author-content-item.like-music
      .card-content
        .icat-author-content-item-tips 音乐偏好
        span.icat-author-content-item-title 电子乐、Beat
        |
        span.icat-author-content-item-title 纯音乐、名谣
        .content-bottom
          .tips 跟 亦小封 一起欣赏更多音乐
        .icat-banner-button-group
          a.banner-button(onclick='window.open("https://music.163.com/#/user/home?id=542585674")', data-pjax-state)
            i.iconfont.icat-music
            |
            span.banner-button-text 更多推荐

  .icat-author-content
    .create-site-post.icat-author-content-item.single
      .icat-author-content-item-tips 心路历程
      h1 关于本站
      h3 首先，对每一位来到这里的iCat喵友们说声 "有幸遇见 很高兴认识你" 👋
      strong 创立iCat的初衷也是想着每一个人都可以像猫咪那样过的有仪式感；傲娇性随时放射；有位猫主子宠着
      br
      strong 也是想能够有一个让自己积累知识、积累兴趣的地方；是属于自己的温暖小窝；也是偌大的社会里的属于自己的内心避风港
      br
      strong 和他人分享，会让这些成为积累和沉淀。如果能够帮助到更多的人，帮助更多人解决问题，那一定是非常棒的事情
      br
      br
      strong 与大多数垂直类的技术博客不同，这里的种类会非常的繁杂，有技能的教程干货、有生活上的吐槽和想法；所以一般我研究什么、发现了什么都会分享在这里
      br
      strong 这些就是创造 <b>MueiCat</b> 的本意，也是我分享生活的方式。有幸能和你相遇在这里，相信我们能共同留下一段美好记忆
      br
      br
      h2 博客类型
      strong 本站建立于 2021年10月16日
      br
      strong
        emp
          a(target="_blank" href="https://hexo.io/zh-cn/") Hexo 
          | 强力驱动 | Theme by 
          a(target="_blank" href="https://github.com/jerryc127/hexo-theme-butterfly/") Butterfly
      br
      strong 备案： <font color="red">粤ICP备2022035648号</font> | 萌备： <font color="red">萌ICP备20227060号</font>
      br
      strong
        emp
          a(target="_blank" rel="noopener" href="/privacy/") 隐私协议 
        strong | 
          a(target="_blank" rel="noopener" href="/cookies/") Cookies政策 
        strong | 
          a(target="_blank" rel="noopener" href="/cc/") 版权协议
      br
      strong 留言等信息回复请联系 个人微信(<b>y59851</b>)、TG、邮箱或者 在评论区留言
      br
      strong
        emp
          a(target="_blank" color="red" href="/Website-History/") 查看关于更多 iCat 发展历程
      br
      h2 本站加入的博客联盟
      strong
        ul
          li 
            emp
              a(target="_blank" rel="noopener" href="https://www.foreverblog.cn/blog/4006.html") 十年之约 
            strong | 十年之约是一个记录、展示独立博客的平台，即从加入这个活动起，我们的博客10年不关闭或者更久，保持更新和活力
          li 
            emp
              a(target="_blank" rel="noopener" href="https://travellings.cn/") 开往 
            strong | 我们希望通过让友链接力下去，可以让流量流动起来，让网络变得开放。
          li 
            emp
              a(target="_blank" rel="noopener" href="https://bf.zzxworld.com/s/876") BlogFinder 
            strong | 聚合优秀的个人博客，发掘优质的个人博客文章和内容。
          li 
            emp
              a(target="_blank" rel="noopener" href="https://storeweb.cn/site/o/1674") 个性商店 
            strong | 一个精致的，带社交元素的个人网站发布平台，博客收录网站
          li 
            emp
              a(target="_blank" rel="noopener" href="https://boke.lu/icat-author/18") 博客录 
            strong | boke.lu · 博客收录展示平台
      h2 更多主页平台
      strong
        ul
          li 抖音号：y59851
          li 微信公众号：卡布是只猫 (iCat-KaBu）、奇诺是只猫 (iCat-QiNuo）、美式是只猫 (iCat-MeiShi）、小王爱吃糖
          li Telegram: 
            emp
              a(target="_blank" rel="noopener" href="https://t.me/yife68") 亦封
          li GitHub: 
            emp
              a(target="_blank" rel="noopener" href="https://github.com/yife68") 亦封
          li Gitee: 
            emp
              a(target="_blank" rel="noopener" href="https://gitee.com/yife68") 亦封
      h3 如果遇到问题可以去上方频道私信我！

  .icat-author-content
    .icat-author-content-item.single.reward
      .icat-author-content-item-tips 致谢
      span.icat-author-content-item-title 赞赏名单
      .icat-author-content-item-description 非必要无需赞助！同时也感谢赞赏的喵友，让我感受到写博客这件事情能够给你们创造了价值
        each i in site.data.reward
          - let rawData = [...i.reward_list]
          .reward-list-all
            - let reward_list_amount = i.reward_list.sort((a,b)=>b.amount -  a.amount)
            each item, index in reward_list_amount
              .reward-list-item
                .reward-list-item-name=item.name
                .reward-list-bottom-group
                  if item.amount >= 50
                    .reward-list-item-money(style='background:#ffc93e')=`¥${item.amount}`
                  else
                    .reward-list-item-money=`¥${item.amount + (item.suffix ? item.suffix : "")}`
                  .datatime.reward-list-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().slice(0, -14)
          .reward-list-updateDate
            | 更新时间：
            time.datatime.reward-list-updateDate-time(datatime=rawData[0].datatime)=new Date(rawData[0].datatime).toISOString().slice(0, -14)
      .post-reward
        #con
        #TA-con(type='button', onclick='reward()')
          #text-con
            #linght
            #TA 为TA充电
        #tube-con
          svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
            path(d='M1 77H234.226L307.006 24H790', stroke='#e5e9ef', stroke-width='20')
            path(d='M0 140H233.035L329.72 71H1028', stroke='#e5e9ef', stroke-width='20')
            path(d='M1 255H234.226L307.006 307H790', stroke='#e5e9ef', stroke-width='20')
            path(d='M0 305H233.035L329.72 375H1028', stroke='#e5e9ef', stroke-width='20')
            rect(y='186', width='236', height='24', fill='#e5e9ef')
            ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#e5e9ef')
            circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
            ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#e5e9ef')
            circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
          #mask
            svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
              path(d='M1 77H234.226L307.006 24H790', stroke='#f25d8e', stroke-width='20')
              path(d='M0 140H233.035L329.72 71H1028', stroke='#f25d8e', stroke-width='20')
              path(d='M1 255H234.226L307.006 307H790', stroke='#f25d8e', stroke-width='20')
              path(d='M0 305H233.035L329.72 375H1028', stroke='#f25d8e', stroke-width='20')
              rect(y='186', width='236', height='24', fill='#f25d8e')
              ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#f25d8e')
              circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
              ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#f25d8e')
              circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
          #orange-mask
            svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
              path(d='M1 77H234.226L307.006 24H790', stroke='#ffd52b', stroke-width='20')
              path(d='M0 140H233.035L329.72 71H1028', stroke='#ffd52b', stroke-width='20')
              path(d='M1 255H234.226L307.006 307H790', stroke='#ffd52b', stroke-width='20')
              path(d='M0 305H233.035L329.72 375H1028', stroke='#ffd52b', stroke-width='20')
              rect(y='186', width='236', height='24', fill='#ffd52b')
              ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#ffd52b')
              circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
              ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#ffd52b')
              circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
          p#people
            | <a href="https://afdian.net/a/yife68">爱发电</a>
            b ：
            | 小喵爪
script(src=url_for(theme.CDN.option.countup_js))
script(src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js")
script.
  (() => {
    function isInViewPortOfOne(el) {
      if (!el) return;
      const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      const offsetTop = el.offsetTop;
      const scrollTop = document.documentElement.scrollTop;
      const top = offsetTop - scrollTop;
      return top <= viewPortHeight;
    }
    fetch('https://v6-widget.51.la/v6/{掩码ID}/quote.js').then(res => res.text()).then((data) => {
        let title = ['最近活跃', '今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问', '总访问量']
        let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g)

        num = num.map((el) => {
          let val = el.replace(/(<\/span><span>)/g, '')
          let str = val.replace(/(<\/span><\/p>)/g, '')
          return str
        })

        let statisticEl = document.getElementById('statistic')

        // 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量
        let statistic = []
        for (let i = 0; i < num.length; i++) {
            if (!statisticEl) return
            if (i == 0 || i == num.length - 1) continue;
            statisticEl.innerHTML += '<div><span>' + title[i] + '</span><span id='+ title[i] + '>' + num[i] + '</span></div>'
            queueMicrotask(()=> {
              statistic.push(new CountUp(title[i], 0, num[i], 0, 2, {
                  useEasing: true,
                  useGrouping: true,
                  separator: ',',
                  decimal: '.',
                  prefix: '',
                  suffix: ''
              }))
            })
        }

        function statisticUP () {
          let statisticElment = document.querySelector('.about-statistic.icat-author-content-item');
          if(isInViewPortOfOne(statisticElment)) {
            for (let i = 0; i < num.length; i++) {
              if (i == 0 || i == num.length - 1) continue;
              statistic[i-1].start();
            }
            document.removeEventListener('scroll', throttleStatisticUP);
          }
        }

        const selfInfoContentYear = new CountUp('selfInfo-content-year', 0, 2002, 0, 2, {
          useEasing: true,
          useGrouping: false,
          separator: ',',
          decimal: '.',
          prefix: '',
          suffix: ''
        })

        function scrollSelfInfoContentYear() {
          let selfInfoContentYearElment = document.querySelector('.icat-author-content-item.selfInfo.single');
          if (selfInfoContentYearElment && isInViewPortOfOne(selfInfoContentYearElment)) {
            selfInfoContentYear.start()
            document.removeEventListener('scroll', throttleScrollSelfInfoContentYear);
          }
        }
        const throttleStatisticUP = btf.throttle(statisticUP, 200)
        document.addEventListener('scroll', throttleStatisticUP, {passive: true})

        const throttleScrollSelfInfoContentYear = btf.throttle(scrollSelfInfoContentYear, 200)
        document.addEventListener('scroll', throttleScrollSelfInfoContentYear, {passive: true})
    });

    var pursuitInterval = null;
      pursuitInterval = setInterval(function () {
        const show = document.querySelector('span[data-show]')
        const next = show.nextElementSibling || document.querySelector('.first-tips')
        const up = document.querySelector('span[data-up]')

        if (up) {
          up.removeAttribute('data-up')
        }

        show.removeAttribute('data-show')
        show.setAttribute('data-up', '')

        next.setAttribute('data-show', '')
      }, 2000)

      document.addEventListener('pjax:send', function(){
        clearInterval(pursuitInterval);
      });

      var helloAboutEl = document.querySelector('.hello-about')
      helloAboutEl.addEventListener("mousemove", evt => {
        const mouseX = evt.offsetX;
        const mouseY = evt.offsetY;
        gsap.set(".cursor", {
          x: mouseX,
          y: mouseY,
        })

        gsap.to(".shape", {
          x: mouseX,
          y: mouseY,
          stagger: -0.1
        })
      })
  })()
  • 创建 [blogroot]/source/_data/reward.yml 添加赞赏数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- class_name: 赞赏
  reward_list:
    - name: 🌙
      amount: 5.1
      datatime: 2023-04-30
      suffix: 喵粮
    - name: 罐装旺仔
      amount: 5
      datatime: 2022-12-11
      suffix: 小喵爪
    - name: 魏安安
      amount: 9.99
      datatime: 2022-11-07
      suffix: 喵粮
    - name: 热心
      amount: 6.66
      datatime: 2021-10-29
      suffix: 喵粮
    - name: 指南针先生
      amount: 10
      datatime: 2021-11-09
      suffix: 喵粮
  • 创建 [blogroot]/source/_data/creativity.yml 添加创造力数据
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
- class_name: 开启创造力
  creativity_list:
    - name: Vue
      color: "#b8f0ae"
      icon: https://s1.ax1x.com/2023/04/22/p9ZCMxP.png
    - name: Docker
      color: "#57b6e6"
      icon: https://s1.ax1x.com/2023/04/22/p9Z9BAH.png
    - name: Photoshop
      color: "#4082c3"
      icon: https://s1.ax1x.com/2023/04/22/p9Z9y9I.png
    - name: Node
      color: "#333"
      icon: https://s1.ax1x.com/2023/04/22/p9ZCu8I.png
    - name: AfterEffect
      color: "#989bf8"
      icon: https://s1.ax1x.com/2023/04/22/p9Z9NjK.png
    - name: Python
      color: "#fff"
      icon: https://s1.ax1x.com/2023/04/22/p9Z9fHg.png
    - name: Java
      color: "#fff"
      icon: https://s1.ax1x.com/2023/04/22/p9Z9z59.png
    - name: CSS3
      color: "#2c51db"
      icon: https://s1.ax1x.com/2023/04/22/p9Z9TCn.png
    - name: JS
      color: "#f7cb4f"
      icon: https://s1.ax1x.com/2023/04/22/p9Z9bvV.png
    - name: HTML
      color: "#e9572b"
      icon: https://s1.ax1x.com/2023/04/22/p9Z9ODU.png
    - name: Git
      color: "#df5b40"
      icon: https://s1.ax1x.com/2023/04/22/p9Z9xUJ.png
    - name: illustrator
      color: "#f29e39"
      icon: https://s1.ax1x.com/2023/04/22/p9Z94EQ.png
  • 新建 [blogroot]/themes/butterfly/source/css/_page/about/about.styl 样式文件，并新增以下内容
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
#page:has(#icat-about-page)
  border: 0
  box-shadow: none !important
  padding: 0 !important
  background: transparent !important


.icat-author-box
  position: relative
  margin: 34px 0 62px

  @media screen and (max-width: 768px)
    margin: 34px 0 44px

  .icat-author-img
    margin: auto
    border-radius: 50%
    overflow: hidden
    width: 180px
    height: 180px

    img
      border-radius: 50%
      overflow: hidden
      width: 180px
      height: 180px
      border: 6px solid var(--icat-white)

.image-dot
  width: 40px
  height: 40px
  background: #6bdf8f
  position: absolute
  border-radius: 50%
  border: 6px solid var(--icat-white)
  top: 50%
  left: 50%
  transform: translate(35px, 45px)

.icat-author-content
  display: flex
  flex-wrap: wrap
  justify-content: space-between
  width: 100%
  margin-top: 1rem

  @media screen and (max-width: 768px)
    margin-top: 0

  .icat-author-content-item
    width: 49%
    border-radius: 24px
    background: var(--icat-card-bg)
    border: var(--style-border-always)
    box-shadow: var(--icat-shadow-border)
    position: relative
    padding: 1rem 2rem
    overflow: hidden

    &:hover
      .card-background-icon
        transform: rotate(20deg)

    @media screen and (max-width: 768px)
      width: 100% !important
      margin-top: 1rem
      padding: 1rem

    .card-content
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 0
      z-index: 2
      display: flex
      flex-direction: column
      padding: 1rem 2rem

    .icat-author-content-item-tips
      opacity: .8
      font-size: .6rem
      margin-bottom: 0.5rem

    .icat-author-content-item-title
      font-size: 36px
      font-weight: 700
      line-height: 1

    .skills-style-group
      position: relative

      .skills-list
        display: flex
        opacity: 0
        transition: 0.3s
        position: absolute
        width: 100%
        top: 0
        left: 0
        flex-wrap: wrap
        flex-direction: row
        margin-top: 10px

        .skill-info
          display: flex
          align-items: center
          margin-right: 10px
          margin-top: 10px
          background: var(--icat-background)
          border-radius: 40px
          padding: 4px 12px 4px 5px
          border: var(--style-border)
          box-shadow: var(--icat-shadow-border)

          .skill-icon
            width: 32px
            height: 32px
            border-radius: 32px
            display: flex
            align-items: center
            justify-content: center
            margin-right: 10px

            img
              width: 18px
              height: 18px
              margin: 0 auto !important

        .etc
          margin-right: 10px
          margin-top: 15px
          font-weight: 900

      .tags-group-all
        display: flex
        transform: rotate(0)
        transition: 0.3s

        .tags-group-wrapper
          margin-top: 40px
          display: flex
          flex-wrap: nowrap
          animation: rowup 60s linear infinite

          @keyframes rowup
            0%
              transform: translateX(0)
            100%
              transform: translateX(-50%)

          .tags-group-icon-pair
            margin-left: 1rem

            .tags-group-icon
              display: flex
              align-items: center
              justify-content: center
              color: #fff
              font-size: 66px
              font-weight: 700
              box-shadow: var(--icat-shadow-blackdeep)
              width: 120px
              height: 120px
              border-radius: 30px

              img
                width: 60%
                margin: 0 auto !important

              &:nth-child(even)
                margin-top: 1rem
                transform: translate(-60px)

  .myInfoAndSayHello
    display: flex
    flex-direction: column
    justify-content: center
    color: var(--icat-white)
    background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%)
    background-size: 200%
    animation: gradient 15s ease infinite
    width: 59.5%

    .title-one
      opacity: 0.8
      line-height: 1.3

    .title-two
      font-size: 36px
      font-weight: 700
      line-height: 1.1
      margin: 0.5rem 0

  .aboutsiteTips
    display: flex
    justify-content: center
    align-items: flex-start
    flex-direction: column
    width: 39.5%

    h2
      margin-right: auto
      font-size: 36px
      font-family: Helvetica
      line-height: 1.06
      letter-spacing: -0.02em
      color: var(--font-color)
      margin-top: 0

      .inline-word
        word-break: keep-all
        white-space: nowrap
      
      .mask
        height: 36px
        position: relative
        overflow: hidden
        margin-top: 4px

        span
          display: block
          box-sizing: border-box
          position: absolute
          top: 36px
          padding-bottom: var(--offset)
          background-size: 100% 100%
          -webkit-background-clip: text
          background-clip: text
          -webkit-text-fill-color: transparent
          background-repeat: no-repeat
          
          &[data-show]
            transform: translateY(-100%)
            transition: 0.5s transform ease-in-out

          &[data-up]
            transform: translateY(-200%)
            transition: 0.5s transform ease-in-out

          &:nth-child(1)
            background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1)

          &:nth-child(2)
            background-image: linear-gradient(45deg, #18e198 50%, #0ec15d)

          &:nth-child(3)
            background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c)

          &:nth-child(4)
            background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f)

  .skills
    display: flex
    justify-content: center
    align-items: flex-start
    flex-direction: column
    width: 50%
    min-height: 450px

    &:hover
      .skills-style-group .tags-group-all
        opacity: 0
      .skills-style-group .skills-list
        opacity: 1

  .about-statistic
    min-height: 380px
    width: 39%
    background: url(https://yife68.gitee.io/icat-pic/blog/3.webp) no-repeat top //统计栏背景图
    background-size: cover
    color: var(--icat-white)
    overflow: hidden

    &:after
      box-shadow: 0 -159px 173px 71px #0c1c2c inset
      position: absolute
      content: ""
      width: 100%
      height: 100%
      top: 0
      left: 0

    #statistic
      font-size: 16px
      border-radius: 15px
      width: 100%
      color: var(--icat-white)
      display: flex
      justify-content: space-between
      flex-direction: row
      flex-wrap: wrap
      margin-top: 1rem
      margin-bottom: 2rem

      div
        display: flex
        justify-content: space-between
        flex-direction: column
        width: 50%
        margin-bottom: 0.5rem

        span

          &:first-child
            opacity: 0.8
            font-size: 0.6rem

          &:last-child
            font-weight: 700
            font-size: 34px
            line-height: 1
            white-space: nowrap

  .mapAndInfo
    width: 59%

  .column
    display: flex
    flex-direction: column
    justify-content: space-between

    @media screen and (max-width: 768px)
      width: 100% !important

    .map
      background: url(https://yife68.gitee.io/icat-pic/blog/4.webp) no-repeat center
      min-height: 160px
      max-height: 400px
      position: relative
      overflow: hidden
      margin-bottom: 0.5rem
      height: 60%
      background-size: 100%
      transition: 1s ease-in-out

      @media screen and (max-width: 768px)
        margin-bottom: 0

      &:hover
        background-size: 120%
        transition: 4s ease-in-out
        background-position-x: 0
        background-position-y: 22%
        .map-title
          bottom: -100%

      .map-title
        position: absolute
        bottom: 0
        left: 0
        width: 100%
        background: var(--icat-maskbg)
        padding: 0.5rem 2rem
        backdrop-filter: saturate(180%) blur(20px)
        -webkit-backdrop-filter: blur(20px)
        transition: 1s ease-in-out
        font-size: 20px
        border-radius: 0 0 24px 24px

        b
          color: var(--font-color)

    .selfInfo
      display: flex
      min-height: 100px
      max-height: 400px
      justify-content: space-between
      align-items: center
      flex-wrap: wrap
      height: -webkit-fill-available
      height: 40%

      @media screen and (max-width: 768px)
        height: 95%

      div
        display: flex
        flex-direction: column
        margin: 0.5rem 2rem 0.5rem 0

        .selfInfo-title
          opacity: 0.8
          font-size: 0.6rem
          line-height: 1
          margin-bottom: 8px

        .selfInfo-content
          font-weight: 700
          font-size: 34px
          line-height: 1

  .personalities
    position: relative
    width: 59%

    @media screen and (max-width: 768px)
      height: 170px

    .title-two
      font-size: 36px
      font-weight: 700
      line-height: 1.1

    .image
      position: absolute
      right: 30px
      top: 10px
      width: 220px
      transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02)

      @media screen and (max-width: 768px)
        width: 90px

      img
        display: block
        margin: 0 auto 20px
        max-width: 100%
        transition: filter 375ms ease-in 0.2s

    &:hover
      .image
        transform: rotate(-10deg)

  .myphoto
    height: 60%
    min-height: 240px
    position: relative
    overflow: hidden
    width: 39%
    display: flex
    align-items: center
    justify-content: center

    img
      position: absolute
      min-width: 100%
      object-fit: cover
      transition: 0.6s
      animation: coverIn 2s ease-out forwards
      transition: transform 2s ease-out !important

    &:hover
      img
        transform: scale(1.1)

  .maxim
    font-size: 36px
    font-weight: 700
    line-height: 1.1
    display: flex
    align-items: flex-start
    flex-direction: column
    justify-content: center
    width: 39%

    .maxim-title
      display: flex
      flex-direction: column

  .buff
    height: 200px
    font-size: 36px
    font-weight: 700
    line-height: 1.1
    display: flex
    align-items: flex-start
    flex-direction: column
    justify-content: center
    background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%)
    color: var(--icat-white)
    background-size: 200%
    animation: gradient 15s ease infinite
    min-height: 200px
    height: fit-content
    width: 59%

    .card-content
      display: flex
      flex-direction: column
      justify-content: center

      .buff-title
        display: flex
        flex-direction: column

    .card-background-icon
      font-size: 12rem
      opacity: 0.2
      position: absolute
      right: 0
      bottom: -40%
      transform: rotate(30deg)
      transition: 2s ease-in-out

  .game-yuanshen
    background: url(https://yife68.gitee.io/icat-pic/blog/7.webp) no-repeat top
    background-size: cover
    min-height: 300px
    overflow: hidden
    color: var(--icat-white)
    width: 59%

    &:after
      box-shadow: 0 -69px 203px 11px #575d8b inset
      position: absolute
      content: ""
      width: 100%
      height: 100%
      top: 0
      left: 0

  .comic-content
    width: 39%
    background: url(https://yife68.gitee.io/icat-pic/blog/8.webp) no-repeat top
    background-size: cover
    min-height: 300px
    overflow: hidden
    color: var(--icat-white)

    &:after
      box-shadow: 0 -48px 203px 11px #505050 inset
      position: absolute
      content: ""
      width: 100%
      height: 100%
      top: 0
      left: 0

  .like-technology
    background: url(https://yife68.gitee.io/icat-pic/blog/9.webp) no-repeat
    background-size: cover
    min-height: 230px
    color: var(--icat-white)

  .like-music
    background: url(https://yife68.gitee.io/icat-pic/blog/10.webp) no-repeat top
    background-size: cover
    min-height: 400px
    color: var(--icat-white)
    overflow: hidden

    &:after
      box-shadow: 0 -69px 203px 11px #212121 inset
      position: absolute
      content: ""
      width: 100%
      height: 100%
      top: 0
      left: 0

  .reward-list-all
    display: flex
    flex-wrap: wrap
    flex-direction: row
    margin-top: 1rem
    margin-bottom: 0.5rem
    margin-left: -0.25rem
    margin-right: -0.25rem

    .reward-list-item
      padding: 1rem
      border-radius: 12px
      border: var(--style-border-always)
      width: calc((100% / 3) - 0.5rem)
      margin: 0 0.25rem 0.5rem 0.25rem
      box-shadow: var(--icat-shadow-border)

      @media screen and (max-width: 768px)
        width: 100% !important

      .reward-list-item-name
        font-size: 1rem
        font-weight: 700
        line-height: 1
        margin-bottom: 0.5rem

      .reward-list-bottom-group
        display: flex
        align-items: center
        justify-content: space-between

      .reward-list-item-money
        padding: 4px
        background: var(--font-color)
        color: var(--card-bg)
        font-size: 12px
        line-height: 1
        border-radius: 4px
        margin-right: 4px
        white-space: nowrap

      .reward-list-item-time
        font-size: 12px
        color: var(--icat-secondtext)
        white-space: nowrap


  .post-reward
    position: absolute
    margin-top: 0px
    width: auto
    text-align: none
    pointer-events: none
    right: 2rem
    top: 2rem

    >*
      pointer-events: auto


.hello-about
  margin: 20px auto
  border-radius: 24px
  background: var(--icat-card-bg)
  border: var(--style-border-always)
  box-shadow: var(--icat-shadow-border)
  position: relative
  overflow: hidden
  user-select: none

  @media screen and (max-width: 768px)
    margin: 1rem auto 0

  .cursor
    position: absolute
    background: #2128bd
    width: 20px
    height: 20px
    margin: -10px 0 0 -10px
    border-radius: 50%
    will-change: transform
    user-select: none
    pointer-events: none
    z-index: 3

    &:selection
      color: #fff
      background: #2128bd

  .shapes
    position: relative
    height: 315px
    width: 100%
    background: #2128bd
    overflow: hidden
    border-radius: 24px
    border: var(--style-border)

    .shape 
      will-change: transform
      position: absolute
      border-radius: 50%
    
    .shape.shape-1
      background: #005ffe
      width: 650px
      height: 650px
      margin: -325px 0 0 -325px

    .shape.shape-2
      background: #ffe5e3
      width: 440px
      height: 440px
      margin: -220px 0 0 -220px

    .shape.shape-3
      background: #ffcc57
      width: 270px
      height: 270px
      margin: -135px 0 0 -135px

  .content
    top: 0
    left: 0
    position: absolute
    display: flex
    justify-content: center
    align-items: center
    height: 315px
    width: 100%
    background: #fff
    mix-blend-mode: screen
    border-radius: 24px

    h1
      font-size: 200px
      color: #000
      margin: 0
      text-align: center
      font: inherit
      vertical-align: baseline
      line-height: 1
      font-size: calc((0.0989119683 * 100vw + (58.5558852621px)))
      width: 100%
      height: 100%
      display: flex
      align-items: center
      justify-content: center

      @media (min-width: 419px)
        font-size: calc((0.0989119683 * 100vw + (58.5558852621px)))


.careers
  min-height: 400px

  .careers-group
    margin-top: 12px

    .careers-item
      display: flex
      align-items: center

      .circle
        width: 16px
        height: 16px
        margin-right: 8px
        border-radius: 16px

      .name
        color: var(--icat-secondtext)

  img
    position: absolute
    left: 0
    bottom: 20px
    width: 100%
    transition: 0.6s


.icat-banner-button-group
  position: absolute
  bottom: 1rem
  right: 2rem

  .banner-button
    height: 40px
    width: 124px
    border-radius: 20px
    box-shadow: var(--icat-shadow-border)
    justify-content: center
    background: var(--icat-card-bg)
    color: var(--font-color)
    display: flex
    align-items: center
    z-index: 1
    transition: 0.3s
    cursor: pointer

    @media screen and (max-width: 768px)
      width: 40px
      border: var(--style-border-always)
      background: var(--icat-white)
      color: var(--icat-black)

    i
      font-size: 1.15rem

      @media screen and (max-width: 768px)
        font-size: .9rem

    &:hover
      background: var(--icat-main)
      color: var(--icat-white)
      border-radius: 20px !important

    .banner-button-text
      padding: 0 6px

      @media screen and (max-width: 768px)
        display: none


.post-tips
  color: var(--icat-gray)
  font-size: 14px
  position: absolute
  bottom: 1rem
  left: 2rem

  @media screen and (max-width: 768px)
    left: auto

  a
    color: var(--icat-gray) !important
    border: none !important


.content-bottom
  margin-top: auto
  display: flex
  align-items: center
  justify-content: space-between

  .icon-group
    display: flex
    position: relative

    i
      display: inline-block
      width: 143px
      height: 18px
      margin-right: 0.5rem


.single
  width: 100% !important

#page

  .page-title
    display: none !important

[data-theme="dark"]
  .hello-about

    .content
      background: transparent

    h1
      color: var(--icat-white)

  .icat-author-content

    .map
      background: url(https://yife68.gitee.io/icat-pic/blog/5.webp) no-repeat center
      background-size: 100%
  • 新建 [blogRoot]/themes/butterfly/source/css/about.css 样式文件，并新增以下内容
    （也可以在自建的css文件里新增内容）
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
.post-reward .reward-button {
  display: inline-block;
  padding: 4px 24px;
  background: var(--btn-bg);
  color: var(--btn-color);
  cursor: pointer;
}
.post-reward:hover .reward-button {
  background: var(--btn-hover-color);
}
.post-reward:hover .reward-button>.reward-main {
  display: block;
}
.post-reward .reward-main {
  position: absolute;
  bottom: 40px;
  left: -23%;
  z-index: 100;
  display: none;
  padding: 0 0 15px;
}
.post-reward .reward-main .reward-all {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  margin: 0;
  padding: 20px 10px;
  border-radius: 4px;
  background: var(--reward-pop);
}
.post-reward .reward-main .reward-all:before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  content: '';
}
.post-reward .reward-main .reward-all:after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: 13px solid var(--reward-pop);
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
  content: '';
}
.post-reward .reward-main .reward-all .reward-item {
  display: inline-block;
  padding: 0 8px;
  list-style-type: none;
  vertical-align: top;
}
.post-reward .reward-main .reward-all .reward-item img {
  width: 130px;
  height: 130px;
}
.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
  width: 130px;
  color: #858585;
}
.author-content-item.single.reward .reward-list-updateDate {
  color: var(--icat-gray);
  font-size: 14px;
}
#console.reward-show,#console.show {
  opacity: 1;
  pointer-events: all;
}
#console.reward-show .console-mask,#console.show .console-mask {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.about-reward {
  position: absolute;
  top: 1rem;
  right: 2rem;
}
.reward #con {
  position: relative;
  width: 350px;
  height: 85px;
  border-radius: 4px;
}
.reward #TA-con {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 157px;
  height: 50px;
  border-radius: 4px;
  background-color: #f25d8e;
  box-shadow: 0 4px 4px rgba(255,112,159,.3);
  cursor: pointer;
  transform: translateY(-50%);
}
.reward #text-con {
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 100%;
}
.reward #linght {
  position: absolute;
  top: 36%;
  left: 4px;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-top: 10px solid #fff;
  border-radius: 4px;
  transform: rotate(-55deg);
}
.reward #linght::after {
  position: absolute;
  top: -13px;
  left: -11px;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-top: 10px solid #fff;
  border-radius: 4px;
  content: "";
  transform: rotate(180deg);
}
.reward #TA {
  float: right;
  color: #fff;
  font-size: 15px;
  line-height: 50px;
}
.reward #TA-con:hover {
  background-color: #ff6b9a;
}
.reward #tube-con {
  position: absolute;
  top: 15px;
  right: -5px;
  width: 157px;
  height: 55px;
}
.reward svg {
  width: 100%;
  height: 100%;
}
.reward #mask {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: all .5s;
}
.reward #mask svg {
  width: 157px;
  height: 55px;
}
.reward #TA-con:hover+#tube-con>#mask {
  width: 157px;
}
.reward #TA-con:hover+#tube-con>#orange-mask {
  animation: move1 .5s linear .2s infinite;
}
.reward #TA-con:hover+#tube-con>#orange-mask svg {
  animation: movetwo .5s linear .2s infinite;
}
.reward #orange-mask {
  position: absolute;
  top: 0;
  left: -15px;
  overflow: hidden;
  width: 18px;
  height: 100%;
}
.reward #orange-mask svg {
  position: absolute;
  top: 0;
  left: 15px;
  width: 157px;
  height: 55px;
}
@keyframes move1 {
  0% {
    left: -15px;
  }
  100% {
    left: 140px;
  }
}
@keyframes movetwo {
  0% {
    left: 15px;
  }
  100% {
    left: -140px;
  }
}
.reward #people {
  position: absolute;
  top: 4px;
  right: 10px;
  color: #aaa;
  font-size: 12px;
  font-family: "雅黑";
}
.reward #people>b {
  color: #777;
}

@media screen and (min-width:768px) and (max-width:896px) {
  .author-content-item.like-music .content-bottom .tips {
    display: none;
  }
}
@media screen and (max-width:768px) {
  .post-reward {
    display: none;
  }
  .layout>div:first-child:not(.recent-posts) {
    padding: 1rem 1rem!important;
    box-shadow: none!important;
  }
  #selfInfo-content-year {
    width: 90px;
  }
  .console-card-group-reward .reward-all .reward-item img {
    width: 130px;
    height: 130px;
  }
  .reward .about-reward #con {
    width: 170px;
  }
  .reward #tube-con {
    display: none;
  }
}
/* 响应式 */

/* 打赏充电样式 */
  • 创建 [blogRoot]/source/js/reward.js 文件，并新增以下内容，用来处理打赏弹窗
    （或写在自建的公共 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
42
43
44
45
46
47
48
49
50
function reward(){
  Swal.fire({
    title: '<strong>您正在为 <u>MeuiCat</u> 充电</strong>',
    html: '<b>请选择您的付款方式</b>',
    icon: 'info',
    showCancelButton: true,
    confirmButtonText:
      '<i class="iconfont icat-alipay"></i> 支付宝',
    cancelButtonText:
      '<i class="iconfont icat-weixin"></i> 微信支付',
    confirmButtonColor: '#1677FF',
    cancelButtonColor: '#2AAE67',
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire({
        title: '感谢您',
        html: '请打开支付宝 <b>[扫一扫]</b> 以充电',
        imageUrl: 'https://yife68.gitee.io/icat-pic-2022/03/19/alipay.jpg',
        imageWidth: 175,
        imageHeight: 175,
        imageAlt: 'Custom image'
      }).then((result) => {
        Swal.fire(
          '充电成功',
          '感谢您的支持',
          'success'
        )
      })
    } else if (
      result.dismiss === Swal.DismissReason.cancel
    ) {
      Swal.fire({
        title: '感谢您',
        html: '请打开微信 <b>[扫一扫]</b> 以充电',
        imageUrl: 'https://yife68.gitee.io/icat-pic-2022/03/19/wechat.jpg',
        imageWidth: 175,
        imageHeight: 175,
        imageAlt: 'Custom image'
      }).then((result) => {
        Swal.fire(
          '充电成功',
          '感谢您的支持',
          'success'
        )
      })
    }
  })
}

// 打赏弹窗
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 about.css reward.js sweetalert2.all.min.js
1
2
3
4
5
6
7
8
9
10
11
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/about.css"> # 关于页面 - 打赏弹窗样式
    - <script type="text/javascript" src ="/js/reward.js" ></script> # 关于页面 - 打赏充电JS
    - <script src="https://cdn1.tianli0.top/npm/sweetalert2@11.6.16/dist/sweetalert2.all.min.js"></script> # 关于页面 - 打赏弹窗逻辑
  bottom:
    - ···

  ···
  • 创建 [Blogroot]/source/js/countup.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
var CountUp = function (target, startVal, endVal, decimals, duration, options) {
    var self = this;
    self.version = function () {
      return "1.9.2";
    };
    self.options = {
      useEasing: true,
      useGrouping: true,
      separator: ",",
      decimal: ".",
      easingFn: easeOutExpo,
      formattingFn: formatNumber,
      prefix: "",
      suffix: "",
      numerals: [],
    };
    if (options && typeof options === "object") {
      for (var key in self.options) {
        if (options.hasOwnProperty(key) && options[key] !== null) {
          self.options[key] = options[key];
        }
      }
    }
    if (self.options.separator === "") {
      self.options.useGrouping = false;
    } else {
      self.options.separator = "" + self.options.separator;
    }
    var lastTime = 0;
    var vendors = ["webkit", "moz", "ms", "o"];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
      window.cancelAnimationFrame =
        window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"];
    }
    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = function (callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function () {
          callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };
    }
    if (!window.cancelAnimationFrame) {
      window.cancelAnimationFrame = function (id) {
        clearTimeout(id);
      };
    }
    function formatNumber(num) {
      num = num.toFixed(self.decimals);
      num += "";
      var x, x1, x2, x3, i, l;
      x = num.split(".");
      x1 = x[0];
      x2 = x.length > 1 ? self.options.decimal + x[1] : "";
      if (self.options.useGrouping) {
        x3 = "";
        for (i = 0, l = x1.length; i < l; ++i) {
          if (i !== 0 && i % 3 === 0) {
            x3 = self.options.separator + x3;
          }
          x3 = x1[l - i - 1] + x3;
        }
        x1 = x3;
      }
      if (self.options.numerals.length) {
        x1 = x1.replace(/[0-9]/g, function (w) {
          return self.options.numerals[+w];
        });
        x2 = x2.replace(/[0-9]/g, function (w) {
          return self.options.numerals[+w];
        });
      }
      return self.options.prefix + x1 + x2 + self.options.suffix;
    }
    function easeOutExpo(t, b, c, d) {
      return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
    }
    function ensureNumber(n) {
      return typeof n === "number" && !isNaN(n);
    }
    self.initialize = function () {
      if (self.initialized) {
        return true;
      }
      self.error = "";
      self.d = typeof target === "string" ? document.getElementById(target) : target;
      if (!self.d) {
        self.error = "[CountUp] target is null or undefined";
        return false;
      }
      self.startVal = Number(startVal);
      self.endVal = Number(endVal);
      if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
        self.decimals = Math.max(0, decimals || 0);
        self.dec = Math.pow(10, self.decimals);
        self.duration = Number(duration) * 1000 || 2000;
        self.countDown = self.startVal > self.endVal;
        self.frameVal = self.startVal;
        self.initialized = true;
        return true;
      } else {
        self.error = "[CountUp] startVal (" + startVal + ") or endVal (" + endVal + ") is not a number";
        return false;
      }
    };
    self.printValue = function (value) {
      var result = self.options.formattingFn(value);
      if (self.d.tagName === "INPUT") {
        this.d.value = result;
      } else {
        if (self.d.tagName === "text" || self.d.tagName === "tspan") {
          this.d.textContent = result;
        } else {
          this.d.innerHTML = result;
        }
      }
    };
    self.count = function (timestamp) {
      if (!self.startTime) {
        self.startTime = timestamp;
      }
      self.timestamp = timestamp;
      var progress = timestamp - self.startTime;
      self.remaining = self.duration - progress;
      if (self.options.useEasing) {
        if (self.countDown) {
          self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
        } else {
          self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
        }
      } else {
        if (self.countDown) {
          self.frameVal = self.startVal - (self.startVal - self.endVal) * (progress / self.duration);
        } else {
          self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
        }
      }
      if (self.countDown) {
        self.frameVal = self.frameVal < self.endVal ? self.endVal : self.frameVal;
      } else {
        self.frameVal = self.frameVal > self.endVal ? self.endVal : self.frameVal;
      }
      self.frameVal = Math.round(self.frameVal * self.dec) / self.dec;
      self.printValue(self.frameVal);
      if (progress < self.duration) {
        self.rAF = requestAnimationFrame(self.count);
      } else {
        if (self.callback) {
          self.callback();
        }
      }
    };
    self.start = function (callback) {
      if (!self.initialize()) {
        return;
      }
      self.callback = callback;
      self.rAF = requestAnimationFrame(self.count);
    };
    self.pauseResume = function () {
      if (!self.paused) {
        self.paused = true;
        cancelAnimationFrame(self.rAF);
      } else {
        self.paused = false;
        delete self.startTime;
        self.duration = self.remaining;
        self.startVal = self.frameVal;
        requestAnimationFrame(self.count);
      }
    };
    self.reset = function () {
      self.paused = false;
      delete self.startTime;
      self.initialized = false;
      if (self.initialize()) {
        cancelAnimationFrame(self.rAF);
        self.printValue(self.startVal);
      }
    };
    self.update = function (newEndVal) {
      if (!self.initialize()) {
        return;
      }
      newEndVal = Number(newEndVal);
      if (!ensureNumber(newEndVal)) {
        self.error = "[CountUp] update() - new endVal is not a number: " + newEndVal;
        return;
      }
      self.error = "";
      if (newEndVal === self.frameVal) {
        return;
      }
      cancelAnimationFrame(self.rAF);
      self.paused = false;
      delete self.startTime;
      self.startVal = self.frameVal;
      self.endVal = newEndVal;
      self.countDown = self.startVal > self.endVal;
      self.rAF = requestAnimationFrame(self.count);
    };
    if (self.initialize()) {
      self.printValue(self.startVal);
    }
  };

  • 在 _config.butterfly.yml 中的 CDN 下的 option 引入 countup.js
    （ + 号直接删除 即是正常缩进）

    1
    2
    3
    4
    5
    6
    7
    CDN:
      option:
      # 可以在这里更换部分文件,会覆盖原有的配置
        # main_css:
          ···
        # busuanzi:
    +    countup_js: /js/countup.js

  • 如果开启了 51la统计 就需要在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入文件

    1
    2
    3
    4
    5
    6
    7
    8
    inject:
      head:
        - <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> # 51统计样式
        - <script> LA.init({id:"# 自己的id",ck:"# 自己的ck"})</script> # 51统计 - id & ck
        - <script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script> # 灵雀监控样式
        - <script>new LingQue.Monitor().init({id:"# 自己的id",sendSuspicious:true});</script> # 灵雀监控 - id
      bottom:
        - ···

    其中 你的ID 为上方about.pug提到的 {掩码ID}
    而 你的CK 可以在 站点配置-参数设置-统计代码-手动安装（通用） 中找到

安装sweetalert2

  • 在 [blogroot] 执行该命令安装插件
    1
    $ npm install sweetalert2 --save

关于about内容

  • 第4行 中的 https://s1.ax1x.com/2023/07/07/pCc1TSO.jpg 为页面最上方头像

  • 第84行 中的 https://yife68.gitee.io/icat-pic/blog/2.webp 为生涯板块的图像

  • 第198行 至 第274行 为使用 Plaintext 语法撰写的心路历程，需自行修改

  • 第352行 中的 {掩码ID} 由访问统计板块中 51la统计 提供
    （需要在 站点配置-参数设置-数据挂件 中开启数据挂件）

文章顶部波浪

  • 新增 [blogRoot]/themes/butterfly/layout/includes/header/index.pug 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      include ./post-info.pug
+      section.main-hero-waves-area.waves-area
+        svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
+          defs
+            path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
+          g.parallax
+            use(href='#gentle-wave', x='48', y='0')
+            use(href='#gentle-wave', x='48', y='3')
+            use(href='#gentle-wave', x='48', y='5')
+            use(href='#gentle-wave', x='48', y='7')
    else if is_home() 
      #site-info
        h1#site-title=site_title
  • 在自建的CSS文件 [blogRoot]/source/css/icat_change.css 里新增以下内容
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
.main-hero-waves-area {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -11px;
  z-index: 5;
}
.waves-area .waves-svg {
  width: 100%;
  height: 5rem;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #f7f9febd;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #f7f9fe82;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #f7f9fe36;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #f7f9fe;
}

[data-theme="dark"] .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #070709c8;
}
[data-theme="dark"] .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #07070980;
}
[data-theme="dark"] .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #0707093e;
}
[data-theme="dark"] .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #070709;
}
/* 黑色模式背景 */

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
@media (max-width: 768px) {
  .waves-area .waves-svg {
    height: 40px;
    min-height: 40px;
  }
}

/* 波浪样式 */
  • CSS 中 fill 属性可以控制波浪颜色，最好使其中一个颜色与背景颜色一致，否则会显的有点奇怪

友联鱼塘

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

前端样式参考 洪佬的 可自行移步张洪Heo

效果预览

封の好友鱼塘
使用 HEXO_CIRCLE_OF_FRIENDS 构建

创建数据【前端】

  • 创建 [blogRoot]/source/fcircle/index.md 页面
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
---
title: 鱼塘录
date: 2023-05-23 21:14:06
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 友联朋友圈
top_title: 封の好友鱼塘
top_tips: 使用 HEXO_CIRCLE_OF_FRIENDS 构建
top_link: /link/
top_text: 关于友联
comments: false
---


<div id="hexo-circle-of-friends-root"></div>
<script>
    let UserConfig = {
        private_api_url: 'https://moments.meuicat.com/',
        // 填写你的api地址
        page_turning_number: 12,
        // 点击加载更多时，一次最多加载几篇文章，默认10
        error_img: 'https://s1.ax1x.com/2023/05/26/p9qChjI.jpg',
        // 头像加载失败时，默认头像地址 #https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c
        sort_rule: 'created'
        // 进入页面时第一次的排序规则
    }
</script>
<script type="text/javascript" src="https://cdn.meuicat.com/gh/yife/fcircle@0.0.1/app.min.js"></script>
<script type="text/javascript" src="https://cdn.meuicat.com/gh/yife/fcircle@0.0.1/bundle.js"></script>

  • 如若缺少样式的颜色变量 请移步 🐈 第五章 - 三小节四段 | CSS颜色变量 自取

  • 创建 [blogRoot]/source/js/app.min.js 文件，并新增以下内容，用来处理鱼塘的样式逻辑
    （即上方 https://yife68.gitee.io/icat-pic/blog/app.min.js ，替换即可）

1
(function(e){function t(t){for(var c,n,r=t[0],i=t[1],s=t[2],p=0,b=[];p<r.length;p++)n=r[p],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&b.push(o[n][0]),o[n]=0;for(c in i)Object.prototype.hasOwnProperty.call(i,c)&&(e[c]=i[c]);d&&d(t);while(b.length)b.shift()();return l.push.apply(l,s||[]),a()}function a(){for(var e,t=0;t<l.length;t++){for(var a=l[t],c=!0,r=1;r<a.length;r++){var i=a[r];0!==o[i]&&(c=!1)}c&&(l.splice(t--,1),e=n(n.s=a[0]))}return e}var c={},o={app:0},l=[];function n(t){if(c[t])return c[t].exports;var a=c[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=c,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var c in e)n.d(a,c,function(t){return e[t]}.bind(null,c));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="";var r=window["webpackJsonp"]=window["webpackJsonp"]||[],i=r.push.bind(r);r.push=t,r=r.slice();for(var s=0;s<r.length;s++)t(r[s]);var d=i;l.push([0,"chunk-vendors"]),a()})({0:function(e,t,a){e.exports=a("56d7")},1799:function(e,t,a){var c=a("4ec8");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("4b3a8dae",c,!0,{sourceMap:!1,shadowMode:!1})},"1b92":function(e,t,a){var c=a("2313");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("220edc25",c,!0,{sourceMap:!1,shadowMode:!1})},"1feb":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,"#cf-change{font-size:14px;display:block;padding:12px 0 4px;width:100%;text-align:center}#cf-container{width:100%}#cf-container a{text-decoration:none!important;line-height:1.3;color:var(--icat-fontcolor);transition:.3s}#cf-container a:hover{color:var(--icat-blue);}.cf-time-created,.cf-time-updated{display:inline-block;text-align:left;white-space:nowrap}.cf-time-created i.far,.cf-time-updated i.fas{padding-right:8px}#cf-footer{margin-right:8px;margin-bottom:8px;text-align:right;font-size:13px}.cf-data-lastupdated{font-size:13px;text-align:right;display:block}#cf-footer-info{display:flex}#cf-footer-info div{margin-left:.5rem}.cf-article .cf-article-title:hover{color:var(--icat-blue)!important}#cf-more,#cf-state{background:var(--icat-card-bg)}.img-alt{display:none!important}#cf-change,#cf-more,#cf-state,.cf-article-author,.cf-article-floor,.cf-article:hover .cf-article-floor,.cf-article a.cf-article-title,.cf-time-created,.cf-time-updated{color:var(--icat-fontcolor)}.cf-article{background:var(--icat-card-bg)}#cf-change span:hover{color:var(--icat-blue);cursor:pointer}.cf-overshow p a:hover{color:var(--icat-blue)!important}.cf-overshow p span{color:var(--icat-secondtext)}.cf-setting-btn{color:var(--icat-fontcolor);cursor:pointer;transition:.3s}.cf-setting-btn:hover{color:var(--icat-blue)}.dark-theme #cf-overlay,.theme-dark #cf-overlay{background-color:rgba(59,61,66,.42)}.dark-theme .cf-overshow,.theme-dark .cf-overshow{background:#292a2d}.dark-theme .cf-overshow p a,.theme-dark .cf-overshow p a{color:var(--icat-fontcolor)}.dark-theme .cf-overshow .cf-overshow-content,.theme-dark .cf-overshow .cf-overshow-content{background:#eaeaea}.dark-theme #cf-more,.dark-theme #cf-state,.theme-dark #cf-more,.theme-dark #cf-state{background:var(--lmm-dack-background);color:var(--lmm-dark-fontcolor)}.dark-theme #cf-change,.dark-theme .cf-article-floor,.dark-theme .cf-time-created,.dark-theme .cf-time-updated,.theme-dark #cf-change,.theme-dark .cf-article-floor,.theme-dark .cf-time-created,.theme-dark .cf-time-updated{color:var(--lmm-dark-floorcolor)}.dark-theme .cf-article-author,.dark-theme .cf-article a.cf-article-title,.theme-dark .cf-article-author,.theme-dark .cf-article a.cf-article-title{color:var(--lmm-dark-fontcolor)}.dark-theme .cf-article,.theme-dark .cf-article{background:var(--lmm-dack-background)}.dark-theme .cf-article:hover .cf-article-floor,.dark-theme .cf-article:hover .cf-time-created,.dark-theme .cf-article:hover .cf-time-updated,.dark-theme .cf-overshow p span,.theme-dark .cf-article:hover .cf-article-floor,.theme-dark .cf-article:hover .cf-time-created,.theme-dark .cf-article:hover .cf-time-updated,.theme-dark .cf-overshow p span{color:var(--lmm-dark-fontcolor)}@media screen and (max-width:400px){#cf-state{font-size:14px}.cf-article-time i{display:none}}@media screen and (max-width:300px){#cf-state,.cf-article-time{display:none}}",""]),e.exports=t},2313:function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,".ManagePanelMain[data-v-668b627c]{padding:0 10px}.ManagePanelMain .cf-manage-top[data-v-668b627c]{display:flex;align-items:center;justify-content:space-between;width:100%}.cf-manage-title[data-v-668b627c]{overflow-wrap:break-word;color:#fff;font-size:24px;font-family:PingFangSC-Regular;text-align:center;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cf-manage-exit-btn[data-v-668b627c]{font-size:16px}.cf-manage-tabs-area[data-v-668b627c]{position:relative;margin:10px 0}[data-v-668b627c] .el-tabs__nav-next,[data-v-668b627c] .el-tabs__nav-prev{color:#fff!important}",""]),e.exports=t},2375:function(e,t,a){var c=a("4a06");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("58d813eb",c,!0,{sourceMap:!1,shadowMode:!1})},"2ac5":function(e,t,a){var c=a("be21");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("5be240ce",c,!0,{sourceMap:!1,shadowMode:!1})},"4a06":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,"@media screen and (max-width:1200px){.el-container.cf-manage-pannel[data-v-34921c7c]{width:90%;padding:45px 0 0}}#cf-manage-overlay[data-v-34921c7c]{top:0;left:0;background-color:hsla(0,0%,100%,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-y:auto;pointer-events:all;transition:all .1s ease;z-index:998}#cf-manage-overlay[data-v-34921c7c],.cf-manage-pannel[data-v-34921c7c]{position:fixed;width:100%;height:100%}.cf-manage-pannel[data-v-34921c7c]{text-align:center;background-color:#8c8788;border-radius:10px;max-width:1200px;max-height:800px;z-index:999;transform:translate(-50%,-50%);left:50%;top:50%;padding:45px}.cf-manage-close-btn[data-v-34921c7c]{position:absolute;max-width:30px;color:#fff;cursor:pointer;right:2%;top:5px}.cf-manage-close-btn[data-v-34921c7c]:hover{color:#49b1f5}.cf-pannel-area[data-v-34921c7c]{width:100%;height:100%;overflow-y:scroll;overflow-x:hidden}[data-v-34921c7c]::-webkit-scrollbar-thumb{background-color:rgba(52,218,177,.85);background-image:-webkit-linear-gradient(45deg,hsla(0,7%,86%,.4) 25%,transparent 0,transparent 50%,hsla(0,8%,64%,.4) 0,rgba(66,220,5,.4) 75%,transparent 0,transparent)!important;border-radius:2em!important}[data-v-34921c7c]::-webkit-scrollbar{width:8px;height:8px}[data-v-34921c7c]::-webkit-scrollbar-track{background-color:#b6b2b4;border-radius:2em}[data-v-34921c7c]::-webkit-scrollbar-corner{background-color:transparent}",""]),e.exports=t},"4ae4":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,'.cf-article-group[data-v-56cae500]{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin-top:12px}.cf-article-item[data-v-56cae500]{width:24.2%}@media screen and (max-width:1200px){.cf-article-item[data-v-56cae500]{width:48.4%}.cf-article-title[data-v-56cae500]{-webkit-line-clamp:2!important}}@media screen and (max-width:768px){.cf-article-item[data-v-56cae500]{width:100%}}.cf-article[data-v-56cae500]{margin:8px 0;border-radius:8px;font-weight:bolder;overflow:hidden;transition:all .3s ease-out;position:relative;padding:1rem;border:var(--style-border-always);height:160px;display:flex;align-content:space-between;flex-direction:column;justify-content:space-between;box-shadow:var(--icat-shadow-border)}.cf-article[data-v-56cae500]:hover{transition:transform .3s}.cf-article-avatar[data-v-56cae500]{line-height:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;z-index:1}.cf-img-avatar[data-v-56cae500]{display:inline-block!important;position:absolute;width:40%;border-radius:50%;margin:0 0 -4px!important;background:#fff;opacity:.1;z-index:0;right:-20px;bottom:-20px;filter:blur(4px)}.cf-article-author[data-v-56cae500],.cf-img-avatar[data-v-56cae500]{align-self:center;text-align:center;transition:.3s}.cf-article-author[data-v-56cae500]{line-height:1;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;z-index:1;color:var(--icat-fontcolor);font-size:.7rem;background-color:var(--icat-gray-op);padding:8px;border-radius:20px;display:flex;align-items:center}.cf-article-author[data-v-56cae500]:hover{background:var(--icat-blue);color:var(--icat-white)}.cf-article-floor[data-v-56cae500]{position:absolute;top:0;right:.5rem;font-style:italic;font-size:3rem;line-height:1.5rem;z-index:1;font-weight:400;transition:.3s}.cf-article-title[data-v-56cae500]{font-weight:500;position:relative;z-index:2;width:100%;display:block;letter-spacing:1.5px;font-size:18px;align-self:start;text-align:left;line-height:40px;padding:0;margin-bottom:10px;transition:.3s;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box!important;-webkit-box-orient:vertical}.cf-article-time[data-v-56cae500]{font-size:12px;text-align:right;float:right;font-weight:400;transition:.3s;margin-left:auto;z-index:1}#cf-footer[data-v-56cae500]{width:100%;margin-top:.5rem;align-items:flex-end;color:var(--icat-secondtext)}#cf-footer[data-v-56cae500],#cf-more[data-v-56cae500]{display:flex;flex-direction:column}#cf-more[data-v-56cae500]{width:40%;max-width:810px;height:30px;margin:auto;border-radius:12px;font-weight:bolder;text-align:center;justify-content:space-around;cursor:pointer;transition:.3s;border:var(--style-border-always);box-shadow:var(--icat-shadow-border)}#cf-more[data-v-56cae500]:hover{width:60%;background:var(--icat-blue);color:var(--icat-white)}#cf-more i.fas[data-v-56cae500]:before{content:"∞"}',""]),e.exports=t},"4ec8":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,"@media screen and (max-width:1200px){.settings-item[data-v-75620860]{flex-direction:column}}.settings-item[data-v-75620860],.settings-item .item-col[data-v-75620860]{display:flex}.cf-manage-main-add-btn[data-v-75620860]{margin-left:30px}",""]),e.exports=t},"4ee4":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,"#cf-state[data-v-0ed50aaf]{position:relative;font-size:16px;border-radius:8px;box-shadow:none;overflow:hidden;display:flex;flex-direction:row;flex-wrap:wrap;padding:8px 0;width:100%}#cf-change .cf-change-now[data-v-0ed50aaf]{color:var(--icat-blue);font-weight:800}.cf-state-data[data-v-0ed50aaf]{width:100%;display:flex}.cf-data-active[data-v-0ed50aaf],.cf-data-article[data-v-0ed50aaf],.cf-data-friends[data-v-0ed50aaf]{height:60px;background:transparent;display:flex;flex-direction:column;width:33%;cursor:pointer}.cf-label[data-v-0ed50aaf]{font-size:16px;width:100%;height:30px}.cf-label[data-v-0ed50aaf],.cf-message[data-v-0ed50aaf]{padding:0 3%;align-self:center;text-align:center}.cf-message[data-v-0ed50aaf]{width:50%;font-size:20px}#panel-btn[data-v-0ed50aaf]{position:absolute;right:0;bottom:0}#cf-state-box[data-v-0ed50aaf]{display:none}",""]),e.exports=t},5145:function(e,t,a){var c=a("4ee4");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("69d28853",c,!0,{sourceMap:!1,shadowMode:!1})},"56d7":function(e,t,a){"use strict";a.r(t);var c=a("f2bf");const o={key:2},l={id:"cf-container"},n={key:3};function r(e,t,a,r,i,s){const d=Object(c["resolveComponent"])("ManagePanel"),p=Object(c["resolveComponent"])("ArticleCard"),b=Object(c["resolveComponent"])("Header"),m=Object(c["resolveComponent"])("ArticleBody");return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",null,[i.manage_panel_open?(Object(c["openBlock"])(),Object(c["createBlock"])(d,{key:0,Config:i.Config,onClose_manage_panel:s.close_manage_panel},null,8,["Config","onClose_manage_panel"])):Object(c["createCommentVNode"])("",!0),i.article_card_data.open?(Object(c["openBlock"])(),Object(c["createBlock"])(p,{key:1,article_card_data:i.article_card_data.data,Config:i.Config,onClose_article_card:s.close_article_card},null,8,["article_card_data","Config","onClose_article_card"])):Object(c["createCommentVNode"])("",!0),i.change_map[i.Config.sort_rule]?(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",o,[Object(c["createElementVNode"])("div",l,[Object(c["createVNode"])(b,{Config:i.Config,all_data:i.change_map[i.Config.sort_rule],onWatch_sort_rule:s.change_sort_rule,onShow_article_card:s.open_article_card,onToggle_api_url:s.toggle_api_url,onOpen_manage_panel:s.open_manage_panel},null,8,["Config","all_data","onWatch_sort_rule","onShow_article_card","onToggle_api_url","onOpen_manage_panel"]),Object(c["createVNode"])(m,{Config:i.Config,all_data:i.change_map[i.Config.sort_rule],onShow_article_card:s.open_article_card,onOpen_manage_panel:s.open_manage_panel},null,8,["Config","all_data","onShow_article_card","onOpen_manage_panel"])])])):(Object(c["openBlock"])(),Object(c["createElementBlock"])("span",n,"与主机通讯中……"))])}const i=e=>(Object(c["pushScopeId"])("data-v-0ed50aaf"),e=e(),Object(c["popScopeId"])(),e),s={id:"cf-state-box"},d={id:"cf-state",class:"cf-new-add"},p={class:"cf-state-data"},b=i(()=>Object(c["createElementVNode"])("span",{class:"cf-label"},"订阅",-1)),m={class:"cf-message"},f=i(()=>Object(c["createElementVNode"])("span",{class:"cf-label"},"活跃",-1)),u={class:"cf-message"},h=i(()=>Object(c["createElementVNode"])("span",{class:"cf-label"},"日志",-1)),g={class:"cf-message"};function O(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("Setting"),i=Object(c["resolveComponent"])("el-icon"),O=Object(c["resolveComponent"])("el-button"),C=Object(c["resolveComponent"])("el-tooltip");return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",s,[Object(c["createElementVNode"])("div",d,[Object(c["createVNode"])(O,{id:"panel-btn",circle:"",onClick:n.open_manage_panel},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(r)]),_:1})]),_:1},8,["onClick"]),Object(c["createElementVNode"])("div",p,[Object(c["createVNode"])(C,{content:"点击获取一篇随机文章",placement:"bottom",effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createElementVNode"])("div",{class:"cf-data-friends",onClick:t[0]||(t[0]=(...e)=>n.open_article_card&&n.open_article_card(...e))},[b,Object(c["createElementVNode"])("span",m,Object(c["toDisplayString"])(a.all_data.statistical_data.friends_num),1)])]),_:1}),Object(c["createVNode"])(C,{content:"点击切换公共库/私有库",placement:"top",effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createElementVNode"])("div",{class:"cf-data-active",onClick:t[1]||(t[1]=(...e)=>n.toggle_api_url&&n.toggle_api_url(...e))},[f,Object(c["createElementVNode"])("span",u,Object(c["toDisplayString"])(a.all_data.statistical_data.active_num),1)])]),_:1}),Object(c["createVNode"])(C,{content:"点击清空缓存",placement:"bottom",effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createElementVNode"])("div",{class:"cf-data-article",onClick:t[2]||(t[2]=(...e)=>n.clear_session_storage&&n.clear_session_storage(...e))},[h,Object(c["createElementVNode"])("span",g,Object(c["toDisplayString"])(a.all_data.statistical_data.article_num),1)])]),_:1})])])])}var C={name:"Header",emits:["watch_sort_rule","show_article_card","toggle_api_url","open_manage_panel"],methods:{change_sort_rule(){let e="created"===this.Config.sort_rule?"updated":"created";this.$emit("watch_sort_rule",e)},open_article_card(){this.$emit("show_article_card","")},toggle_api_url(){this.$emit("toggle_api_url")},clear_session_storage(){sessionStorage.clear(),location.reload()},open_manage_panel(){this.$emit("open_manage_panel")}},props:{all_data:{type:Object,default:()=>({statistical_data:{friends_num:0,active_num:0,article_num:0}})},Config:Object}},j=(a("ea03"),a("6b0d")),v=a.n(j);const _=v()(C,[["render",O],["__scopeId","data-v-0ed50aaf"]]);var x=_;const w=e=>(Object(c["pushScopeId"])("data-v-56cae500"),e=e(),Object(c["popScopeId"])(),e),k={class:"cf-article-group"},V={class:"cf-article"},A=["href","data-title"],N={class:"cf-article-avatar no-lightbox flink-item-icon"},E=["src"],y=["onClick"],B={class:"cf-article-time"},L={key:0,class:"cf-time-created"},I=w(()=>Object(c["createElementVNode"])("i",{class:"far fa-calendar-alt"},null,-1)),M={key:1,class:"cf-time-updated"},S=w(()=>Object(c["createElementVNode"])("i",{class:"fas fa-history"},"更新于",-1)),T={id:"cf-footer"},D={key:0},F={key:1,class:"fas fa-angle-double-down"},P={id:"cf-footer",class:"cf-new-add"},R=w(()=>Object(c["createElementVNode"])("span",{id:"cf-version-up",onclick:"checkVersion()"},null,-1)),Y=w(()=>Object(c["createElementVNode"])("div",null,[Object(c["createTextVNode"])("Powered by "),Object(c["createElementVNode"])("a",{href:"https://github.com/Rock-Candy-Tea/hexo-circle-of-friends",target:"_blank"},"FriendCircle")],-1)),Q=w(()=>Object(c["createElementVNode"])("div",null,[Object(c["createTextVNode"])("Design by "),Object(c["createElementVNode"])("a",{href:"https://meuicat.com/",target:"_blank"},"iCat")],-1)),K={id:"cf-footer-info"},z={class:"cf-data-friends"},U=w(()=>Object(c["createElementVNode"])("span",{class:"cf-label"},"订阅",-1)),Z={class:"cf-message"},G={class:"cf-data-active"},J=w(()=>Object(c["createElementVNode"])("span",{class:"cf-label"},"活跃",-1)),H={class:"cf-message"},q={class:"cf-data-article"},X=w(()=>Object(c["createElementVNode"])("span",{class:"cf-label"},"日志",-1)),W={class:"cf-message"},$={style:{display:"flex"}},ee={class:"cf-data-lastupdated"},te=w(()=>Object(c["createElementVNode"])("div",{id:"cf-overlay",class:"cf-new-add",onclick:"closeShow()"},null,-1)),ae=w(()=>Object(c["createElementVNode"])("div",{id:"cf-overshow",class:"cf-new-add"},null,-1));function ce(e,t,a,o,l,n){return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",k,[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(a.all_data["article_data"].slice(0,l.current_arcitle_num),(e,o)=>(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",{key:o,class:"cf-article-item"},[Object(c["createElementVNode"])("div",V,[Object(c["createElementVNode"])("a",{class:"cf-article-title",href:e.link,target:"_blank",rel:"noopener nofollow","data-title":e.title},Object(c["toDisplayString"])(e.title),9,A),Object(c["createElementVNode"])("div",N,[Object(c["createElementVNode"])("img",{class:"cf-img-avatar avatar no-lightbox",src:e.avatar,alt:"avatar",onError:t[0]||(t[0]=e=>n.loadDefaultImg(e))},null,40,E),Object(c["createElementVNode"])("span",{class:"cf-article-author",onClick:t=>n.open_article_card(e.link)},Object(c["toDisplayString"])(e.author),9,y),Object(c["createElementVNode"])("span",B,["created"===a.Config.sort_rule?(Object(c["openBlock"])(),Object(c["createElementBlock"])("span",L,[I,Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.created),1)])):Object(c["createCommentVNode"])("",!0),"updated"===a.Config.sort_rule?(Object(c["openBlock"])(),Object(c["createElementBlock"])("span",M,[S,Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.updated),1)])):Object(c["createCommentVNode"])("",!0)])])])]))),128)),Object(c["createElementVNode"])("div",T,[Object(c["createElementVNode"])("div",{id:"cf-more",class:"cf-new-add",onClick:t[1]||(t[1]=e=>n.loadMoreArticle())},[l.is_ended?(Object(c["openBlock"])(),Object(c["createElementBlock"])("small",D,"一切皆有尽头！")):(Object(c["openBlock"])(),Object(c["createElementBlock"])("i",F))]),Object(c["createElementVNode"])("div",P,[R,Y,Q,Object(c["createElementVNode"])("div",K,[Object(c["createElementVNode"])("div",z,[U,Object(c["createElementVNode"])("span",Z,Object(c["toDisplayString"])(a.all_data.statistical_data.friends_num),1)]),Object(c["createElementVNode"])("div",G,[J,Object(c["createElementVNode"])("span",H,Object(c["toDisplayString"])(a.all_data.statistical_data.active_num),1)]),Object(c["createElementVNode"])("div",q,[X,Object(c["createElementVNode"])("span",W,Object(c["toDisplayString"])(a.all_data.statistical_data.article_num),1)])]),Object(c["createElementVNode"])("div",$,[Object(c["createElementVNode"])("span",ee,"更新于："+Object(c["toDisplayString"])(a.all_data["statistical_data"]["last_updated_time"]),1),Object(c["createElementVNode"])("span",{class:"cf-setting-btn",style:{"margin-left":"8px"},onClick:t[2]||(t[2]=e=>n.open_manage_panel())},"设置")])]),te,ae])])}var oe={name:"ArticleBody",emits:["show_article_card","open_manage_panel"],data(){return{current_arcitle_num:this.all_data["statistical_data"]["article_num"]>20?20:this.all_data["statistical_data"]["article_num"],is_ended:this.all_data["statistical_data"]["article_num"]<=20}},methods:{loadMoreArticle(){this.current_arcitle_num+=this.Config.page_turning_number,this.current_arcitle_num>=this.all_data["statistical_data"]["article_num"]&&(this.is_ended=!0),console.log(this.is_ended)},loadDefaultImg(e){e.target.setAttribute("src",this.Config.error_img)},open_article_card(e){this.$emit("show_article_card",e)},open_manage_panel(){this.$emit("open_manage_panel")}},props:["Config","all_data"]};a("ff61");const le=v()(oe,[["render",ce],["__scopeId","data-v-56cae500"]]);var ne=le;const re=e=>(Object(c["pushScopeId"])("data-v-31c20c7f"),e=e(),Object(c["popScopeId"])(),e),ie={id:"cf-overlay-group"},se={key:0,class:"cf-overshow"},de={class:"cf-overshow-head"},pe=["src"],be=["href"],me={key:0},fe=re(()=>Object(c["createElementVNode"])("div",{class:"cf-overshow-content-tail"},[Object(c["createElementVNode"])("span",{style:{"font-style":"italic","font-size":"16px",color:"gray"}},"该作者最近暂无文章喵=^ω^=")],-1)),ue=[fe],he={key:1},ge=["href","data-title"];function Oe(e,t,a,o,l,n){return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",ie,[Object(c["createElementVNode"])("div",{id:"cf-overlay",onClick:t[0]||(t[0]=(...e)=>n.close_article_card&&n.close_article_card(...e))}),Object(c["createVNode"])(c["Transition"],{name:"fade"},{default:Object(c["withCtx"])(()=>[l.show?(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",se,[Object(c["createElementVNode"])("div",de,[Object(c["createElementVNode"])("img",{class:"cf-img-avatar avatar",src:a.article_card_data.statistical_data.avatar,onError:t[1]||(t[1]=e=>n.loadDefaultImg(e)),alt:"avatar"},null,40,pe),Object(c["createElementVNode"])("a",{class:"",target:"_blank",rel:"noopener nofollow",href:a.article_card_data.statistical_data.link},Object(c["toDisplayString"])(a.article_card_data.statistical_data.name),9,be)]),0===a.article_card_data.article_data.length?(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",me,ue)):(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",he,[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(a.article_card_data.article_data,(e,t)=>(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",{key:t,class:Object(c["normalizeClass"])(a.article_card_data.article_data.length-1===t?"cf-overshow-content-tail":"cf-overshow-content")},[Object(c["createElementVNode"])("p",null,[Object(c["createElementVNode"])("a",{class:"cf-article-title",href:e.link,target:"_blank",rel:"noopener nofollow","data-title":e.title},Object(c["toDisplayString"])(e.title),9,ge),Object(c["createElementVNode"])("span",null,Object(c["toDisplayString"])(e.created),1)])],2))),128))]))])):Object(c["createCommentVNode"])("",!0)]),_:1})])}var Ce={name:"ArticleCard",emits:["close_article_card"],data(){return{show:!1}},methods:{close_article_card(){this.show=!1,setTimeout(()=>this.$emit("close_article_card"),0)},loadDefaultImg(e){e.target.setAttribute("src",this.Config.error_img)}},mounted(){setTimeout(()=>this.show=!0,100)},props:["Config","article_card_data"]};a("7d5b");const je=v()(Ce,[["render",Oe],["__scopeId","data-v-31c20c7f"]]);var ve=je;const _e=e=>(Object(c["pushScopeId"])("data-v-34921c7c"),e=e(),Object(c["popScopeId"])(),e),xe=_e(()=>Object(c["createElementVNode"])("div",{id:"cf-manage-overlay"},null,-1)),we={class:"cf-pannel-area"},ke=_e(()=>Object(c["createElementVNode"])("path",{fill:"currentColor",d:"M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"},null,-1)),Ve=[ke];function Ae(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("ManagePanelLogin"),i=Object(c["resolveComponent"])("ManagePanelMain"),s=Object(c["resolveComponent"])("el-container");return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",null,[xe,Object(c["createVNode"])(s,{class:"cf-manage-pannel"},{default:Object(c["withCtx"])(()=>[Object(c["createElementVNode"])("div",we,[(Object(c["openBlock"])(),Object(c["createElementBlock"])("svg",{class:"cf-manage-close-btn",onClick:t[0]||(t[0]=(...e)=>n.close_manage_panel&&n.close_manage_panel(...e)),viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg","data-v-029747aa":""},Ve)),l.show_login_page?(Object(c["openBlock"])(),Object(c["createBlock"])(r,{key:0,Config:a.Config,onLogin_success:n.login_success},null,8,["Config","onLogin_success"])):(Object(c["openBlock"])(),Object(c["createBlock"])(i,{key:1,Config:a.Config,onLogout:n.logout},null,8,["Config","onLogout"]))])]),_:1})])}const Ne=e=>(Object(c["pushScopeId"])("data-v-735984d8"),e=e(),Object(c["popScopeId"])(),e),Ee=Ne(()=>Object(c["createElementVNode"])("svg",{class:"cf-manage-logo",version:"1.1",width:"49px",height:"53px",viewBox:"0 0 49.0 53.0",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[Object(c["createElementVNode"])("defs",null,[Object(c["createElementVNode"])("clipPath",{id:"10910911211111355521089995"},[Object(c["createElementVNode"])("path",{d:"M1000,0 L1000,1235 L0,1235 L0,0 L1000,0 Z"})]),Object(c["createElementVNode"])("filter",{id:"104106489998559712197112",x:"-10.4038184%",y:"-8.78844516%",filterUnits:"userSpaceOnUse",width:"126.009546%",height:"121.971113%"},[Object(c["createElementVNode"])("feGaussianBlur",{stdDeviation:"1",in:"SourceAlpha",result:"103112104511175211312010049"}),Object(c["createElementVNode"])("feOffset",{dx:"1",dy:"1",in:"103112104511175211312010049",result:"1001171155611757555056104"}),Object(c["createElementVNode"])("feColorMatrix",{values:"0 0 0 0.0 0 0 0 0 0.4855076886605525 0 0 0 0 0.39303003367759 0 0 0 0 0.618950263603584 0",type:"matrix",in:"1001171155611757555056104"})]),Object(c["createElementVNode"])("clipPath",{id:"12251106104121101109106107109"},[Object(c["createElementVNode"])("path",{d:"M35.5554004,0 C37.1526201,-4.54925271e-15 38.4474225,1.2948024 38.4474225,2.8920221 L38.4474225,42.6222859 C38.4474225,44.2195056 37.1526201,45.514308 35.5554004,45.514308 L2.8920221,45.514308 C1.2948024,45.514308 2.41604905e-15,44.2195056 0,42.6222859 L0,2.8920221 C-1.95603e-16,1.2948024 1.2948024,2.95793976e-15 2.8920221,0 L35.5554004,0 Z"})]),Object(c["createElementVNode"])("clipPath",{id:"109114106101120501221195451"},[Object(c["createElementVNode"])("path",{d:"M32.2238978,39.012264 C32.4393566,39.012264 32.6140205,39.1869279 32.6140205,39.4023867 C32.6140205,39.6178454 32.4393566,39.7925093 32.2238978,39.7925093 L0.39012264,39.7925093 C0.174663855,39.7925093 2.63860911e-17,39.6178454 0,39.4023867 C-2.63860911e-17,39.1869279 0.174663855,39.012264 0.39012264,39.012264 L32.2238978,39.012264 Z M32.2238978,35.761242 C32.4393566,35.761242 32.6140205,35.9359059 32.6140205,36.1513647 C32.6140205,36.3668234 32.4393566,36.5414873 32.2238978,36.5414873 L0.39012264,36.5414873 C0.174663855,36.5414873 2.63860911e-17,36.3668234 0,36.1513647 C-2.63860911e-17,35.9359059 0.174663855,35.761242 0.39012264,35.761242 L32.2238978,35.761242 Z M32.2238978,32.51022 C32.4393566,32.51022 32.6140205,32.6848839 32.6140205,32.9003427 C32.6140205,33.1158014 32.4393566,33.2904653 32.2238978,33.2904653 L0.39012264,33.2904653 C0.174663855,33.2904653 4.58326451e-13,33.1158014 4.58300065e-13,32.9003427 C4.58273678e-13,32.6848839 0.174663855,32.51022 0.39012264,32.51022 L32.2238978,32.51022 Z M32.2238978,29.259198 C32.4393566,29.259198 32.6140205,29.4338619 32.6140205,29.6493207 C32.6140205,29.8647794 32.4393566,30.0394433 32.2238978,30.0394433 L0.39012264,30.0394433 C0.174663855,30.0394433 2.63860911e-17,29.8647794 0,29.6493207 C-2.63860911e-17,29.4338619 0.174663855,29.259198 0.39012264,29.259198 L32.2238978,29.259198 Z M32.2238978,26.008176 C32.4393566,26.008176 32.6140205,26.1828399 32.6140205,26.3982987 C32.6140205,26.6137574 32.4393566,26.7884213 32.2238978,26.7884213 L0.39012264,26.7884213 C0.174663855,26.7884213 4.58326451e-13,26.6137574 4.58300065e-13,26.3982987 C4.58273678e-13,26.1828399 0.174663855,26.008176 0.39012264,26.008176 L32.2238978,26.008176 Z M32.2238978,22.757154 C32.4393566,22.757154 32.6140205,22.9318179 32.6140205,23.1472767 C32.6140205,23.3627354 32.4393566,23.5373993 32.2238978,23.5373993 L0.39012264,23.5373993 C0.174663855,23.5373993 2.63860911e-17,23.3627354 0,23.1472767 C-2.63860911e-17,22.9318179 0.174663855,22.757154 0.39012264,22.757154 L32.2238978,22.757154 Z M32.2238978,19.506132 C32.4393566,19.506132 32.6140205,19.6807959 32.6140205,19.8962547 C32.6140205,20.1117134 32.4393566,20.2863773 32.2238978,20.2863773 L0.39012264,20.2863773 C0.174663855,20.2863773 4.58326451e-13,20.1117134 4.58300065e-13,19.8962547 C4.58273678e-13,19.6807959 0.174663855,19.506132 0.39012264,19.506132 L32.2238978,19.506132 Z M32.2238978,16.25511 C32.4393566,16.25511 32.6140205,16.4297739 32.6140205,16.6452326 C32.6140205,16.8606914 32.4393566,17.0353553 32.2238978,17.0353553 L0.39012264,17.0353553 C0.174663855,17.0353553 2.63860911e-17,16.8606914 0,16.6452326 C-2.63860911e-17,16.4297739 0.174663855,16.25511 0.39012264,16.25511 L32.2238978,16.25511 Z M32.2238978,13.004088 C32.4393566,13.004088 32.6140205,13.1787519 32.6140205,13.3942106 C32.6140205,13.6096694 32.4393566,13.7843333 32.2238978,13.7843333 L0.39012264,13.7843333 C0.174663855,13.7843333 4.58326451e-13,13.6096694 4.58300065e-13,13.3942106 C4.58273678e-13,13.1787519 0.174663855,13.004088 0.39012264,13.004088 L32.2238978,13.004088 Z M32.2238978,9.753066 C32.4393566,9.753066 32.6140205,9.92772986 32.6140205,10.1431886 C32.6140205,10.3586474 32.4393566,10.5333113 32.2238978,10.5333113 L0.39012264,10.5333113 C0.174663855,10.5333113 4.58326451e-13,10.3586474 4.58300065e-13,10.1431886 C4.58273678e-13,9.92772986 0.174663855,9.753066 0.39012264,9.753066 L32.2238978,9.753066 Z M32.2238978,6.502044 C32.4393566,6.502044 32.6140205,6.67670786 32.6140205,6.89216664 C32.6140205,7.10762543 32.4393566,7.28228928 32.2238978,7.28228928 L0.39012264,7.28228928 C0.174663855,7.28228928 2.63860911e-17,7.10762543 0,6.89216664 C-2.63860911e-17,6.67670786 0.174663855,6.502044 0.39012264,6.502044 L32.2238978,6.502044 Z M32.2238978,3.251022 C32.4393566,3.251022 32.6140205,3.42568586 32.6140205,3.64114464 C32.6140205,3.85660343 32.4393566,4.03126728 32.2238978,4.03126728 L0.39012264,4.03126728 C0.174663855,4.03126728 4.58326451e-13,3.85660343 4.58300065e-13,3.64114464 C4.58273678e-13,3.42568586 0.174663855,3.251022 0.39012264,3.251022 L32.2238978,3.251022 Z M32.2238978,0 C32.4393566,2.90251188e-15 32.6140205,0.174663855 32.6140205,0.39012264 C32.6140205,0.605581425 32.4393566,0.78024528 32.2238978,0.78024528 L0.39012264,0.78024528 C0.174663855,0.78024528 2.63860911e-17,0.605581425 0,0.39012264 C-2.63860911e-17,0.174663855 0.174663855,3.95791367e-17 0.39012264,0 L32.2238978,0 Z"})]),Object(c["createElementVNode"])("clipPath",{id:"5399112495657099106120"},[Object(c["createElementVNode"])("path",{d:"M18.5516738,7.75655388 C19.2710242,7.75655388 19.9040525,7.84647267 20.4507588,8.02631026 C20.997465,8.20614785 21.5441713,8.46151723 22.0908776,8.79241839 C22.3786177,8.99383649 22.5224878,9.25280262 22.5224878,9.56931678 C22.5224878,9.78512189 22.4361658,9.98653999 22.2635217,10.1735711 C22.0908776,10.3606022 21.896653,10.4541177 21.6808479,10.4541177 C21.5369778,10.4541177 21.3787207,10.4109567 21.2060766,10.3246347 C20.7025314,10.0656685 20.2853082,9.88583094 19.954407,9.78512189 C19.6235059,9.68441284 19.2134762,9.63405831 18.7243179,9.63405831 C17.5158093,9.63405831 16.5554766,9.98294324 15.8433197,10.6807131 C15.1311629,11.3784829 14.7750844,12.3172352 14.7750844,13.4969697 C14.7750844,14.6767043 15.1311629,15.6154566 15.8433197,16.3132264 C16.5554766,17.0109963 17.5158093,17.3598812 18.7243179,17.3598812 C19.2134762,17.3598812 19.6235059,17.3095267 19.954407,17.2088176 C20.2853082,17.1081086 20.7025314,16.928271 21.2060766,16.6693048 C21.3787207,16.5829828 21.5369778,16.5398218 21.6808479,16.5398218 C21.896653,16.5398218 22.0908776,16.6333373 22.2635217,16.8203684 C22.4361658,17.0073995 22.5224878,17.2088176 22.5224878,17.4246227 C22.5224878,17.7411369 22.3786177,18.000103 22.0908776,18.2015211 C21.5441713,18.5324223 20.997465,18.7877916 20.4507588,18.9676292 C19.9040525,19.1474668 19.2710242,19.2373856 18.5516738,19.2373856 C17.5301963,19.2373856 16.5734603,19.0071935 15.6814659,18.5468093 C14.7750844,18.072038 14.0629276,17.3958487 13.5449953,16.5182413 C13.0270631,15.6406338 12.7680969,14.6335433 12.7680969,13.4969697 C12.7680969,12.3316222 13.0342566,11.3101447 13.5665758,10.4325372 C14.0845081,9.58370379 14.7786812,8.92549821 15.6490951,8.45792048 C16.5195091,7.99034274 17.4870353,7.75655388 18.5516738,7.75655388 Z M11.4592512,3.91522295 C11.7182174,3.91522295 11.941216,4.0087385 12.1282471,4.19576959 C12.3152782,4.38280069 12.4087937,4.6057993 12.4087937,4.86476543 C12.4087937,5.12373156 12.3152782,5.34313342 12.1282471,5.52297101 C11.941216,5.7028086 11.7182174,5.79272739 11.4592512,5.79272739 L4.33768267,5.79272739 C4.16503858,5.79272739 4.07871654,5.87904944 4.07871654,6.05169352 L4.07871654,10.5188593 L10.7039334,10.5188593 C10.9628995,10.5188593 11.1858981,10.6123748 11.3729292,10.7994059 C11.5599603,10.986437 11.6534758,11.2094356 11.6534758,11.4684017 C11.6534758,11.7273679 11.5599603,11.9467697 11.3729292,12.1266073 C11.1858981,12.3064449 10.9628995,12.3963637 10.7039334,12.3963637 L4.07871654,12.3963637 L4.07871654,18.1367796 C4.07871654,18.4101327 3.97800749,18.6439216 3.77658939,18.8381462 C3.57517129,19.0323708 3.33778567,19.1294831 3.06443253,19.1294831 C2.7910794,19.1294831 2.55729053,19.0323708 2.36306593,18.8381462 C2.16884133,18.6439216 2.07172904,18.4101327 2.07172904,18.1367796 L2.07172904,4.92950696 C2.07172904,4.65615382 2.16884133,4.41876821 2.36306593,4.21735011 C2.55729053,4.015932 2.7910794,3.91522295 3.06443253,3.91522295 L11.4592512,3.91522295 Z"})]),Object(c["createElementVNode"])("clipPath",{id:"1024511854541210110121103"},[Object(c["createElementVNode"])("path",{d:"M24.9684989,1.4692119 L24.9684989,21.6833967 L-0.374282015,21.6833967 L-0.374282015,1.4692119 L24.9684989,1.4692119 Z M18.5516738,7.75655388 C17.4870353,7.75655388 16.5195091,7.99034274 15.6490951,8.45792048 C14.7786812,8.92549821 14.0845081,9.58370379 13.5665758,10.4325372 C13.0342566,11.3101447 12.7680969,12.3316222 12.7680969,13.4969697 C12.7680969,14.6335433 13.0270631,15.6406338 13.5449953,16.5182413 C14.0629276,17.3958487 14.7750844,18.072038 15.6814659,18.5468093 C16.5734603,19.0071935 17.5301963,19.2373856 18.5516738,19.2373856 C19.2710242,19.2373856 19.9040525,19.1474668 20.4507588,18.9676292 C20.997465,18.7877916 21.5441713,18.5324223 22.0908776,18.2015211 C22.3786177,18.000103 22.5224878,17.7411369 22.5224878,17.4246227 C22.5224878,17.2088176 22.4361658,17.0073995 22.2635217,16.8203684 C22.0908776,16.6333373 21.896653,16.5398218 21.6808479,16.5398218 C21.5369778,16.5398218 21.3787207,16.5829828 21.2060766,16.6693048 C20.7025314,16.928271 20.2853082,17.1081086 19.954407,17.2088176 C19.6235059,17.3095267 19.2134762,17.3598812 18.7243179,17.3598812 C17.5158093,17.3598812 16.5554766,17.0109963 15.8433197,16.3132264 C15.1311629,15.6154566 14.7750844,14.6767043 14.7750844,13.4969697 C14.7750844,12.3172352 15.1311629,11.3784829 15.8433197,10.6807131 C16.5554766,9.98294324 17.5158093,9.63405831 18.7243179,9.63405831 C19.2134762,9.63405831 19.6235059,9.68441284 19.954407,9.78512189 C20.2853082,9.88583094 20.7025314,10.0656685 21.2060766,10.3246347 C21.3787207,10.4109567 21.5369778,10.4541177 21.6808479,10.4541177 C21.896653,10.4541177 22.0908776,10.3606022 22.2635217,10.1735711 C22.4361658,9.98653999 22.5224878,9.78512189 22.5224878,9.56931678 C22.5224878,9.25280262 22.3786177,8.99383649 22.0908776,8.79241839 C21.5441713,8.46151723 20.997465,8.20614785 20.4507588,8.02631026 C19.9040525,7.84647267 19.2710242,7.75655388 18.5516738,7.75655388 Z M11.4592512,3.91522295 L3.06443253,3.91522295 C2.7910794,3.91522295 2.55729053,4.015932 2.36306593,4.21735011 C2.16884133,4.41876821 2.07172904,4.65615382 2.07172904,4.92950696 L2.07172904,18.1367796 C2.07172904,18.4101327 2.16884133,18.6439216 2.36306593,18.8381462 C2.55729053,19.0323708 2.7910794,19.1294831 3.06443253,19.1294831 C3.33778567,19.1294831 3.57517129,19.0323708 3.77658939,18.8381462 C3.97800749,18.6439216 4.07871654,18.4101327 4.07871654,18.1367796 L4.07871654,12.3963637 L10.7039334,12.3963637 C10.9628995,12.3963637 11.1858981,12.3064449 11.3729292,12.1266073 C11.5599603,11.9467697 11.6534758,11.7273679 11.6534758,11.4684017 C11.6534758,11.2094356 11.5599603,10.986437 11.3729292,10.7994059 C11.1858981,10.6123748 10.9628995,10.5188593 10.7039334,10.5188593 L4.07871654,10.5188593 L4.07871654,6.05169352 C4.07871654,5.87904944 4.16503858,5.79272739 4.33768267,5.79272739 L11.4592512,5.79272739 C11.7182174,5.79272739 11.941216,5.7028086 12.1282471,5.52297101 C12.3152782,5.34313342 12.4087937,5.12373156 12.4087937,4.86476543 C12.4087937,4.6057993 12.3152782,4.38280069 12.1282471,4.19576959 C11.941216,4.0087385 11.7182174,3.91522295 11.4592512,3.91522295 Z"})]),Object(c["createElementVNode"])("filter",{id:"48109491091221001025211656",x:"-10.0570244%",y:"-8.78844516%",filterUnits:"userSpaceOnUse",width:"125.142561%",height:"121.971113%"},[Object(c["createElementVNode"])("feGaussianBlur",{stdDeviation:"1",in:"SourceAlpha",result:"1201031101179748101455153"}),Object(c["createElementVNode"])("feOffset",{dx:"1",dy:"1",in:"1201031101179748101455153",result:"113110975101124950122114"}),Object(c["createElementVNode"])("feColorMatrix",{values:"0 0 0 0.09411764705882353 0 0 0 0 0.6 0 0 0 0 0.9098039215686274 0 0 0 0 1.0 0",type:"matrix",in:"113110975101124950122114"})]),Object(c["createElementVNode"])("clipPath",{id:"116995310511811611411712249"},[Object(c["createElementVNode"])("path",{d:"M36.8811736,0 C38.4783933,3.51835451e-15 39.7731957,1.2948024 39.7731957,2.8920221 L39.7731957,42.6222859 C39.7731957,44.2195056 38.4783933,45.514308 36.8811736,45.514308 L2.8920221,45.514308 C1.2948024,45.514308 6.67189726e-15,44.2195056 0,42.6222859 L0,2.8920221 C-6.3969221e-16,1.2948024 1.2948024,-1.03886313e-15 2.8920221,0 L36.8811736,0 Z"})]),Object(c["createElementVNode"])("linearGradient",{id:"1135410501015012010910899",x1:"5.53187308px",y1:"45.514308px",x2:"38.862465px",y2:"0px",gradientUnits:"userSpaceOnUse"},[Object(c["createElementVNode"])("stop",{"stop-color":"#1599D9",offset:"0%"}),Object(c["createElementVNode"])("stop",{"stop-color":"#1C96FF",offset:"100%"})]),Object(c["createElementVNode"])("clipPath",{id:"11211055514954565695104"},[Object(c["createElementVNode"])("path",{d:"M10.4058698,0 C10.6929283,0 10.9401176,0.101676806 11.1474376,0.305030419 C11.3547576,0.508384032 11.4584176,0.750844109 11.4584176,1.03241065 C11.4584176,1.31397719 11.3547576,1.55252662 11.1474376,1.74805894 C10.9401176,1.94359126 10.6929283,2.04135742 10.4058698,2.04135742 L2.51176168,2.04135742 C2.32038936,2.04135742 2.22470321,2.13521294 2.22470321,2.32292396 L2.22470321,7.17994679 L9.56861594,7.17994679 C9.85567441,7.17994679 10.1028637,7.2816236 10.3101837,7.48497721 C10.5175037,7.68833083 10.6211637,7.9307909 10.6211637,8.21235744 C10.6211637,8.49392398 10.5175037,8.73247342 10.3101837,8.92800574 C10.1028637,9.12353806 9.85567441,9.22130422 9.56861594,9.22130422 L2.22470321,9.22130422 L2.22470321,15.4626959 C2.22470321,15.759905 2.11306935,16.014097 1.88980165,16.2252719 C1.66653394,16.4364468 1.403397,16.5420343 1.10039083,16.5420343 C0.797384661,16.5420343 0.538234646,16.4364468 0.322940788,16.2252719 C0.107646929,16.014097 0,15.759905 0,15.4626959 L0,1.10280229 C0,0.805593159 0.107646929,0.547490496 0.322940788,0.328494298 C0.538234646,0.109498099 0.797384661,0 1.10039083,0 L10.4058698,0 Z"})]),Object(c["createElementVNode"])("clipPath",{id:"99971031031051041175097104"},[Object(c["createElementVNode"])("path",{d:"M6.41097268,0 C7.20835734,0 7.91005584,0.09776616 8.51606818,0.29329848 C9.12208053,0.4888308 9.72809287,0.766486695 10.3341052,1.12626616 C10.6530591,1.34526236 10.812536,1.6268289 10.812536,1.97096579 C10.812536,2.20560457 10.7168498,2.42460077 10.5254775,2.62795438 C10.3341052,2.83130799 10.1188114,2.9329848 9.87959595,2.9329848 C9.72011902,2.9329848 9.5446944,2.88605704 9.35332208,2.79220153 C8.79515281,2.51063499 8.33266971,2.31510267 7.96587277,2.20560457 C7.59907582,2.09610647 7.14456657,2.04135742 6.602345,2.04135742 C5.26273876,2.04135742 4.19823024,2.42069012 3.40881943,3.17935552 C2.61940861,3.93802093 2.22470321,4.95869964 2.22470321,6.24139166 C2.22470321,7.52408368 2.61940861,8.54476239 3.40881943,9.30342779 C4.19823024,10.0620932 5.26273876,10.4414259 6.602345,10.4414259 C7.14456657,10.4414259 7.59907582,10.3866768 7.96587277,10.2771787 C8.33266971,10.1676806 8.79515281,9.97214832 9.35332208,9.69058178 C9.5446944,9.59672627 9.72011902,9.54979851 9.87959595,9.54979851 C10.1188114,9.54979851 10.3341052,9.65147532 10.5254775,9.85482893 C10.7168498,10.0581825 10.812536,10.2771787 10.812536,10.5118175 C10.812536,10.8559544 10.6530591,11.137521 10.3341052,11.3565172 C9.72809287,11.7162966 9.12208053,11.9939525 8.51606818,12.1894848 C7.91005584,12.3850172 7.20835734,12.4827833 6.41097268,12.4827833 C5.27868646,12.4827833 4.21816486,12.2325019 3.22940788,11.7319392 C2.22470321,11.2157339 1.43529239,10.4805324 0.861175434,9.52633463 C0.287058478,8.57213691 0,7.47715592 0,6.24139166 C0,4.97434222 0.295032325,3.86371865 0.885096974,2.90952092 C1.45921393,1.98660837 2.22869013,1.27096008 3.19352557,0.762576048 C4.15836101,0.254192016 5.23084338,0 6.41097268,0 Z"})]),Object(c["createElementVNode"])("clipPath",{id:"1071161211041001135511749100"},[Object(c["createElementVNode"])("path",{d:"M33.4170937,39.012264 C33.6325525,39.012264 33.8072163,39.1869279 33.8072163,39.4023867 C33.8072163,39.6178454 33.6325525,39.7925093 33.4170937,39.7925093 L0.39012264,39.7925093 C0.174663855,39.7925093 1.43329237e-14,39.6178454 1.42108547e-14,39.4023867 C1.40887857e-14,39.1869279 0.174663855,39.012264 0.39012264,39.012264 L33.4170937,39.012264 Z M33.4170937,35.761242 C33.6325525,35.761242 33.8072163,35.9359059 33.8072163,36.1513647 C33.8072163,36.3668234 33.6325525,36.5414873 33.4170937,36.5414873 L0.39012264,36.5414873 C0.174663855,36.5414873 1.43329237e-14,36.3668234 1.42108547e-14,36.1513647 C1.40887857e-14,35.9359059 0.174663855,35.761242 0.39012264,35.761242 L33.4170937,35.761242 Z M33.4170937,32.51022 C33.6325525,32.51022 33.8072163,32.6848839 33.8072163,32.9003427 C33.8072163,33.1158014 33.6325525,33.2904653 33.4170937,33.2904653 L0.39012264,33.2904653 C0.174663855,33.2904653 1.43329237e-14,33.1158014 1.42108547e-14,32.9003427 C1.40887857e-14,32.6848839 0.174663855,32.51022 0.39012264,32.51022 L33.4170937,32.51022 Z M9.018,29.259 L20.4403818,29.2613708 C21.2278252,29.6485228 22.0507902,29.9083432 22.9059208,30.0410822 L0.39012264,30.0394433 C0.174663855,30.0394433 1.43329237e-14,29.8647794 1.42108547e-14,29.6493207 C1.40887857e-14,29.4338619 0.174663855,29.259198 0.39012264,29.259198 L5.20389429,29.2600463 C5.718023,29.7595623 6.38089349,30.0277851 7.10500243,30.0277851 C7.82576573,30.0277851 8.48693174,29.7624828 9.00702418,29.27056 L9.018,29.259 Z M33.4170937,29.259198 C33.6325525,29.259198 33.8072163,29.4338619 33.8072163,29.6493207 C33.8072163,29.8647794 33.6325525,30.0394433 33.4170937,30.0394433 L25.7302627,30.0403828 C26.1327193,29.9789465 26.5154259,29.8901411 26.8782359,29.773079 C27.3056312,29.6351781 27.7300823,29.4644485 28.1515269,29.2613979 L33.4170937,29.259198 Z M9.832,26.008 L17.1147613,26.0092683 C17.1860601,26.14672 17.2618302,26.2821536 17.3420787,26.4155287 C17.4188676,26.5431539 17.4988339,26.6678036 17.5819479,26.7894511 L9.832,26.788 L9.832,26.008 Z M4.401,26.008 L4.401,26.788 L0.39012264,26.7884213 C0.174663855,26.7884213 7.13181345e-15,26.6137574 7.10542736e-15,26.3982987 C7.07904127e-15,26.1828399 0.174663855,26.008176 0.39012264,26.008176 L4.401,26.008 Z M33.4170937,26.008176 C33.6325525,26.008176 33.8072163,26.1828399 33.8072163,26.3982987 C33.8072163,26.6137574 33.6325525,26.7884213 33.4170937,26.7884213 L30.2701508,26.7883211 C30.2745141,26.7268404 30.2767178,26.6646946 30.2767178,26.6019318 C30.2767178,26.3978062 30.2511397,26.1993099 30.201982,26.0081116 L33.4170937,26.008176 Z M33.4170937,22.757154 C33.6325525,22.757154 33.8072163,22.9318179 33.8072163,23.1472767 C33.8072163,23.3627354 33.6325525,23.5373993 33.4170937,23.5373993 L21.8952011,23.5385629 C21.8012501,23.308749 21.7391891,23.0499954 21.7094227,22.7572055 L33.4170937,22.757154 Z M4.401,22.757 L4.401,23.537 L0.39012264,23.5373993 C0.174663855,23.5373993 1.43329237e-14,23.3627354 1.42108547e-14,23.1472767 C1.40887857e-14,22.9318179 0.174663855,22.757154 0.39012264,22.757154 L4.401,22.757 Z M9.832,22.757 L16.2681945,22.758323 C16.2803928,23.0226669 16.3040329,23.2825346 16.3391444,23.5377581 L9.832,23.537 L9.832,22.757 Z M33.4170937,19.506132 C33.6325525,19.506132 33.8072163,19.6807959 33.8072163,19.8962547 C33.8072163,20.1117134 33.6325525,20.2863773 33.4170937,20.2863773 L28.9244679,20.2878786 C29.1584801,20.1572036 29.3733991,19.9876187 29.564583,19.7844653 C29.6481809,19.6956336 29.7251644,19.603038 29.79513,19.5070154 L33.4170937,19.506132 Z M4.401,19.506 L4.401,20.286 L0.39012264,20.2863773 C0.174663855,20.2863773 2.63860911e-17,20.1117134 0,19.8962547 C-2.63860911e-17,19.6807959 0.174663855,19.506132 0.39012264,19.506132 L4.401,19.506 Z M24.4636541,19.7036786 C24.8586715,19.7036786 25.1601018,19.7399881 25.3604869,19.7998081 C25.6107291,19.8745117 25.9689129,20.0245955 26.4195399,20.2493492 L26.493,20.286 L22.5108335,20.2861368 C22.9312832,19.9367822 23.487479,19.7411743 24.2343844,19.7085629 L24.4636541,19.7036786 Z M4.401,16.255 L4.401,17.035 L0.39012264,17.0353553 C0.174663855,17.0353553 1.43329237e-14,16.8606914 1.42108547e-14,16.6452326 C1.40887857e-14,16.4297739 0.174663855,16.25511 0.39012264,16.25511 L4.401,16.255 Z M19.0877089,16.2543923 C18.7876916,16.4929014 18.5077773,16.7530896 18.248466,17.0344686 L9.832,17.035 L9.832,16.255 L19.0877089,16.2543923 Z M29.5123785,16.254847 L33.4170937,16.25511 C33.6325525,16.25511 33.8072163,16.4297739 33.8072163,16.6452326 C33.8072163,16.8606914 33.6325525,17.0353553 33.4170937,17.0353553 L30.0605773,17.0353624 C29.9311928,16.7470709 29.7462051,16.484445 29.5123785,16.254847 Z M19.0659018,12.9459546 L19.063,13.004 L33.4170937,13.004088 C33.6325525,13.004088 33.8072163,13.1787519 33.8072163,13.3942106 C33.8072163,13.6096694 33.6325525,13.7843333 33.4170937,13.7843333 L18.9253501,13.7851804 C19.0180834,13.5203286 19.0659018,13.2383895 19.0659018,12.9459546 Z M4.401,13.004 L4.401,13.784 L0.39012264,13.7843333 C0.174663855,13.7843333 1.43329237e-14,13.6096694 1.42108547e-14,13.3942106 C1.40887857e-14,13.1787519 0.174663855,13.004088 0.39012264,13.004088 L4.401,13.004 Z M33.4170937,9.753066 C33.6325525,9.753066 33.8072163,9.92772986 33.8072163,10.1431886 C33.8072163,10.3586474 33.6325525,10.5333113 33.4170937,10.5333113 L17.4153587,10.5335234 C17.1022423,10.4070754 16.7637674,10.341337 16.4104814,10.341337 L7.10500243,10.341337 C6.75033818,10.341337 6.41088073,10.406625 6.09681056,10.532172 L0.39012264,10.5333113 C0.174663855,10.5333113 7.13181345e-15,10.3586474 7.10542736e-15,10.1431886 C7.07904127e-15,9.92772986 0.174663855,9.753066 0.39012264,9.753066 L33.4170937,9.753066 Z M33.4170937,6.502044 C33.6325525,6.502044 33.8072163,6.67670786 33.8072163,6.89216664 C33.8072163,7.10762543 33.6325525,7.28228928 33.4170937,7.28228928 L0.39012264,7.28228928 C0.174663855,7.28228928 1.42372408e-14,7.10762543 1.42108547e-14,6.89216664 C1.41844686e-14,6.67670786 0.174663855,6.502044 0.39012264,6.502044 L33.4170937,6.502044 Z M33.4170937,3.251022 C33.6325525,3.251022 33.8072163,3.42568586 33.8072163,3.64114464 C33.8072163,3.85660343 33.6325525,4.03126728 33.4170937,4.03126728 L0.39012264,4.03126728 C0.174663855,4.03126728 1.42372408e-14,3.85660343 1.42108547e-14,3.64114464 C1.41844686e-14,3.42568586 0.174663855,3.251022 0.39012264,3.251022 L33.4170937,3.251022 Z M33.4170937,0 C33.6325525,2.73597842e-15 33.8072163,0.174663855 33.8072163,0.39012264 C33.8072163,0.605581425 33.6325525,0.78024528 33.4170937,0.78024528 L0.39012264,0.78024528 C0.174663855,0.78024528 1.42372408e-14,0.605581425 1.42108547e-14,0.39012264 C1.41844686e-14,0.174663855 0.174663855,3.95791367e-17 0.39012264,0 L33.4170937,0 Z"})])]),Object(c["createElementVNode"])("g",{transform:"translate(-69.0 -70.0)"},[Object(c["createElementVNode"])("g",{"clip-path":"url(#10910911211111355521089995)"},[Object(c["createElementVNode"])("g",{transform:"translate(70.88649839612333 70.21254090036508) rotate(2.0)"},[Object(c["createElementVNode"])("g",{transform:"translate(7.552577486285102 0.0)"},[Object(c["createElementVNode"])("g",{transform:"translate(8.505264770349575 11.774721389520693)"},[Object(c["createElementVNode"])("g",{transform:"translate(0.08497514808244233 0.0)"},[Object(c["createElementVNode"])("text",{transform:"translate(0.0 19.0)","font-family":"MaoKenTangYuan-beta, MaoKenTangYuan (beta)","font-size":"22.09844305416875","font-weight":"normal",fill:"#FFFFFF","text-anchor":"left"},"Fc")])]),Object(c["createElementVNode"])("path",{d:"M35.5554004,2 C35.8017255,2 36.024731,2.09984297 36.1861553,2.26126722 C36.3475795,2.42269147 36.4474225,2.645697 36.4474225,2.8920221 L36.4474225,42.6222859 C36.4474225,42.868611 36.3475795,43.0916165 36.1861553,43.2530408 C36.024731,43.414465 35.8017255,43.514308 35.5554004,43.514308 L2.8920221,43.514308 C2.645697,43.514308 2.42269147,43.414465 2.26126722,43.2530408 C2.09984297,43.0916165 2,42.868611 2,42.6222859 L2,2.8920221 C2,2.645697 2.09984297,2.42269147 2.26126722,2.26126722 C2.42269147,2.09984297 2.645697,2 2.8920221,2 Z",stroke:"none",fill:"#000000",filter:"url(#104106489998559712197112)"}),Object(c["createElementVNode"])("g",{"clip-path":"url(#12251106104121101109106107109)"},[Object(c["createElementVNode"])("polygon",{points:"4.54747351e-13,0 38.4474225,0 38.4474225,45.514308 4.54747351e-13,45.514308 4.54747351e-13,0",stroke:"none",fill:"#15D9B4"}),Object(c["createElementVNode"])("g",{transform:"translate(-6.628588771465857 11.10450350534563)"},[Object(c["createElementVNode"])("image",{x:"-14px",y:"-54px",width:"64px",height:"68px",transform:"scale(1.0 -1.0)","xlink:href":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABFCAYAAAAVZotTAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQaADAAQAAAABAAAARQAAAAAJFwaDAAAVf0lEQVR4Ae2b2W4dx3aGV1X3HjiJpm3KsY+DCAJyEMiXvg1gv4TyCHkNHj6PXkK5TSCcK+viIBDsY9mCxGNr4LCn7qp8/6puklsiZW5KuWNRtau6u6b115pqkNlNuEHgBoEbBG4QuEHgBoEbBC5GIFz8+ppvs51rLy81svy09OkPH84a7XLBPqS5d/o7a/+dT1d84YSXMel33/bPtbnnjfxgD869W273/vLj6dOD05zZN3afpvdP3+zZnndYGuX3A0G5dHCnPV6W6Yg/I3zPemK/sV1v91f7G+m3/Jk9syfX6utLu0sXj6j/Zyf8nh14+vgcMAKlNM7vNQC51sAslz7/4rNeiBfhIvor2wm/2WY4tOfhjt2x13YQtm3ttJ8jG57mv7gMYHtut2wnP+P7LZs40Tt2nA/ti/xPdpRfngLzLN+ze/mxPfYyBQyaXxGI0wFdOp63PwCAehTb/2D3QiF+K4zsRfwMYl/bKFR2GDch9jebxHU7CjMbhE/sE5vasfc3tpOu31td62+WehnZuhM1tkVet808I90gTm2WT2yaKxunN4ByzzbSS3sJWH8mf+BgnHJF8GEutXvZw2ogdCIgDugBMDuIP9puHNpRrG0zVhDeWKo+sXk8snEcWRWCNXFg09BYHdYZycKi97t24agmNrCRgzC0Ji+she3qNCIfSRcW2spGqbKjVNtaGto/0k+A8Z3tpoNrArEiCDm8DYABwJHNq5m11QbEH1usx5YrATE0ELA6mrUea4hviZU13u/oLRAobzVE63VrKdfEYFUyiynaAoKt5aFtiQ1xo0tnpEwAQP2cdmwnSTxWEY2rgwAXZCzTviTOHkLUQXwNkQwAYgd1ZTXUxrq1xUBpsNDFpk6AAnlwCUxhCa6gkrXka/760MABel8BwoJcZLYT+chPgMg5SNZNtNzAHc3YqgXAN7UtmpFtNo3FdmZVex0gzsbQj+XSVAAUMdixu2HO6D6H5Yd2AuGjAaw+YBaH0QZMWB4uiLWFQTASawBJQATAC7EFgADJkdSnnT5rAM4WMxzE+5gHFph0xQYwYCxitAA6aTG2tfnMmgXv54jOPNsMvTNHL23bzP7ZXtrPhsJMjFetwk3g/Z6wAghqZQ+b/RCF98LZG+ThgroWAIjAqLF2nIyxWBzT7SgYEwMY4gqogVMERIYjkBIHwtmqGx4wkQMMmZ5Mef7BNswuhDDjYb6A8Brma2w+oxwxwokZzqpitHWAQC3bsSESKEmZ6eJP0LBw6PHu+jtLrgaCi4LZf+D0dFwgBYcinImwWhwgABj7GgNeR+7XIEn5MT2PmEFEJDm3gx5A+NTABUFTLY7wEeoD5QUCxAuEkBg7HIBCsDynnRnP02RpStEJeqOi0ZhsETYQo9aG1N3KT7EiiCvc8CDv22PafD83XA0EepQoGM1+hdPzq61hASZVZZvMhLiggf3bMWwMNmGDgaKzZOfiOlMAV6CzLCIamAcGzrfIwKCtnxy+EHInCtRPEI32T+hAzAJiwLsZFSA+TyqLx6TSQWoDGRsAY8jZ6jzHj/jcPk//hg792X6OEgtv+j3ccEUQNNh9RGFXtj/cgp2PXbYzWmwxmCMCyLhYH68oA4JtQcQm1AJGXic/hjPQFRGxkMKUSMhMZmnKLqgP+KrMGgMXEJgcB8BQQQi+xQkgHkPPAKWJLmolWkDnMw1oJyA8gIvaFgCyxEKNawLfxw1XBEFN7REf2iEO0bG9iWu2wTTMXdaziSvRVxbWIHKD6dmEiFvkN2FhniUaNoJ9hwAj9S+7h6l0iyNtKfnwASvNmElmGfOBRS2mYkbZKYQAQkDHpAFcBgD0YAnCM2KTWvkQ6yjQqR1hQnfSsR3HO3YnyVzSzqVhBRDMfrUtdMITnJ5NxjpHFnMFkbSRhswORIoTAjrBuWCLQQOECuP4ObcY3KDy0gsZkRAIfC30iw945XwrXcCMBhwK/CVLWIAw4fsJddEvws/LiTi6EGAtumOI2ZxgQtcwqQ1+xEaLAxUfoBvwHVRFaOt3KVwZBC2OUIroXq0DBmHNTiBiLO8Q9pa5z8xyhVi4MpQ+kG6AI9BURU/AKShvZJkUIqCZIRUuoIVuhOQEBFFcgK4DBIBFFGRtxAWyMIl6wtC/y/NCXKo5hM9bGyyGNlvAnXDEdnyFbvi9rF1o1IGjr+VwZRBU7SVcsGNrto5+O0Hpj5BJRoKClAkMAzhD5hBCce7hiqIo04a4gXJYjDDkfW8lqCvrkFwvaIA8i3qlVJGVFJFFKfIebhOApTh55xLKAkBCaYbZ3CJpnFGpppPqlR1UW/Yn7PTfwn+6OIuKd8NKIKj6hIVRxUIIk8hoInohQEyFnCsmmUyxPGAY5jG7noAYiQn6QrNpyDOLAFeOWoyJP0V6ScnpHzF0ipGVk4uAdImvimRW5D7DIXFOrakUJvoG68Tw0Bf4DfUEnbqF3sJaxGfoB0Qi3Pfl90cAQU3M4YQhml3rAPw71LzrBtg01JotIhMhb1E6II34IH2BhfCVERyDd4M4wD2+kuIZCEqgLRAIzucdsQAbXJEKJgIAyHOUtcgQzSrKYzihvERycIL/gvWpcOFR4OvhU6zZY/vv4GZeTXQNkfOwIid8Q6WnXdV1bPMcbgiSa8AQQYmOI+6gzJfJVQaIoDzKDNtFpDL5LPHhlZtIp18/RGTAH5lt5waqugJ1sNQNlToATDrGI6DjkFXyVRC3RJ9DQIu45xVcMI0T+51Gv6P4fxHfDbR59XBkP/kIVaNhIuiI2AoAYqZTsasGLRHB32UGcfrhDM1k4FlioOjAAM5laR5031iThC4aXmmAUMM9t5FSluSKQ4DnmykdYCbrGf7IHO5845wwwK/ZCF/6LtceIxcrLIcVOUEu22tmX+KgSVDQ0senTwChK5LcOGaOYgBC6oDwDhHQpyQ/wYFitpUWF4kUIMmzeEYcqKwG3HrQrp7lN5wTMylhKUttVWlhmtE1FQAnX6xhJfAjTuIJlgyZJHzbbf9pv3I5rAxCX13CKN7GsZFy03j1iZ/CXHohcJQqilukNMQ9lCAmABInFcLhEgdDtRFZvmc5TGpTokFViZlSmWNmge5p38WLGtI/zmFMENzXYLFaLaxQHkdhiol8g2XzxvjxjB66cE0QtC02RycsRFRHdt+4L4og3CeTb+pS8w0POHE+83wvfxDvsy1dpbIqV4DwvD/yvnstHLUElbsepVzFVf4OMdTS1PMLmG5IxLOi7QruHIRNGY5LwjVBKK3JoVcDmkUN3efNmboAIjKk+RUKGHpfCC2pFKNAOf9egIlm1SlAdoDyUs8qLtwkZrJKkTQBgKfoJXenIVwcJ31aO3LeID+l5f6ppNcC4ZC62itU0H4Q22VOrIRNsXTUd1dIElAld/a1z4kLlktT2Ms7IC5W/kgTlPMIAJ6lTUytmEDgRL7J94ge2XtQXV99/cTyz9AKF4VrgVAa0jYpK1pCAwzqTKHMK0N0wjTHyokPlBYgLgJKdd8Oouys3bM8rztiBav+tAhXKHnVU9QedmZnG3c6HKG75MNfFK4NgiSsJ6abhlPWV0civAR9Vehh0LfyridQ6UXvVKp8K0SV8vqNYgMcCeVVShAUALAQvMRD4A1mky/r7nxt29e8/+icQA9aDxHUmTothEvf94PvZ6kQrYFquPquUPICpy+v9OxZT7TZfZbz5B4UK0xxuTxLJIFmeCbVWkOmVQBpDaJ8jesq3+r94dqc0DerLjTnPhrSMuKeC/QsogoX9ASqrIL0hN7p+Sw9A0evS1kRVUDwohDNc98lIAgIedYtqXan9a0FgDE7TcP8xk7sFyreI14UPggEWQeRW5Se9IL+9KaX0dKlRqv3JT0DTM/4Dx2AfervfCZLewUA2LwnXHv1dBm07SYm1B5kg5PE+5pteXGF78uxAEuZlS5gfMZa5GJRoKxbOKVXDgeU3CFKJ3BqwBZ5A4EFDBIRpVlTliDCCnsXgs9mXMCdBwE3uXv2Nvp6AkPnDkQdQvhOUweATnDovkgjgPiWPGkGjAaO0GnVILEHCjfM8xd2Nz+wb/uBaXCn4VqcIK0rV5SDF9cFsKJWfZBRCJNsQqB3KEKVeRsM7Dnv8Dc74s+l1FX9IvPkaSIBQPStd5piae2rSFItpdOcMtqIJVZIZwtXRO0sse1WFGhtXzKE36h6cTgT3ou/L73dtH9hs2CbnQ0Ad16Q11gA0KDpXFwAIEUxFWIkoAUUgHKwRLBAU7ku9WcWSN2z19FWMzEnHB9OmIwYFiyQFqRzIucPmbOIyG5S1jP5zPYa+2qstdhgaSc2T698rD/aIztkzPtL9PQP1+IEVZ6xNTB0YjM8Ce2AgSboTJdrJr08jeKMEgWIg9KxvwjvRaGA1ZVFpoMOJplZp0T7jERnQB0sEKO24NlUCeQzHKGNlswZhfRF1c4RBzaE2YX+heL98a/4dTmsxAnLVTUaDsOcA8QFDQQHZk47QiWKhUsefnYQRKTKOjgq54Awwu6dRMAPIFUPAIIA0M6SiFdkx9k4fLFJH/VMn7wPMxSh7zFyBICyrNmuHxIX+X85i+AwhrhHsVOFdUrOipwgDbuNQtxg0Lo8sY7ymbG0ixCv7QJxdYYAcXKEgOyESFlR2CPvlWLoNRpyp6GIEG+kBNWWlJwsMEYo+nY77+k0nPCeaIoOBmZR7wEjzQauG2IzYTwj8PpVh1coRZbSxIvDSiCwaW13mZBDbC8dQnximSvT5YNm4AkA5DsFzR5EeKo80fPaVIH7fDrEOZ0nVJ5pXgMVAIoAwPFimX0ZI0UWhhlfPRBLikk8YSyIxWDKoQt6gWNqJmDgXKDNLInCEto8LoeVQBiD6D8AYYNbIhzFY4ZappyFWzdzKEZgT8ilyy7smzs2jshsOTDReBiZBkbiq8F+RDzL6dHmiYD0rXY/dmM1CaF2RHli7mI84v0xYqO9RQ5lWvposRbr6IbYsKHSPncpvE27Tzog3tUH6vzKOqHcIFOVp6wbt9jhbCXPYnddmEAju0KCaG15Sz4lu0FsCssmyaxmUimEuQyj0Pxs0WebvKcQyXeuu5zNNkRz/6fENyyPieUZkI8FECm7zRFxWOekaoo+mKILJCm7RFmFbjfpAn1A21cHQYW3aHBku7ihDZZhiOmS3iqzxuAAAN8EwugLggMXk3yADFLsGzhDLLIMoWJrKRUvRx09e3mGdAQn+WyLWOwG0d7w7nWJmbwWiPmIbTjKxWPWLRzStgCQ5lM4kSN7Lm6wwe269Hu62aeLywPtXSH4lYH98L19xxb2BA34p/rQnrHDG8cDG3Dg2nDKVHHkVm3D0Tsgg1OZOQ2Nn6ActwFhi+cNOEQ3skZwiLbGtAGLLPnZg6yDLEhnDiU+WYco4iTAc/X+hjwxv6bN17QNKLosY4fsMh9xOHsytLXJ3Gazsd2aP7d1GPQpTXyviaIJSP0wTihY7WJm/s54frO/oxd0eWKDjiQKlbw2Bt7o7oC0NjMU4EPNGhfazBi4p6/4xnP2KIL4zjs9h1cqp2e+K/8SkdBe+Uu4gWivoEFRxMtppX2dUC8mXOCYIqKzKSLJDReUIqrC/kpX57jgEgBo54prBzWQ9yj+IEg5IhaJO2Y4IpP2BK0/sBqPLUkM2PCM3FzRot53ltF+CSsQZe4QlyDHRlfTnBMgHI6Xf+VLY2YtSCmi3IpPQIe664eoRAx9AtgK3cAVSQAgPeIUDMCH6AObcXtu0dqsGdpO+9ReAIL0gTgA30Bc8J6wknWQcjywhxni0QnzxDIVk9jizjZwQuLGSiVnwbfceebPbT8cIwAynAKGHJQIBMaEOPgplIZHVsfrp86RzhbhKtcbgCCdwjk7hGMOuQwpXdCe0AjiMsM01uiCdjGy2826cSjulkcWYZ/snjAgf3l4P0Tn63V64T4XOJ/YXXZzn3A89hV2P3Jhq/HT6BnnjVzd0aUMDmGrDQj3CBhsSeqOgo7vy1Ec3AG3ZO2K+I4IzwJLniLOkVxg+Qi58wy1cSwzGQCgIr9AoQ75NsMi1IhB4iS6WXAjpPnRtuji244LRDwk/gEIK3CC8MpZ25WFGzbTC3vJam2X3dw2smzlZGTK8k7rS7nQC2Z2gKLTSq+Vq+tcwIh0YAIXaNtcR3facaa460W5uwZbu0igGDPnjZU0/5R9TMym+wMQL59A7nI9HwEAihkA7gDA/5wjvpv9PwBA83x1TlDpt7jhNuf/v8ARXMYDTN1dGug8kAPYpKOyMcTopFjH9IhAxV5c4qisPyg55QQajlgHLZfLggmu8JUhz3CDFG7S/QR8jIr8AnAadNBgPkYEkBM3h9u23f7guuD7Hgiq+mazRv7esCIIAo05oPn7xCf2KKIkq9+50doDgfJCVCUiJ5jCmlmviJGoG249AOKEck6gxmRiUKiYyBaRqOEerZwjIiF3uyWt0CmVrwuSDX3JzHXh5hhOW7PfuZFykH5wRahF0mMiyvCKAKj/FcTBRwoXO/d0YnHIOmKr/ZSbTADBYnWiozPEYAtiKm6Y+uYHV+9Yzfp5ofdHXueRC5hERwjYFpYJcA0g6IpOg4WQgsxYlIHuLcLumX0EXeVLrAtmzSbfD2kfANJn9PXIZ0YcsM8g/9gaiPDzYTVO6Gt2YvEXNO9DrvgCRLjNBc8XfjFiU8+cBb7CWqxVE47hobaGTB2boUgrHKRU6Z4zS96uf3LIGsdn2g3iAlbDpccxd4/muOSy+zggLI3HmNrXuMPyBsf2Km3b7fRoSQlqgDR5BT3Qk9LVOP94xbxzg4uFt3Ef/+EJvs3U/j3sAgYgxLFNqylLgKltcOu1Yd9ryAHpG0zoAIugi97Sgf3JNnwCCJg5FmbaFhtgfiv8/znLw7rl7nR7RvwuIPw1n7G/rwvKYFYQgfOUriYOfU1HGsSdI4wNTP4fCpcmD+wFnswWxKwlOVRTLkgw+RAxwXe4zcyvYUVmbhY3sCZl8YnnQ7ssg9kVXgeEljXyDLGY4UWtsRg5Rky2mPWvIX6ed+1pelgWRBC+rxF9EABqgIF8YLiAKw4wmxKRKcfhM27wfc3R+CF3h+AGOGDop8TqtdW6iFDZLScE3QAIn+rAJD+HYK4NEydZbK/F20N3gx9Qo1N+qnwN9vdq534+HIS+scIV3dM+7d6TBcGnKIDog+4JzPy2y79iEZ6+07cIVrkR65POPYdwBWl9sf0+eSk+BaqvKPul3ru/7wzk3SIrvlniDIGhsEfU7bECit5cFnaZbW6adZ/fJlyvPx7x/Rg+Pgh9y0qXAOk/9MD0zxel/Wz33z4+4X3LSv9/QTjfU593YM4e+tzpUD4Si5+1e5O7QeAGgRUQ+D9/ylovbi364QAAAABJRU5ErkJggg=="})]),Object(c["createElementVNode"])("g",{transform:"translate(9.674135661700834 -5.831263514332488)"},[Object(c["createElementVNode"])("image",{x:"-13px",y:"-35px",width:"63px",height:"48px",transform:"scale(1.0 -1.0)","xlink:href":"data:image/png;base64,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",opacity:"23.4808059%"})])]),Object(c["createElementVNode"])("g",{transform:"translate(3.0491975747738422 2.8563610001774755)"},[Object(c["createElementVNode"])("g",{"clip-path":"url(#109114106101120501221195451)"},[Object(c["createElementVNode"])("polygon",{points:"4.54747351e-13,0 32.6140205,0 32.6140205,39.7925093 4.54747351e-13,39.7925093 4.54747351e-13,0",stroke:"none",fill:"rgba(255, 255, 255, 0.323907)"})])]),Object(c["createElementVNode"])("g",{transform:"translate(8.313637900593676 11.7130532738862)"},[Object(c["createElementVNode"])("g",{"clip-path":"url(#5399112495657099106120)"},[Object(c["createElementVNode"])("polygon",{points:"2.07172904,3.91522295 22.5224878,3.91522295 22.5224878,19.2373856 2.07172904,19.2373856 2.07172904,3.91522295",stroke:"none",fill:"#FFFFFF"})]),Object(c["createElementVNode"])("g",{"clip-path":"url(#1024511854541210110121103)"},[Object(c["createElementVNode"])("path",{d:"M3.06443253,19.1294831 C2.7910794,19.1294831 2.55729053,19.0323708 2.36306593,18.8381462 C2.16884133,18.6439216 2.07172904,18.4101327 2.07172904,18.1367796 L2.07172904,4.92950696 C2.07172904,4.65615382 2.16884133,4.41876821 2.36306593,4.21735011 C2.55729053,4.015932 2.7910794,3.91522295 3.06443253,3.91522295 L11.4592512,3.91522295 C11.7182174,3.91522295 11.941216,4.0087385 12.1282471,4.19576959 C12.3152782,4.38280069 12.4087937,4.6057993 12.4087937,4.86476543 C12.4087937,5.12373156 12.3152782,5.34313342 12.1282471,5.52297101 C11.941216,5.7028086 11.7182174,5.79272739 11.4592512,5.79272739 L4.33768267,5.79272739 C4.16503858,5.79272739 4.07871654,5.87904944 4.07871654,6.05169352 L4.07871654,10.5188593 L10.7039334,10.5188593 C10.9628995,10.5188593 11.1858981,10.6123748 11.3729292,10.7994059 C11.5599603,10.986437 11.6534758,11.2094356 11.6534758,11.4684017 C11.6534758,11.7273679 11.5599603,11.9467697 11.3729292,12.1266073 C11.1858981,12.3064449 10.9628995,12.3963637 10.7039334,12.3963637 L4.07871654,12.3963637 L4.07871654,18.1367796 C4.07871654,18.4101327 3.97800749,18.6439216 3.77658939,18.8381462 C3.57517129,19.0323708 3.33778567,19.1294831 3.06443253,19.1294831 Z M15.6814659,18.5468093 C14.7750844,18.072038 14.0629276,17.3958487 13.5449953,16.5182413 C13.0270631,15.6406338 12.7680969,14.6335433 12.7680969,13.4969697 C12.7680969,12.3316222 13.0342566,11.3101447 13.5665758,10.4325372 C14.0845081,9.58370379 14.7786812,8.92549821 15.6490951,8.45792048 C16.5195091,7.99034274 17.4870353,7.75655388 18.5516738,7.75655388 C19.2710242,7.75655388 19.9040525,7.84647267 20.4507588,8.02631026 C20.997465,8.20614785 21.5441713,8.46151723 22.0908776,8.79241839 C22.3786177,8.99383649 22.5224878,9.25280262 22.5224878,9.56931678 C22.5224878,9.78512189 22.4361658,9.98653999 22.2635217,10.1735711 C22.0908776,10.3606022 21.896653,10.4541177 21.6808479,10.4541177 C21.5369778,10.4541177 21.3787207,10.4109567 21.2060766,10.3246347 C20.7025314,10.0656685 20.2853082,9.88583094 19.954407,9.78512189 C19.6235059,9.68441284 19.2134762,9.63405831 18.7243179,9.63405831 C17.5158093,9.63405831 16.5554766,9.98294324 15.8433197,10.6807131 C15.1311629,11.3784829 14.7750844,12.3172352 14.7750844,13.4969697 C14.7750844,14.6767043 15.1311629,15.6154566 15.8433197,16.3132264 C16.5554766,17.0109963 17.5158093,17.3598812 18.7243179,17.3598812 C19.2134762,17.3598812 19.6235059,17.3095267 19.954407,17.2088176 C20.2853082,17.1081086 20.7025314,16.928271 21.2060766,16.6693048 C21.3787207,16.5829828 21.5369778,16.5398218 21.6808479,16.5398218 C21.896653,16.5398218 22.0908776,16.6333373 22.2635217,16.8203684 C22.4361658,17.0073995 22.5224878,17.2088176 22.5224878,17.4246227 C22.5224878,17.7411369 22.3786177,18.000103 22.0908776,18.2015211 C21.5441713,18.5324223 20.997465,18.7877916 20.4507588,18.9676292 C19.9040525,19.1474668 19.2710242,19.2373856 18.5516738,19.2373856 C17.5301963,19.2373856 16.5734603,19.0071935 15.6814659,18.5468093 Z",stroke:"#3CFBCF","stroke-width":"2.8920221",fill:"none","stroke-miterlimit":"5"})])])]),Object(c["createElementVNode"])("g",{transform:"translate(0.02473429089858925 4.617845277710796) rotate(-4.0)"},[Object(c["createElementVNode"])("g",{transform:"translate(8.77528857764526 11.74914203594166)"},[Object(c["createElementVNode"])("g",{transform:""},[Object(c["createElementVNode"])("g",{transform:"translate(0.08497514808244588 -2.842170943040401e-14)"},[Object(c["createElementVNode"])("text",{transform:"translate(0.0 19.0)","font-family":"MaoKenTangYuan-beta, MaoKenTangYuan (beta)","font-size":"22.09844305416875","font-weight":"normal",fill:"#FFFFFF","text-anchor":"left"},"Fc")])])]),Object(c["createElementVNode"])("g",{transform:""},[Object(c["createElementVNode"])("path",{d:"M36.8811736,2 C37.1274987,2 37.3505042,2.09984297 37.5119285,2.26126722 C37.6733527,2.42269147 37.7731957,2.645697 37.7731957,2.8920221 L37.7731957,42.6222859 C37.7731957,42.868611 37.6733527,43.0916165 37.5119285,43.2530408 C37.3505042,43.414465 37.1274987,43.514308 36.8811736,43.514308 L2.8920221,43.514308 C2.645697,43.514308 2.42269147,43.414465 2.26126722,43.2530408 C2.09984297,43.0916165 2,42.868611 2,42.6222859 L2,2.8920221 C2,2.645697 2.09984297,2.42269147 2.26126722,2.26126722 C2.42269147,2.09984297 2.645697,2 2.8920221,2 Z",stroke:"none",fill:"#000000",filter:"url(#48109491091221001025211656)"}),Object(c["createElementVNode"])("g",{"clip-path":"url(#116995310511811611411712249)"},[Object(c["createElementVNode"])("polygon",{points:"-4.54747351e-13,0 39.7731957,0 39.7731957,45.514308 -4.54747351e-13,45.514308 -4.54747351e-13,0",stroke:"none",fill:"url(#1135410501015012010910899)"})])]),Object(c["createElementVNode"])("g",{transform:"translate(9.190972988500762 14.65128915858139)"},[Object(c["createElementVNode"])("g",{"clip-path":"url(#11211055514954565695104)"},[Object(c["createElementVNode"])("polygon",{points:"0,-1.42108547e-14 11.4584176,-1.42108547e-14 11.4584176,16.5420343 0,16.5420343 0,-1.42108547e-14",stroke:"none",fill:"#FFFFFF"})]),Object(c["createElementVNode"])("g",{transform:"translate(11.85669755051606 4.176570357211289)"},[Object(c["createElementVNode"])("g",{"clip-path":"url(#99971031031051041175097104)"},[Object(c["createElementVNode"])("polygon",{points:"0,0 10.812536,0 10.812536,12.4827833 0,12.4827833 0,0",stroke:"none",fill:"#FFFFFF"})])])]),Object(c["createElementVNode"])("g",{transform:"translate(3.186361394234229 2.7377452406648572)"},[Object(c["createElementVNode"])("g",{"clip-path":"url(#1071161211041001135511749100)"},[Object(c["createElementVNode"])("polygon",{points:"0,0 33.8072163,0 33.8072163,39.7925093 0,39.7925093 0,0",stroke:"none",fill:"rgba(255, 255, 255, 0.323907)"})])])])])])])],-1)),ye=Ne(()=>Object(c["createElementVNode"])("span",{class:"cf-manage-title"},"友链朋友圈管理面板",-1));function Be(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-input"),i=Object(c["resolveComponent"])("el-button");return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",null,[Ee,ye,Object(c["createVNode"])(r,{class:"cf-manage-input",size:"large",onKeyup:Object(c["withKeys"])(n.login,["enter"]),modelValue:l.password,"onUpdate:modelValue":t[0]||(t[0]=e=>l.password=e),type:"password",clearable:"","show-password":"",placeholder:"请输入密码"},null,8,["onKeyup","modelValue"]),Object(c["createVNode"])(i,{onClick:n.login,class:"cf-manage-login-btn",round:""},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("立即登录")]),_:1},8,["onClick"])])}function Le(e){return{headers:{Authorization:e}}}function Ie(){return localStorage.getItem("fcircle-token")?"Bearer "+localStorage.getItem("fcircle-token"):""}var Me=a("3ef4"),Se={name:"ManagePanelLogin",emits:["login_success"],data(){return{password:""}},methods:{login(){let e={password:this.password};this.$axios.post(this.Config.private_api_url+"login",e).then(e=>{let t=e.data;200===t.code?(localStorage.setItem("fcircle-token",t.token),this.$emit("login_success"),this.$message.success({title:"成功",message:"登录成功"})):this.$message.error({title:"错误",message:"密码错误"})}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})}},created(){let e=Ie();if(e){let t=Le(e);this.$axios.get(this.Config.private_api_url+"login_with_token",t).then(e=>{let t=e.data;200===t.code&&this.$emit("login_success")}).catch(e=>{})}},props:["Config"]};a("5974");const Te=v()(Se,[["render",Be],["__scopeId","data-v-735984d8"]]);var De=Te;const Fe=e=>(Object(c["pushScopeId"])("data-v-668b627c"),e=e(),Object(c["popScopeId"])(),e),Pe={class:"ManagePanelMain"},Re={class:"cf-manage-top"},Ye=Fe(()=>Object(c["createElementVNode"])("span",{class:"cf-manage-title"},"友链朋友圈管理面板",-1));function Qe(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-button"),i=Object(c["resolveComponent"])("ManagePanelMain_settings"),s=Object(c["resolveComponent"])("el-tab-pane"),d=Object(c["resolveComponent"])("ManagePanelMain_envs"),p=Object(c["resolveComponent"])("ManagePanelMain_links"),b=Object(c["resolveComponent"])("ManagePanelMain_switchdb"),m=Object(c["resolveComponent"])("ManagePanelMain_status"),f=Object(c["resolveComponent"])("ManagePanelMain_about"),u=Object(c["resolveComponent"])("el-tabs");return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",Pe,[Object(c["createElementVNode"])("div",Re,[Ye,Object(c["createVNode"])(r,{onClick:n.logout,class:"cf-manage-exit-btn",round:""},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("退出登录")]),_:1},8,["onClick"])]),Object(c["createVNode"])(u,{modelValue:l.current_tab,"onUpdate:modelValue":t[0]||(t[0]=e=>l.current_tab=e),type:"card",class:"cf-manage-tabs-area"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{label:"配置管理",name:"settings"},{default:Object(c["withCtx"])(()=>[null!==l.current_settings?(Object(c["openBlock"])(),Object(c["createBlock"])(i,{Config:a.Config,current_settings:l.current_settings,key:l.component_keys.settings,onRefresh:n.refresh_component},null,8,["Config","current_settings","onRefresh"])):Object(c["createCommentVNode"])("",!0)]),_:1}),Object(c["createVNode"])(s,{label:"环境变量管理",name:"envs"},{default:Object(c["withCtx"])(()=>[null!==l.current_settings?(Object(c["openBlock"])(),Object(c["createBlock"])(d,{Config:a.Config,current_settings:l.current_settings,key:l.component_keys.envs,onRefresh:n.refresh_component},null,8,["Config","current_settings","onRefresh"])):Object(c["createCommentVNode"])("",!0)]),_:1}),Object(c["createVNode"])(s,{label:"自定义友链管理",name:"links"},{default:Object(c["withCtx"])(()=>[null!==l.current_settings?(Object(c["openBlock"])(),Object(c["createBlock"])(p,{Config:a.Config,current_settings:l.current_settings,key:l.component_keys.links,onRefresh:n.refresh_component},null,8,["Config","current_settings","onRefresh"])):Object(c["createCommentVNode"])("",!0)]),_:1}),Object(c["createVNode"])(s,{label:"数据库管理",name:"switchsb"},{default:Object(c["withCtx"])(()=>[null!==l.current_settings?(Object(c["openBlock"])(),Object(c["createBlock"])(b,{Config:a.Config,current_settings:l.current_settings,key:l.component_keys.switchdb,onRefresh:n.refresh_component},null,8,["Config","current_settings","onRefresh"])):Object(c["createCommentVNode"])("",!0)]),_:1}),Object(c["createVNode"])(s,{label:"状态监控",name:"status"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(),Object(c["createBlock"])(m,{Config:a.Config,key:l.component_keys.status},null,8,["Config"]))]),_:1}),Object(c["createVNode"])(s,{label:"关于",name:"about"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f)]),_:1})]),_:1},8,["modelValue"])])}const Ke={class:"item-col"},ze={class:"item-col"};function Ue(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-input"),i=Object(c["resolveComponent"])("el-tooltip"),s=Object(c["resolveComponent"])("el-form-item"),d=Object(c["resolveComponent"])("el-option"),p=Object(c["resolveComponent"])("el-option-group"),b=Object(c["resolveComponent"])("el-select"),m=Object(c["resolveComponent"])("Plus"),f=Object(c["resolveComponent"])("el-icon"),u=Object(c["resolveComponent"])("el-button"),h=Object(c["resolveComponent"])("Minus"),g=Object(c["resolveComponent"])("el-col"),O=Object(c["resolveComponent"])("el-row"),C=Object(c["resolveComponent"])("el-switch"),j=Object(c["resolveComponent"])("el-form");return Object(c["openBlock"])(),Object(c["createBlock"])(j,{model:l.form,"label-width":"120px"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.form.LINK,(e,t)=>(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",{key:t,class:"settings-item"},[Object(c["createElementVNode"])("div",Ke,[Object(c["createVNode"])(s,{label:"link"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{content:"爬取起始页面，填写你的友链页地址",placement:"left","hide-after":50,effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(r,{modelValue:l.form.LINK[t].link,"onUpdate:modelValue":e=>l.form.LINK[t].link=e,placeholder:"示例：https://example.com/link/"},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024)]),Object(c["createElementVNode"])("div",ze,[Object(c["createVNode"])(s,{label:"theme"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{content:"爬取起始页面的主题",placement:"left","hide-after":50,effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,{modelValue:l.form.LINK[t].theme,"onUpdate:modelValue":e=>l.form.LINK[t].theme=e,placeholder:"Select"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.theme_options,e=>(Object(c["openBlock"])(),Object(c["createBlock"])(p,{key:e.label,label:e.label},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(e.options,e=>(Object(c["openBlock"])(),Object(c["createBlock"])(d,{key:e.value,value:e.value},null,8,["value"]))),128))]),_:2},1032,["label"]))),128))]),_:2},1032,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024),0===t?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:0,circle:"",class:"cf-manage-main-add-btn",onClick:n.add_link},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(m)]),_:1})]),_:1},8,["onClick"])):Object(c["createCommentVNode"])("",!0),0!==t?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:1,circle:"",class:"cf-manage-main-add-btn",onClick:e=>n.del_link(t)},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(h)]),_:1})]),_:2},1032,["onClick"])):Object(c["createCommentVNode"])("",!0)])]))),128)),(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.form.BLOCK_SITE,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(O,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(g,{span:22,xs:15,sm:17,md:17,lg:12,xl:12},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{label:"BLOCK_SITE"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{content:"屏蔽站点，支持正则表达式",placement:"left",effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(r,{placeholder:"非必填，示例：https://example.com/",modelValue:l.form.BLOCK_SITE[t],"onUpdate:modelValue":e=>l.form.BLOCK_SITE[t]=e},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024)]),_:2},1024),Object(c["createVNode"])(g,{span:2},{default:Object(c["withCtx"])(()=>[0===t?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:0,circle:"",class:"cf-manage-main-add-btn",onClick:n.add_blocksite},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(m)]),_:1})]),_:1},8,["onClick"])):Object(c["createCommentVNode"])("",!0),0!==t?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:1,circle:"",class:"cf-manage-main-add-btn",onClick:e=>n.del_blocksite(t)},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(h)]),_:1})]),_:2},1032,["onClick"])):Object(c["createCommentVNode"])("",!0)]),_:2},1024)]),_:2},1024))),128)),Object(c["createVNode"])(O,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(g,{span:24},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{label:"OUTDATE_CLEAN","label-width":"auto"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{content:"数据库文章过期清除时间",placement:"left",effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(r,{placeholder:"示例：60",modelValue:l.form.OUTDATE_CLEAN,"onUpdate:modelValue":t[0]||(t[0]=e=>l.form.OUTDATE_CLEAN=e)},null,8,["modelValue"])]),_:1})]),_:1})]),_:1})]),_:1}),Object(c["createVNode"])(O,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(g,{span:24},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{label:"HTTP_PROXY"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{content:"是否开启http代理，如需开启，打开此选项同时还要在环境变量配置一个代理地址",placement:"left",effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(C,{modelValue:l.form.HTTP_PROXY,"onUpdate:modelValue":t[1]||(t[1]=e=>l.form.HTTP_PROXY=e)},null,8,["modelValue"])]),_:1})]),_:1})]),_:1})]),_:1}),Object(c["createVNode"])(O,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(g,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(u,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(u,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model"])}a("14d9");var Ze=a("c9a1"),Ge={name:"ManagePanelMain_settings",emits:["refresh"],data(){return{theme_options:[{label:"普通主题",options:[{value:"butterfly"},{value:"fluid"},{value:"matery"},{value:"nexmoe"},{value:"stun"},{value:"Yun"},{value:"sakura"},{value:"volantis"},{value:"stellar"}]},{label:"通用主题",options:[{value:"common1"},{value:"common2"}]}],form:{LINK:this.current_settings.LINK,BLOCK_SITE:this.current_settings.BLOCK_SITE===[]?this.current_settings.BLOCK_SITE:[""],OUTDATE_CLEAN:this.current_settings.OUTDATE_CLEAN,HTTP_PROXY:this.current_settings.HTTP_PROXY}}},methods:{add_link(){this.form.LINK.push({link:"",theme:""})},del_link(e){this.form.LINK.splice(e,1)},add_blocksite(){this.form.BLOCK_SITE.push("")},del_blocksite(e){this.form.BLOCK_SITE.splice(e,1)},submit_form(){let e=Ie(),t=[];for(let c=0;c<this.form.BLOCK_SITE.length;c++)""!==this.form.BLOCK_SITE[c]&&t.push(this.form.BLOCK_SITE[c]);this.form.BLOCK_SITE=t;let a=this.form;if(e){let t=Le(e);this.$axios.put(this.Config.private_api_url+"update_settings",a,t).then(e=>{let a=e.data;200===a.code?(Object(Me["a"])({message:a.message,type:"success"}),Ze["a"].confirm("更新成功，下次运行爬虫生效，是否立即运行？","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>{this.$axios.get(this.Config.private_api_url+"restart_api",t),Object(Me["a"])({type:"success",message:"重启成功"})}).catch(e=>{Object(Me["a"])({type:"info",message:"已取消"})}),this.refresh()):Object(Me["a"])({message:a.message,type:"error"})}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})}},refresh(){this.$emit("refresh","settings")}},props:["Config","current_settings"]};a("5e0e");const Je=v()(Ge,[["render",Ue],["__scopeId","data-v-75620860"]]);var He=Je;function qe(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-alert"),i=Object(c["resolveComponent"])("el-divider"),s=Object(c["resolveComponent"])("el-input"),d=Object(c["resolveComponent"])("el-form-item"),p=Object(c["resolveComponent"])("el-col"),b=Object(c["resolveComponent"])("el-row"),m=Object(c["resolveComponent"])("el-button"),f=Object(c["resolveComponent"])("el-form");return Object(c["openBlock"])(),Object(c["createElementBlock"])(c["Fragment"],null,[Object(c["createVNode"])(r,{title:"当前部署方式",type:"success",description:a.current_settings.DEPLOY_TYPE,"show-icon":"",center:"",closable:!1},null,8,["description"]),Object(c["createVNode"])(i),Object(c["createVNode"])(f,{model:l.all_env,"label-width":"120px"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.all_env,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(b,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,{span:22,offset:2},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,{label:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{placeholder:e.placeholder,modelValue:e.value,"onUpdate:modelValue":t=>e.value=t},null,8,["placeholder","modelValue","onUpdate:modelValue"])]),_:2},1032,["label"])]),_:2},1024)]),_:2},1024))),128)),Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(m,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(m,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model"])],64)}var Xe={name:"ManagePanelMain_envs",emits:["refresh"],data(){return{all_env:{PROXY:{value:"",placeholder:"http代理"},APPKEY:{value:"",placeholder:"leancloud的APPKEY"},APPID:{value:"",placeholder:"leancloud的APPID"},MYSQL_USERNAME:{value:"",placeholder:"mysql用户名"},MYSQL_PASSWORD:{value:"",placeholder:"mysql密码"},MYSQL_IP:{value:"",placeholder:"mysql ip地址"},MYSQL_PORT:{value:"",placeholder:"mysql端口"},MYSQL_DB:{value:"",placeholder:"mysql 数据库名称"},GH_NAME:{value:"",placeholder:"github name"},GH_EMAIL:{value:"",placeholder:"github email"},GH_TOKEN:{value:"",placeholder:"github access token"},MONGODB_URI:{value:"",placeholder:"mongodb连接URI"}}}},methods:{submit_form(){let e=Ie(),t={};for(let c in this.all_env)""!==this.all_env[c].value&&(t[c]=this.all_env[c].value);let a=!0;if(e){let c=Le(e);"github"===this.current_settings.DEPLOY_TYPE?(this.$axios.put(this.Config.private_api_url+"update_github_env",t,c).then(e=>{let t=e.data;200!==t.code&&(Object(Me["a"])({message:t.message,type:"error"}),a=!1)}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),a=!1}),this.$axios.put(this.Config.private_api_url+"update_vercel_env",t,c).then(e=>{let t=e.data;200!==t.code&&(Object(Me["a"])({message:t.message,type:"error"}),a=!1)}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),a=!1})):this.$axios.put(this.Config.private_api_url+"update_server_env",t,c).then(e=>{let t=e.data;200!==t.code&&(Object(Me["a"])({message:t.message,type:"error"}),a=!1)}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),a=!1}),a&&Ze["a"].confirm("更新环境变量成功，重启程序后生效，是否立即重启？","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>{this.$axios.get(this.Config.private_api_url+"restart_api",c),Object(Me["a"])({type:"success",message:"重启成功"})}).catch(e=>{Object(Me["a"])({type:"info",message:"已取消"})})}else Object(Me["a"])({message:"认证失败，未获取到fcircle token",type:"error"})},refresh(){this.$emit("refresh","envs")}},created(){"github"===this.current_settings.DEPLOY_TYPE?(this.all_env["STORAGE_TYPE"]={value:"",placeholder:"存储方式"},this.all_env["VERCEL_ACCESS_TOKEN"]={value:"",placeholder:"vercel访问令牌"}):"server"===this.current_settings.DEPLOY_TYPE?(this.all_env["EXPOSE_PORT"]={value:"",placeholder:"api端口，默认：8000"},this.all_env["RUN_PER_HOURS"]={value:"",placeholder:"爬虫运行小时间隔，默认：6"}):this.all_env["RUN_PER_HOURS"]={value:"",placeholder:"爬虫运行小时间隔，默认：6"};let e=Ie();if(e){let t=Le(e);this.$axios.get(this.Config.private_api_url+"read_envs",t).then(e=>{let t=e.data;if(200===t.code)for(let a in t.current_envs)this.all_env[a]&&null!==t.current_envs[a]&&(this.all_env[a].value=t.current_envs[a]);else Object(Me["a"])({message:t.message,type:"error"})}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})}else Object(Me["a"])({message:"认证失败，未获取到fcircle token",type:"error"})},props:["Config","current_settings"]};const We=v()(Xe,[["render",qe]]);var $e=We;const et={key:0};function tt(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-switch"),i=Object(c["resolveComponent"])("el-form-item"),s=Object(c["resolveComponent"])("el-input"),d=Object(c["resolveComponent"])("el-col"),p=Object(c["resolveComponent"])("Plus"),b=Object(c["resolveComponent"])("el-icon"),m=Object(c["resolveComponent"])("el-button"),f=Object(c["resolveComponent"])("el-row"),u=Object(c["resolveComponent"])("Minus"),h=Object(c["resolveComponent"])("el-form");return Object(c["openBlock"])(),Object(c["createElementBlock"])(c["Fragment"],null,[Object(c["createVNode"])(i,{label:"当前自定义友链状态"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(r,{modelValue:l.enable,"onUpdate:modelValue":t[0]||(t[0]=e=>l.enable=e)},null,8,["modelValue"])]),_:1}),Object(c["createVNode"])(h,{"label-width":"120px"},{default:Object(c["withCtx"])(()=>[l.enable?(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",et,[Object(c["createVNode"])(d,{span:24},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{label:"json友链地址","label-width":"auto"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{placeholder:"可以是网络地址，也可以是路径（私有部署），示例：https://blogroll.ccknbc.cc/fcircle.json 或 /home/data/fcircle/friends.json",modelValue:l.json_api,"onUpdate:modelValue":t[1]||(t[1]=e=>l.json_api=e)},null,8,["modelValue"])]),_:1})]),_:1}),Object(c["createVNode"])(f,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{label:"点击添加一条友链","label-width":"auto"}),Object(c["createVNode"])(d,{span:2},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(m,{circle:"",onClick:n.add_link},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p)]),_:1})]),_:1},8,["onClick"])]),_:1})]),_:1}),(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.list,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(f,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,{span:6},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{label:"名称","label-width":"50px"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{modelValue:e[0],"onUpdate:modelValue":t=>e[0]=t},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024),Object(c["createVNode"])(d,{span:6},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{label:"主页","label-width":"50px"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{modelValue:e[1],"onUpdate:modelValue":t=>e[1]=t},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024),Object(c["createVNode"])(d,{span:6},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{label:"头像","label-width":"50px"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{modelValue:e[2],"onUpdate:modelValue":t=>e[2]=t},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024),Object(c["createVNode"])(d,{span:5},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{label:"后缀","label-width":"50px"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{modelValue:e[3],"onUpdate:modelValue":t=>e[3]=t},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024),Object(c["createVNode"])(d,{span:1},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(m,{circle:"",onClick:e=>n.del_link(t)},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(u)]),_:1})]),_:2},1032,["onClick"])]),_:2},1024)]),_:2},1024))),128))])):Object(c["createCommentVNode"])("",!0),Object(c["createVNode"])(f,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(m,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(m,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1})],64)}var at={name:"ManagePanelMain_links",emits:["refresh"],data(){return{enable:this.current_settings.SETTINGS_FRIENDS_LINKS.enable,list:[],json_api:""}},methods:{add_link(){this.list.push(["","",""])},del_link(e){this.list.splice(e,1)},submit_form(){let e=Ie(),t={};t["enable"]=this.enable,t["json_api"]=this.json_api;let a=[];for(let o=0;o<this.list.length;o++)this.list[o][0]===this.list[o][1]===this.list[o][2]!==""&&a.push(this.list[o]);t["list"]=a;let c={SETTINGS_FRIENDS_LINKS:t};if(e){let t=Le(e);this.$axios.put(this.Config.private_api_url+"update_settings",c,t).then(e=>{let t=e.data;200===t.code?(Object(Me["a"])({message:t.message,type:"success"}),this.refresh()):Object(Me["a"])({message:t.message,type:"error"})}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})}},refresh(){this.$emit("refresh","links")}},created(){for(let e=0;e<this.current_settings.SETTINGS_FRIENDS_LINKS.list.length;e++){let t=this.current_settings.SETTINGS_FRIENDS_LINKS.list[e];3===t.length?this.list.push([t[0],t[1],t[2]]):4===t.length&&this.list.push([t[0],t[1],t[2],t[3]])}this.json_api=this.current_settings.SETTINGS_FRIENDS_LINKS.json_api},props:["Config","current_settings"]};const ct=v()(at,[["render",tt]]);var ot=ct;const lt=e=>(Object(c["pushScopeId"])("data-v-30fd6fc6"),e=e(),Object(c["popScopeId"])(),e),nt=lt(()=>Object(c["createElementVNode"])("div",{class:"cf-manage-tip"},"如需切换数据库，请配置对应环境变量，然后点击保存：",-1));function rt(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-alert"),i=Object(c["resolveComponent"])("el-radio"),s=Object(c["resolveComponent"])("el-radio-group"),d=Object(c["resolveComponent"])("el-input"),p=Object(c["resolveComponent"])("el-form-item"),b=Object(c["resolveComponent"])("el-col"),m=Object(c["resolveComponent"])("el-row"),f=Object(c["resolveComponent"])("el-button"),u=Object(c["resolveComponent"])("el-form");return Object(c["openBlock"])(),Object(c["createElementBlock"])(c["Fragment"],null,[Object(c["createVNode"])(r,{title:"当前使用数据库",type:"success",description:a.current_settings.DATABASE,"show-icon":"",center:"",closable:!1},null,8,["description"]),nt,Object(c["createVNode"])(s,{modelValue:l.current_db,"onUpdate:modelValue":t[0]||(t[0]=e=>l.current_db=e)},{default:Object(c["withCtx"])(()=>["sqlite"!==this.current_settings.DATABASE?(Object(c["openBlock"])(),Object(c["createBlock"])(i,{key:0,label:"sqlite"},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("sqlite")]),_:1})):Object(c["createCommentVNode"])("",!0),"leancloud"!==this.current_settings.DATABASE?(Object(c["openBlock"])(),Object(c["createBlock"])(i,{key:1,label:"leancloud"},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("leancloud")]),_:1})):Object(c["createCommentVNode"])("",!0),"mysql"!==this.current_settings.DATABASE?(Object(c["openBlock"])(),Object(c["createBlock"])(i,{key:2,label:"mysql"},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("mysql")]),_:1})):Object(c["createCommentVNode"])("",!0),"mongodb"!==this.current_settings.DATABASE?(Object(c["openBlock"])(),Object(c["createBlock"])(i,{key:3,label:"mongodb"},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("mongodb")]),_:1})):Object(c["createCommentVNode"])("",!0)]),_:1},8,["modelValue"]),"sqlite"===l.current_db?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:0,model:l.sqlite_env,"label-width":"120px"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.sqlite_env,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(m,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,{span:22,offset:2},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,{label:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,{placeholder:e.placeholder,modelValue:e.value,"onUpdate:modelValue":t=>e.value=t},null,8,["placeholder","modelValue","onUpdate:modelValue"])]),_:2},1032,["label"])]),_:2},1024)]),_:2},1024))),128)),Object(c["createVNode"])(m,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(f,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model"])):Object(c["createCommentVNode"])("",!0),"leancloud"===l.current_db?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:1,model:l.leancloud_env,"label-width":"120px"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.leancloud_env,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(m,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,{span:22,offset:2},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,{label:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,{placeholder:e.placeholder,modelValue:e.value,"onUpdate:modelValue":t=>e.value=t},null,8,["placeholder","modelValue","onUpdate:modelValue"])]),_:2},1032,["label"])]),_:2},1024)]),_:2},1024))),128)),Object(c["createVNode"])(m,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(f,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model"])):Object(c["createCommentVNode"])("",!0),"mysql"===l.current_db?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:2,model:l.mysql_env,"label-width":"120px"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.mysql_env,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(m,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,{span:22,offset:2},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,{label:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,{placeholder:e.placeholder,modelValue:e.value,"onUpdate:modelValue":t=>e.value=t},null,8,["placeholder","modelValue","onUpdate:modelValue"])]),_:2},1032,["label"])]),_:2},1024)]),_:2},1024))),128)),Object(c["createVNode"])(m,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(f,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model"])):Object(c["createCommentVNode"])("",!0),"mongodb"===l.current_db?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:3,model:l.mongodb_env,"label-width":"120px"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.mongodb_env,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(m,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,{span:22,offset:2},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,{label:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,{placeholder:e.placeholder,modelValue:e.value,"onUpdate:modelValue":t=>e.value=t},null,8,["placeholder","modelValue","onUpdate:modelValue"])]),_:2},1032,["label"])]),_:2},1024)]),_:2},1024))),128)),Object(c["createVNode"])(m,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(f,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model"])):Object(c["createCommentVNode"])("",!0)],64)}var it={name:"ManagePanelMain_switchdb",emits:["refresh"],data(){return{current_db:null,sqlite_env:{GH_NAME:{value:"",placeholder:"github name"},GH_EMAIL:{value:"",placeholder:"github email"},GH_TOKEN:{value:"",placeholder:"github access token"}},leancloud_env:{APPKEY:{value:"",placeholder:"leancloud的APPKEY"},APPID:{value:"",placeholder:"leancloud的APPID"}},mysql_env:{MYSQL_USERNAME:{value:"",placeholder:"mysql用户名"},MYSQL_PASSWORD:{value:"",placeholder:"mysql密码"},MYSQL_IP:{value:"",placeholder:"mysql ip地址"},MYSQL_PORT:{value:"",placeholder:"mysql端口"},MYSQL_DB:{value:"",placeholder:"mysql 数据库名称"}},mongodb_env:{MONGODB_URI:{value:"",placeholder:"mongodb连接URI"}}}},methods:{submit_form(){let e=Ie(),t=!0;if(e){let a={};if("sqlite"===this.current_db){for(let e in this.sqlite_env){if(""===this.sqlite_env[e].value)return void Object(Me["a"])({message:"请确保环境变量已添加",type:"error"});a[e]=this.sqlite_env[e].value}a["STORAGE_TYPE"]="sqlite"}if("leancloud"===this.current_db){for(let e in this.leancloud_env){if(""===this.leancloud_env[e].value)return void Object(Me["a"])({message:"请确保环境变量已添加",type:"error"});a[e]=this.leancloud_env[e].value}a["STORAGE_TYPE"]="leancloud"}if("mysql"===this.current_db){for(let e in this.mysql_env){if(""===this.mysql_env[e].value)return void Object(Me["a"])({message:"请确保环境变量已添加",type:"error"});a[e]=this.mysql_env[e].value}a["STORAGE_TYPE"]="mysql"}if("mongodb"===this.current_db){for(let e in this.mongodb_env){if(""===this.mongodb_env[e].value)return void Object(Me["a"])({message:"请确保环境变量已添加",type:"error"});a[e]=this.mongodb_env[e].value}a["STORAGE_TYPE"]="mongodb"}let c=Le(e);"github"===this.current_settings.DEPLOY_TYPE?(this.$axios.put(this.Config.private_api_url+"update_github_env",a,c).then(e=>{let a=e.data;200!==a.code&&(Object(Me["a"])({message:a.message,type:"error"}),t=!1)}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),t=!1}),this.$axios.put(this.Config.private_api_url+"update_vercel_env",a,c).then(e=>{let a=e.data;200!==a.code&&(Object(Me["a"])({message:a.message,type:"error"}),t=!1)}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),t=!1})):this.$axios.put(this.Config.private_api_url+"update_server_env",a,c).then(e=>{let a=e.data;200!==a.code&&(Object(Me["a"])({message:a.message,type:"error"}),t=!1)}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),t=!1}),a={DATABASE:this.current_db},this.$axios.put(this.Config.private_api_url+"update_settings",a,c).then(e=>{let a=e.data;200===a.code?Object(Me["a"])({message:a.message,type:"success"}):Object(Me["a"])({message:a.message,type:"error"}),t=!1}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),t=!1}),t&&Ze["a"].confirm("更新环境变量成功，重启程序后生效，是否立即重启？","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>{this.$axios.get(this.Config.private_api_url+"restart_api",c),Object(Me["a"])({type:"success",message:"重启成功"})}).catch(e=>{Object(Me["a"])({type:"info",message:"已取消"})})}else Object(Me["a"])({message:"认证失败，未获取到fcircle token",type:"error"});this.refresh()},refresh(){this.$emit("refresh","switchdb")}},created(){this.current_db=this.current_settings.DATABASE},props:["Config","current_settings"]};a("7232");const st=v()(it,[["render",rt],["__scopeId","data-v-30fd6fc6"]]);var dt=st;function pt(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-alert"),i=Object(c["resolveComponent"])("el-button");return Object(c["openBlock"])(),Object(c["createElementBlock"])(c["Fragment"],null,[Object(c["createVNode"])(r,{title:"程序运行状态：",type:"success",description:l.status,"show-icon":"",center:"",closable:!1},null,8,["description"]),Object(c["createVNode"])(i,{class:"cf-manage-center-btn",type:"primary",disabled:"运行中"===l.status,onClick:n.run_crawler},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("立即运行爬虫 ")]),_:1},8,["disabled","onClick"]),Object(c["createVNode"])(i,{class:"cf-manage-center-btn",type:"primary",onClick:n.check_crawler_status},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("检测运行状态 ")]),_:1},8,["onClick"])],64)}var bt={name:"ManagePanelMain_status",data(){return{status:"未知",timer:null}},methods:{run_crawler(){let e=Ie();if(e){let t=Le(e);this.$axios.get(this.Config.private_api_url+"run_crawl_now",t).then(e=>{let t=e.data;200===t.code?(Object(Me["a"])({message:t.message,type:"success"}),this.status="运行中",setTimeout(this.check_crawler_status,5e3),this.check_crawler_status()):Object(Me["a"])({message:t.message,type:"error"})}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})}},check_crawler_status(){let e=Ie();if(e){let t=Le(e);this.$axios.get(this.Config.private_api_url+"crawler_status",t).then(e=>{let t=e.data;"运行中"!==t.status&&"未运行"!==t.status&&"未知"!==t.status?this.status="未知":this.status=t.status}).catch(()=>{this.status="未知"})}null!==this.timer&&clearTimeout(this.timer),"运行中"===this.status?this.timer=setTimeout(this.check_crawler_status,1e4):this.timer=setTimeout(this.check_crawler_status,6e4)}},created(){this.check_crawler_status()},unmounted(){null!==this.timer&&clearTimeout(this.timer)},unmounted(){null!==this.timer&&clearTimeout(this.timer)},props:["Config"]};a("e9a4");const mt=v()(bt,[["render",pt],["__scopeId","data-v-593a2f92"]]);var ft=mt;const ut=Object(c["createElementVNode"])("p",null,"适配友链朋友圈5.0",-1),ht=Object(c["createElementVNode"])("p",null,[Object(c["createTextVNode"])("Powered By："),Object(c["createElementVNode"])("a",{href:"https://www.yyyzyyyz.cn/",target:"_blank"},"yyyz")],-1),gt=Object(c["createElementVNode"])("p",null,[Object(c["createTextVNode"])("朋友圈logo、样式设计："),Object(c["createElementVNode"])("a",{href:"https://blog.zhicat.com/",target:"_blank"},"icat")],-1),Ot=Object(c["createElementVNode"])("p",null,[Object(c["createTextVNode"])("原版样式基于："),Object(c["createElementVNode"])("a",{href:"https://immmmm.com/",target:"_blank"},"林木木")],-1),Ct=Object(c["createElementVNode"])("p",null,[Object(c["createTextVNode"])("前端疑难杂症解决："),Object(c["createElementVNode"])("a",{href:"https://anzhiy.cn/",target:"_blank"},"安知鱼")],-1),jt=Object(c["createElementVNode"])("p",null,[Object(c["createTextVNode"])("组件库："),Object(c["createElementVNode"])("a",{href:"https://element-plus.gitee.io/zh-CN/",target:"_blank"},"Element Plus")],-1);function vt(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-divider");return Object(c["openBlock"])(),Object(c["createElementBlock"])(c["Fragment"],null,[ut,ht,Object(c["createVNode"])(r),Object(c["createTextVNode"])(" 鸣谢： "),gt,Ot,Ct,jt],64)}var _t={name:"ManagePanelMain_settings"};const xt=v()(_t,[["render",vt]]);var wt=xt,kt=a("2295"),Vt={name:"ManagePanelMain",emits:["logout"],data(){return{current_tab:"settings",current_settings:null,component_keys:{settings:0,envs:0,links:0,switchdb:0,status:0}}},methods:{logout(){localStorage.removeItem("fcircle-token"),this.$emit("logout")},change_current_component(e){this.show_login_page=!1,this.current_component!==e&&(this.current_component=e)},read_current_settings(){let e=Ie();if(e){let t=Le(e);this.$axios.get(this.Config.private_api_url+"read_settings",t).then(e=>{let t=e.data;200===t.code?this.current_settings=t.current_settings:Object(Me["a"])({message:t.message,type:"error"})}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})}},refresh_component(e){this.read_current_settings(),this.component_keys[e]+=1}},created(){this.read_current_settings(),this.$axios.get(this.Config.private_api_url+"version").then(e=>{1===e.data.status&&Object(kt["a"])({title:"版本更新提示",message:"检测到后端新版本："+e.data.latest_version+"，然而当前版本为："+e.data.current_version+"，请及时更新后端版本",type:"warning"})}),this.$axios.get("https://fcircle-doc.yyyzyyyz.cn/front_version.txt").then(e=>{e.data!==this.$fcircle_front_version&&Object(kt["a"])({title:"版本更新提示",message:"检测到前端新版本："+e.data+"，然而当前版本为："+this.$fcircle_front_version+"，请及时更新前端版本",type:"warning"})})},props:["Config"],components:{ManagePanelMain_settings:He,ManagePanelMain_envs:$e,ManagePanelMain_links:ot,ManagePanelMain_switchdb:dt,ManagePanelMain_status:ft,ManagePanelMain_about:wt}};a("fe56");const At=v()(Vt,[["render",Qe],["__scopeId","data-v-668b627c"]]);var Nt=At,Et={name:"ManagePanel",emits:["close_manage_panel"],data(){return{show_login_page:!0}},methods:{close_manage_panel(){this.$emit("close_manage_panel")},login_success(){this.show_login_page=!1},logout(){this.show_login_page=!0}},props:["Config"],components:{ManagePanelLogin:De,ManagePanelMain:Nt}};a("fd9b");const yt=v()(Et,[["render",Ae],["__scopeId","data-v-34921c7c"]]);var Bt=yt;let Lt={private_api_url:"https://moments.zhicat.com/",public_api_url:"https://fcircle-pub.rct.cool/",page_turning_number:12,error_img:"https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c",sort_rule:"created"};var It=Lt;function Mt(e){if("undefined"!==typeof UserConfig)for(let t in UserConfig)e[t]&&(e[t]=UserConfig[t]);return e}var St={name:"App",data(){return{Config:It,current_api:null,change_map:{updated:null,created:null},article_card_data:{open:!1,data:null},manage_panel_open:!1}},methods:{get_data(e){let t=JSON.parse(sessionStorage.getItem(e+"CreatedData")),a=JSON.parse(sessionStorage.getItem(e+"UpdatedData"));this.change_map["created"]=t,this.change_map["updated"]=a,null===t&&this.$axios.get(e+"all?rule=created").then(t=>{sessionStorage.setItem(e+"CreatedData",JSON.stringify(t.data)),this.change_map["created"]=t.data}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})}),null===a&&this.$axios.get(e+"all?rule=updated").then(t=>{sessionStorage.setItem(e+"UpdatedData",JSON.stringify(t.data)),this.change_map["updated"]=t.data}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})},change_sort_rule(e){this.Config.sort_rule=e},open_article_card(e){let t,a="private"===this.current_api?this.Config.private_api_url:this.Config.public_api_url;t=""!==e?a+"post?num=5&link="+e:a+"post?num=5",this.$axios.get(t).then(e=>{"statistical_data"in e.data?(this.article_card_data.data=e.data,this.article_card_data.open=!0):Object(Me["a"])({message:"未获取到文章卡片òᆺó\n如果持续出现此错误，检查数据库是否正常",type:"error"})})},close_article_card(){this.article_card_data.open=!1},toggle_api_url(){"private"===this.current_api?(this.current_api="public",this.get_data(this.Config.public_api_url)):(this.current_api="private",this.get_data(this.Config.private_api_url))},open_manage_panel(){this.manage_panel_open=!0},close_manage_panel(){this.manage_panel_open=!1}},created(){this.Config=Mt(this.Config),this.current_api="private",this.get_data(this.Config.private_api_url)},components:{Header:x,ArticleBody:ne,ArticleCard:ve,ManagePanel:Bt}};a("d18f");const Tt=v()(St,[["render",r]]);var Dt=Tt,Ft=a("bc3a"),Pt=a.n(Ft),Rt=a("c3a1"),Yt=(a("7437"),a("a2f0"),a("9224")),Qt=a("f6f2");const Kt=Object(c["createApp"])(Dt);Kt.use(Rt["a"]);for(const[zt,Ut]of Object.entries(Qt))Kt.component(zt,Ut);Kt.config.globalProperties.$axios=Pt.a,Kt.config.globalProperties.$fcircle_front_version=Yt.version,Kt.mount("#hexo-circle-of-friends-root")},"594a":function(e,t,a){var c=a("4ae4");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("5d03b462",c,!0,{sourceMap:!1,shadowMode:!1})},5974:function(e,t,a){"use strict";a("2ac5")},"5c8d":function(e,t,a){var c=a("bd0b");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("003822fc",c,!0,{sourceMap:!1,shadowMode:!1})},"5e0e":function(e,t,a){"use strict";a("1799")},7232:function(e,t,a){"use strict";a("991d")},"7d5b":function(e,t,a){"use strict";a("5c8d")},"8e53":function(e,t,a){var c=a("1feb");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("312900a6",c,!0,{sourceMap:!1,shadowMode:!1})},"8fd2":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,"#page:has(#hexo-circle-of-friends-root){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;transition:none!important}.el-button:focus,.el-button:hover{color:var(--icat-blue)!important}.el-form-item__label{color:#fff!important}",""]),e.exports=t},"91a2":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,".cf-manage-main-add-btn[data-v-30fd6fc6]{margin-left:30px}.cf-manage-tip[data-v-30fd6fc6]{color:#fff}",""]),e.exports=t},9224:function(e){e.exports=JSON.parse('{"name":"fcircle-theme-yyyz","version":"1.0.3","private":false,"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","lint":"vue-cli-service lint"},"dependencies":{"@element-plus/icons-vue":"^2.0.9","axios":"^0.27.2","core-js":"^3.6.5","element-plus":"^2.2.17","vue":"^3.0.0"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.15","@vue/cli-plugin-eslint":"~4.5.15","@vue/cli-service":"~4.5.15","@vue/compiler-sfc":"^3.0.0","@vue/eslint-config-standard":"^5.1.2","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^4.0.0","eslint-plugin-vue":"^7.0.0"},"description":"```\\r npm install\\r ```","files":["dist/app.min.js","dist/bundle.js"],"main":".eslintrc.js","repository":{"type":"git","url":"git+https://github.com/hiltay/hexo-circle-of-friends-front.git"},"keywords":["yyyz","5.x","友链朋友圈前端插件"],"author":"yyyz","license":"ISC","bugs":{"url":"https://github.com/hiltay/hexo-circle-of-friends-front/issues"},"homepage":"https://github.com/hiltay/hexo-circle-of-friends-front#readme"}')},"991d":function(e,t,a){var c=a("91a2");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("665ae4a5",c,!0,{sourceMap:!1,shadowMode:!1})},a2f0:function(e,t,a){var c=a("8fd2");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("6abc6200",c,!0,{sourceMap:!1,shadowMode:!1})},bd0b:function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,".fade-enter-active[data-v-31c20c7f],.fade-leave-active[data-v-31c20c7f]{transition:opacity .1s}.fade-enter[data-v-31c20c7f],.fade-leave-to[data-v-31c20c7f]{opacity:0}#cf-overlay-group[data-v-31c20c7f]{display:flex;position:fixed;align-items:center;justify-content:center;width:100vw;height:100vh;z-index:100;top:0;left:0}#cf-overlay[data-v-31c20c7f]{position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--icat-maskbgdeep);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-y:auto;pointer-events:all;transition:all .1s ease;z-index:998;animation:cf-show-31c20c7f .3s ease-in-out}@keyframes cf-show-31c20c7f{0%{opacity:0}to{opacity:1}}@keyframes cf-show-move-31c20c7f{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.cf-overshow[data-v-31c20c7f]{text-align:center;border-radius:12px;width:320px;transform:translateY(0);box-shadow:0 12px 40px rgba(0,0,0,.093);background:var(--icat-background);transition:all .1s ease;z-index:999;padding:16px;border:var(--style-border-always);animation:cf-show-move-31c20c7f .3s ease-in-out;margin:auto}.cf-overshow-head[data-v-31c20c7f]{display:flex;flex-direction:column;align-items:center;padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px dashed var(--icat-secondtext)}.cf-overshow-head img.cf-img-avatar[data-v-31c20c7f]:hover{transform:rotate(1turn);transition:.8s}.cf-overshow .cf-overshow-head a[data-v-31c20c7f]{color:var(--icat-fontcolor);display:block;text-align:center;font-weight:700;margin-top:-5px;padding:5px 8px 5px;text-decoration:none;width:-moz-fit-content;width:fit-content}.cf-overshow img.cf-img-avatar[data-v-31c20c7f]{background:#fff;width:80px;height:80px;border-radius:50%;margin:-45px auto 8px;transform:rotate(-1turn);transition:.8s}.cf-overshow p[data-v-31c20c7f]{margin:.3rem 5px;width:100%;position:relative;display:flex;flex-direction:column;align-items:flex-start}.cf-overshow p a.cf-article-title[data-v-31c20c7f]{text-decoration:none;display:block;text-align:left;position:relative;z-index:2;font-size:15px;line-height:1.2;letter-spacing:normal;max-height:50px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--icat-fontcolor);width:-moz-fit-content;width:fit-content;font-weight:700}.cf-overshow p span[data-v-31c20c7f]{position:relative;z-index:1;font-size:12px;margin-top:8px}@media screen and (max-width:768px){.cf-overshow[data-v-31c20c7f]{width:90%}.cf-overshow img.cf-img-avatar[data-v-31c20c7f]{margin:0}}.cf-overshow .cf-overshow-content[data-v-31c20c7f]{padding:2px 3px 7px}.cf-overshow .cf-overshow-content-tail[data-v-31c20c7f]{padding:2px 3px 7px;border-bottom-left-radius:20px;border-bottom-right-radius:20px}",""]),e.exports=t},be21:function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,".cf-manage-logo[data-v-735984d8]{top:25%}.cf-manage-logo[data-v-735984d8],.cf-manage-title[data-v-735984d8]{position:absolute;transform:translate(-50%,-50%);left:50%}.cf-manage-title[data-v-735984d8]{top:35%;color:#fff;font-size:24px;font-family:PingFangSC-Regular;text-align:center;white-space:nowrap;line-height:33px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cf-manage-input[data-v-735984d8]{top:45%}.cf-manage-input[data-v-735984d8],.cf-manage-login-btn[data-v-735984d8]{position:absolute;transform:translate(-50%,-50%);max-width:50%;left:50%}.cf-manage-login-btn[data-v-735984d8]{top:60%}",""]),e.exports=t},d18f:function(e,t,a){"use strict";a("8e53")},e9a4:function(e,t,a){"use strict";a("f61c")},ea03:function(e,t,a){"use strict";a("5145")},f2b1:function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,".cf-manage-center-btn[data-v-593a2f92]{margin-top:30px}",""]),e.exports=t},f61c:function(e,t,a){var c=a("f2b1");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("c21bbef8",c,!0,{sourceMap:!1,shadowMode:!1})},fd9b:function(e,t,a){"use strict";a("2375")},fe56:function(e,t,a){"use strict";a("1b92")},ff61:function(e,t,a){"use strict";a("594a")}});

创建数据【后端】

截本节教程前 后端采用的是 github + sqlite 部署 - 参考教程 友链朋友圈 - github+sqlite部署

友链朋友圈 - 教程官网
你是否经常烦恼于友链过多但没有时间浏览？那么友链朋友圈将解决这一痛点。你可以随时获取友链网站的更新内容，并了解友链的活跃情况！

热评弹窗

本小节魔改内容包含 右键菜单 添加热评开关功能，如有需要请移步至 ✨ 本章 - 七小节 | 右键菜单

样式参考 洪佬的 可自行移步张洪Heo

创建数据

  • 新增 [blogRoot]/themes/butterfly/layout/includes/rightmenu.pug 页面内容
    （**+** 号直接删除 即是正常缩进；注意该内容中 fontawesome 图标 需要自行替换）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    ···

    .rightMenu-group.rightMenu-line
        a.rightMenu-item(href="javascript:toRandomPost()")
            i.iconfont.icat-random
            span='随便逛逛'
        a.rightMenu-item(href="javascript:rmf.translate();")
            i.iconfont.icat-simple-complex
            span='繁简转换'
+        a.rightMenu-item(href="javascript:hotreview.switchCommentBarrage();")
+            i.iconfont.icat-danmu
+            span.menu-commentBarrage-text 关闭热评
    .rightMenu-group.rightMenu-line
        a.rightMenu-item(href="javascript:pjax.loadUrl(\"/privacy/\");")
            i.iconfont.icat-conceal
            span='隐私协议'
        a.rightMenu-item(href="javascript:pjax.loadUrl(\"/cc/\");")
            i.iconfont.icat-cc
            span='版权协议'
  • 新增 [blogRoot]/themes/butterfly/layout/includes/third-party/comments/index.pug 页面内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
          ···

          when 'Giscus'
            #giscus-wrap
          when 'Facebook Comments'
            .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
                        data-numposts= theme.facebook_comments.pageSize || 10
                        data-order-by= theme.facebook_comments.order_by || 'social'
                        data-width="100%")
          when 'Remark42'
            #remark42
          when 'Artalk'
            #artalk-wrap

+  .comment-barrage
  • 创建 [blogRoot]/source/js/Barrage.js 文件，并新增以下内容，用来处理跳转和开关变量
    （或写在自建的公共 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
var hotreview = {
  switchCommentBarrage:function() {
    document.querySelector(".comment-barrage")&&($(".comment-barrage").is(":visible")?($(".comment-barrage").hide(),$(".menu-commentBarrage-text").text("显示热评"),document.querySelector("#consoleCommentBarrage").classList.remove("on"),localStorage.setItem("commentBarrageSwitch","false")):$(".comment-barrage").is(":hidden")&&($(".comment-barrage").show(),$(".menu-commentBarrage-text").text("关闭热评"),document.querySelector("#consoleCommentBarrage").classList.add("on"),localStorage.removeItem("commentBarrageSwitch"))),
    rm.hideRightMenu()
  },
  scrollTo: function(e) {
    const t = document.getElementById(e);
    if (t) {
      const e = t.getBoundingClientRect().top + window.pageYOffset - 80,
      o = window.pageYOffset,
      n = e - o;
      let a = null;
      window.requestAnimationFrame((function e(t) {
        a || (a = t);
        const i = t - a,
        l = (c = Math.min(i / 0, 1)) < .5 ? 2 * c * c: (4 - 2 * c) * c - 1;
        var c;
        window.scrollTo(0, o + n * l),
        i < 600 && window.requestAnimationFrame(e)
      }))
    }
  },
}

// 热评弹窗跳转
  • 新建 [blogRoot]/source/css/Barrage.css 样式文件，并新增以下内容
    （也可以在自建的css文件里新增内容）
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
.comment-barrage {
	position: fixed;
	bottom: 40px;
	right: 68px;
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: flex-end;
  z-index: 999;
  transition: 0.3s;
  user-select: none;
  -webkit-user-select: none;
}

@media screen and (max-width: 768px){
	.comment-barrage {
		display: none!important;
	}
}
.comment-barrage-item {
	min-width: 286px;
	max-width: 286px;
	width: fit-content;
	min-height: 80px;
	max-height: 150px;
	margin: 4px;
	padding: 8px 14px;
	background: var(--icat-maskbgdeep);
	border-radius: 8px;
	color: var(--icat-fontcolor);
	animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
	transition: 0.3s;
	display: flex;
	flex-direction: column;
	border: var(--style-border-always);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: fixed;
  box-shadow: var(--icat-shadow-border);
  overflow: hidden;
}

.comment-barrage-item:hover {
  border: 1px solid var(--icat-blue);
  box-shadow: var(--icat-shadow-blue);
}

.comment-barrage-item.out{
	opacity: 0;
  animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
}

.comment-barrage-item.hovered {
  opacity: 0;
}

.comment-barrage-item .comment-barrage-close {
  color: var(--icat-secondtext);
  cursor: pointer;
  line-height: 1;
  margin: 4px;
}

.comment-barrage-item .comment-barrage-close .icatfont {
  font-size: 18px!important;
}

.comment-barrage-item pre {
  display: none;
}

.comment-barrage-item li {
  display: none;
}

.comment-barrage-item p img:not(.tk-owo-emotion) {
  display: none;
}

.comment-barrage-item p img.tk-owo-emotion {
  width: 16px;
  padding: 0;
  margin: 0;
  transform: translateY(2px);
}

.comment-barrage-item blockquote {
  display: none;
}

.comment-barrage-item br {
  display: none;
}

.comment-barrage-item .barrageHead{
	height: 30px;
	padding: 0;
	line-height: 30px;
	font-size: 12px;
	border-bottom: var(--style-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  padding-bottom: 6px;
}

.comment-barrage-item .barrageHead .barrageTitle {
	color: var(--icat-card-bg);
	margin-right: 8px;
  background: var(--icat-fontcolor);
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
  white-space:nowrap;
}

.comment-barrage-item .barrageHead .barrageTitle:hover {
  background: var(--icat-blue);
  color: var(--icat-white);
}

.comment-barrage-item .barrageAvatar{
	width: 18px;
	height: 18px;
  margin: 0;
	margin-left: auto;
  margin-right: 8px;
	border-radius: 50%;
  background: var(--icat-secondbg);
}
.comment-barrage-item .barrageContent{
	font-size: 14px!important;
  font-weight: normal!important;
	height: calc(100% - 30px);
	overflow: hidden;
  width: fit-content;
  max-height: 48px;
}

.comment-barrage-item .barrageContent a {
  pointer-events:none;
  font-size: 14px!important;
}

.comment-barrage-item .barrageContent::-webkit-scrollbar{
	height: 0;
	width: 4px;
}
.comment-barrage-item .barrageContent::-webkit-scrollbar-button{
	display: none;
}

.barrageHead .comment-barrage-close i {
  color: var(--icat-fontcolor);
}

.comment-barrage-item p{
  color: var(--icat-fontcolor);
  margin: 8px 0 0;
  line-height: 1.2;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
  font-size: 12px;
  font-weight: bold;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.comment-barrage-item p:hover,
.barrageHead .comment-barrage-close i:hover {
  color: var(--icat-blue);
}

/* 热评弹窗样式 */
  • 创建 [blogRoot]/themes/butterfly/source/js/commentBarrage.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
var postCommentElement = document.getElementById("post-comment");
if (postCommentElement) {
var commentBarrageConfig = {
	//同时最多显示弹幕数
	maxBarrage: 1,
	//弹幕显示间隔时间ms
	barrageTime: 4000,
	//twikoo部署地址腾讯云的为环境ID
	twikooUrl: "{envId}",
	//token获取见上方
	accessToken: "{YOUR_TOKEN}",
	pageUrl: window.location.pathname,
	barrageTimer: [],
	barrageList: [],
	barrageIndex: 0,
	dom: document.querySelector('.comment-barrage'),
}

var commentInterval = null;
var hoverOnCommentBarrage = false;

$(".comment-barrage").hover(function() {
  hoverOnCommentBarrage = true;
  console.log("热评悬浮");
}, function() {
  hoverOnCommentBarrage = false;
  console.log("停止悬浮");
});

function initCommentBarrage(){
	// console.log("开始创建热评")

	var data = JSON.stringify({
		"event": "COMMENT_GET",
		"commentBarrageConfig.accessToken": commentBarrageConfig.accessToken,
		"url": commentBarrageConfig.pageUrl
	});
	var xhr = new XMLHttpRequest();
	xhr.withCredentials = true;
	xhr.addEventListener("readystatechange", function() {
		if(this.readyState === 4) {
		commentBarrageConfig.barrageList = commentLinkFilter(JSON.parse(this.responseText).data);
		commentBarrageConfig.dom.innerHTML = '';
		}
	});
	xhr.open("POST", commentBarrageConfig.twikooUrl);
	xhr.setRequestHeader("Content-Type", "application/json");
	xhr.send(data);


  clearInterval(commentInterval);
  commentInterval = null;

  commentInterval = setInterval(()=>{
    if(commentBarrageConfig.barrageList.length && !hoverOnCommentBarrage){
      popCommentBarrage(commentBarrageConfig.barrageList[commentBarrageConfig.barrageIndex]);
      commentBarrageConfig.barrageIndex += 1;
      commentBarrageConfig.barrageIndex %= commentBarrageConfig.barrageList.length;
    }
    if((commentBarrageConfig.barrageTimer.length > (commentBarrageConfig.barrageList.length > commentBarrageConfig.maxBarrage?commentBarrageConfig.maxBarrage:commentBarrageConfig.barrageList.length)) && !hoverOnCommentBarrage){
      removeCommentBarrage(commentBarrageConfig.barrageTimer.shift())
    }
  },commentBarrageConfig.barrageTime)
}
function commentLinkFilter(data){
	data.sort((a,b)=>{
		return a.created - b.created;
	})
	let newData = [];
	data.forEach(item=>{
		newData.push(...getCommentReplies(item));
	});
	return newData;
}
function getCommentReplies(item){
	if(item.replies){
		let replies = [item];
		item.replies.forEach(item=>{
			replies.push(...getCommentReplies(item));
		})
		return replies;
	}else{
		return [];
	}
}
function popCommentBarrage(data){
	let barrage = document.createElement('div');
	let width = commentBarrageConfig.dom.clientWidth;
	let height = commentBarrageConfig.dom.clientHeight;
	barrage.className = 'comment-barrage-item'
	barrage.innerHTML = `
		<div class="barrageHead">
      		<a class="barrageTitle" href="javascript:hotreview.scrollTo('post-comment')"">热评</a>
			<div class="barrageNick">${data.nick}</div>
			<img class="barrageAvatar" src="https://cravatar.cn/avatar/${data.mailMd5}"/>
			<a class="comment-barrage-close" href="javascript:hotreview.switchCommentBarrage()"><i class="iconfont icat-close"></i></a>
		</div>
		<a class="barrageContent" href="javascript:hotreview.scrollTo('${data.id}');">${data.comment}</a>
	`
	commentBarrageConfig.barrageTimer.push(barrage);
	commentBarrageConfig.dom.append(barrage);
}
function removeCommentBarrage(barrage){
	barrage.className = 'comment-barrage-item out';
	setTimeout(()=>{
		commentBarrageConfig.dom.removeChild(barrage);
	},1000)
}



// 自动隐藏
document.addEventListener('scroll',btf.throttle(function(){
    //滚动条高度+视窗高度 = 可见区域底部高度
    var visibleBottom = window.scrollY + document.documentElement.clientHeight;
    //可见区域顶部高度
    var visibleTop = window.scrollY;
    // 获取翻页按钮容器
    var pagination = document.querySelector('.comment-barrage');
    // 获取位置监测容器，此处采用评论区
    var eventlistner = document.getElementById('post-comment');
    if (eventlistner&&pagination){
    var centerY = eventlistner.offsetTop+(eventlistner.offsetHeight/2);
    if(document.body.clientWidth > 768){
      if(centerY>visibleBottom){
        pagination.style.bottom = '40px';
      }else{
        pagination.style.bottom = '-200px';
      }
    }
  }
  }, 200))

initCommentBarrage();

document.addEventListener('pjax:send', function(){
  clearInterval(commentInterval);
});

} else {
	console.log("iCat提醒您：此页面没有评论！");
}

// 热评弹窗函数
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 和 bottom 分别引入 barragesColor Barrage.css commentBarrage.js Barrage.js
1
2
3
4
5
6
7
8
9
10
11
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/Barrage.css"> # 热评弹窗 - 样式
    - <style id="barragesColor"></style> # 热评弹窗 - 载体
  bottom:
    - <script type="text/javascript" src="/js/Barrage.js"></script> # 热评弹窗
    - <script type="text/javascript" src="/js/commentBarrage.js" data-pjax=""></script> # 热评弹窗 - 函数处理

  ···

Token获取

仅提供 Vercel部署 的获取方式

  • 在 开发人员工具 - 应用 - 本地存储空间 - 你的网址 - twikoo-access-token 里面即可看到对于的值

好物推荐页

Butterfly的魔改教程：好物推荐页
灵感来源林木木的好物页面，Hexo也来整一个，来定制一个你的好物分享吧

自定页数跳转

Butterfly的魔改教程：自定页数跳转
基于 蝴蝶主题 的原生自定页数跳转版，再也不用频繁跳转页咯

最新评论页

230720 更新：修复控制台无容器时报错

230718 更新：修复个人卡片显示评论数量异常。新增作者标识，提升UI样式

230821 更新：新增article的JSON文件原生api，再也不用手动新增结构数据啦~

效果预览

最新评论
快速预览本站最近评论

创建数据

  • 创建 [blogRoot]/source/comments/index.md 页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 最新评论
date: 2023-07-17 14:07:01
type: comments
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 速览
top_title: 最新评论
top_tips: 快速预览本站最近评论
---

<!-- 页面内容 -->
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'comments'
+        include includes/page/comments.pug
      default
        include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/comments.pug 页面，并新增以下内容
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
#comments-page

script.
    if (1) {
        fetch('/article.json').then(res => res.json()).then(data => {
            let article = data
            fetch('{envId}', {
                method: "POST",
                body: JSON.stringify({ "event": "GET_RECENT_COMMENTS", "accessToken": "{YOUR_TOKEN}", "includeReply": true, "pageSize": 100, }),
                headers: { 'Content-Type': 'application/json' }
            }).then(res => res.json()).then(({ data }) => {
                let html = ''
                data.forEach(item => {
                    const createdDate = new Date(item.created);
                    const formattedDate = `${createdDate.getFullYear().toString().slice(-2)}-${createdDate.getMonth() + 1}-${createdDate.getDate()} ${createdDate.getHours()}:${createdDate.getMinutes()}:${createdDate.getSeconds()}`;
                    html += `<div class="comment-card" title="${item.commentText.replaceAll(/<.*?>/g, '').replaceAll(/[\s\n]/g, '')}" onclick="pjax.loadUrl('${item.url}#${item.id}')">
                    <div class="comment-info">
                        <img src="${item.avatar}" class="nolazyload">
                        <div class="comment-information">
                            <span class="${item.nick === '亦封' ? 'comment-user comment-author' : 'comment-user'}">${item.nick}</span>
                            <span class="comment-time">${formattedDate}</span>
                        </div>
                    </div>
                    <div class="comment-content">${item.commentText.replaceAll('<', '&lt;').replaceAll('>', '&gt;')}</div>
                    <div class="comment-article">"${article[item.url]}"</div>
                </div>`
                })
                document.getElementById('comments-page').innerHTML = html
            })
        })
    }
  • 新建 [blogRoot]/source/css/comments.css 样式文件，并新增以下内容
    （也可以在自建的css文件里新增内容）
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
#comments-page {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 100px;
  width: 100%;
  margin-top: 1.5rem;
}
#comments-page .comment-card {
  position: relative;
  width: calc(100% / 4 - 9px);
  border-radius: 12px;
  border: var(--style-border);
  padding: 14px;
  cursor: pointer;
  transition: .3s;
  overflow: hidden;
  box-shadow: var(--icat-shadow-border);
  background: var(--icat-card-bg);
}
@media screen and (max-width: 900px) {
  #comments-page .comment-card {
    width: calc(100% / 2 - 6px);
  }
}
@media screen and (max-width: 768px) {
  #comments-page .comment-card {
    width: 100%;
  }
}
#comments-page .comment-card:hover {
  border-color: var(--icat-blue);
}
#comments-page .comment-card:hover .comment-article {
  opacity: 1;
  top: 0;
}
#comments-page .comment-card .comment-info {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--hr-border);
}
#comments-page .comment-card .comment-info img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 !important;
}
#comments-page .comment-card .comment-info .comment-information {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  line-height: 1.5;
}
#comments-page .comment-card .comment-info .comment-information .comment-user {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 15px;
}
#comments-page .comment-card .comment-info .comment-information .comment-author::after {
  content: "\e04f";
  font-family: "iconfont" !important;
  padding-left: 6px;
  font-size: 14px;
  color: var(--icat-green);
}
[data-theme="dark"] #comments-page .comment-card .comment-info .comment-information .comment-author::after {
  color: var(--icat-blue);
}
#comments-page .comment-card .comment-info .comment-information .comment-time {
  opacity: .8;
  font-size: 12px;
}
#comments-page .comment-card .comment-info .comment-content {
  margin: 8px 5px 0;
}
.comment-content, .comment-article {
  transition: .3s;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.7;
  font-weight: 400;
}
.comment-article {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background: var(--icat-blue);
  color: white;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  text-align: center;
}

/* 最新评论页面样式 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 comments.css 样式
1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/comments.css"> # 最新评论 - 样式
    - ···
  bottom:
    - ···

  ···

个人卡片总评论

  • 修改 [blogRoot]/themes/butterfly/layout/includes/widget/card_author.pug 页面内容
    （ + 号直接删除 即是正常缩进）
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
if theme.aside.card_author.enable
  .card-widget.card-info
    .is-center
      .avatar-img
        img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
      .author-info__name= config.author
      .author-info__description!= theme.aside.card_author.description || config.description

    .card-info-data.site-data.is-center
      a(href=url_for(config.archive_dir) + '/')
        .headline= _p('aside.articles')
        .length-num= site.posts.length
      a(href=url_for(config.tag_dir) + '/')
        .headline= _p('aside.tags')
        .length-num= site.tags.length
-     a(href=url_for(config.category_dir) + '/')
-       .headline= _p('aside.categories') 
-       .length-num= site.categories.length
+      a(href="/comments/")
+        .headline= _p('评论') 
+        .length-num.icat-pc-comment= _p('0')

    if theme.aside.card_author.button.enable
      a#card-info-btn(href=theme.aside.card_author.button.link)
        i(class=theme.aside.card_author.button.icon)
        span=theme.aside.card_author.button.text
  
    if(theme.social)
        .card-info-social-icons.is-center
          !=fragment_cache('social', function(){return partial('includes/header/social')})
  • 修改 [blogRoot]/themes/butterfly/layout/includes/sidebar.pug 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#sidebar
  #menu-mask
  #sidebar-menus
    .avatar-img.is-center
      img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
    .sidebar-site-data.site-data.is-center
      a(href=url_for(config.archive_dir) + '/')
        .headline= _p('aside.articles') 
        .length-num= site.posts.length
      a(href=url_for(config.tag_dir) + '/' )
        .headline= _p('aside.tags')
        .length-num= site.tags.length
-     a(href=url_for(config.category_dir) + '/')
-       .headline= _p('aside.categories') 
-       .length-num= site.categories.length
+      a(href="/comments/")
+        .headline= _p('评论') 
+        .length-num.icat-pe-comment= _p('0')

    hr
    !=partial('includes/header/menu_item', {}, {cache: true})
  • 创建 [blogRoot]/source/js/comments.js 文件，并新增以下内容，用来处理获取总评论数量
    （或写在自建的公共 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
fetch('/article.json')
  .then(res => res.json())
  .then(articleData => {
    const urls = Object.keys(articleData);

    fetch('{envId}', {
      method: "POST",
      body: JSON.stringify({ "event": "GET_RECENT_COMMENTS", "accessToken": "{YOUR_TOKEN}", "includeReply": true, "pageSize": -1 }),
      headers: { 'Content-Type': 'application/json' }
    })
      .then(res => res.json())
      .then(({ data }) => {
        let totalComments = 0;
        data.forEach(item => {
          totalComments++;
        });
        const commentElement = document.querySelector('.length-num.icat-pc-comment');
        if (commentElement) {
          commentElement.innerText = totalComments;
        }
        const commentElements = document.querySelector('.length-num.icat-pe-comment');
        if (commentElements) {
          commentElements.innerText = totalComments;
        }
        console.log('本站Twikoo总评论数:', totalComments);
      });
  });

// 总评论数量
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 comments.js 文件
1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
    - ···
  bottom:
    - <script async type="text/javascript" src="/js/comments.js"></script>
    - ···

  ···
  • 创建 [blogRoot]/themes/butterfly/scripts/helpers/article-json.js 文件，并新增以下内容，用来处理生成并处理 article.json
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
/**
 * MeuiCat
 * generate json - article_comments
 * developer：meuciat.com
 */

'use strict'

hexo.extend.generator.register('theData', function (locals) {
    const postsData = locals.posts
      .filter(post => post.path !== '/' && post.comments !== false)
      .map(post => {
        const link = post.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/');
        return {
          [link]: post.title || "暂无标题"
        };
      });
  
    const pagesData = locals.pages
      .filter(page => page.path !== '/' && page.comments !== false && !page.source.endsWith('.js') && !page.source.endsWith('.css'))
      .map(page => {
        const link = page.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/').replace('index.html', '');
        return {
          [link]: page.title || "暂无标题"
        };
      });
  
    const combinedData = postsData.concat(pagesData);
  
    const jsonData = combinedData.reduce((acc, obj) => {
      const key = Object.keys(obj)[0];
      const value = obj[key];
      acc[key] = value;
      return acc;
    }, {});
  
    return {
      path: 'article.json',
      data: JSON.stringify(jsonData)
    };
  });

文章版权

本小节是将文章底部版权进行魔改，如只需调整请移步 主题调整 | 3

  • 修改 [blogRoot]/themes/butterfly/layout/includes/post/post-copyright.pug 页面内容
    （ + 号直接删除 即是正常缩进）
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
if theme.post_copyright.enable && page.copyright !== false
+  - let title  = page.title || _p('no_title')
+  - let updated = date(page.updated) || _p("search.load_data")
  - let author = page.copyright_author || config.author
  - let authorHref = page.copyright_author_href || theme.post_copyright.author_href || config.url
  - let url = page.copyright_url || page.permalink
  - let info = page.copyright_info || _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
-  .post-copyright
-    .post-copyright__author
-      span.post-copyright-meta= _p('post.copyright.author') + ": "
-      span.post-copyright-info
-        a(href=authorHref)=author
-    .post-copyright__type
-      span.post-copyright-meta= _p('post.copyright.link') + ": "
-      span.post-copyright-info
-        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
-    .post-copyright__notice
-      span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
-      span.post-copyright-info!= info
+  .icat-license
+    .icat-license-title=title
+    .icat-license-link
+      a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
+    .icat-license-meta
+      .icat-license-meta-item
+        .icat-license-meta-title 本文作者
+        .icat-license-meta-text
+          a(href=authorHref)=author
+      .icat-license-meta-item
+        .icat-license-meta-title 最后更新
+        .icat-license-meta-text=updated
+      .icat-license-meta-item
+        .icat-license-meta-title 许可协议
+        .icat-license-meta-text
+          a(href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="nofollow noopener noreferrer" target="_blank") CC BY-NC-SA 4.0
+    .icat-license-tips=info
  • 新建 [blogRoot]/source/css/license.css 样式文件，并新增以下内容
    （也可以在自建的css文件里新增内容）
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
.icat-license {
  position: relative;
  line-height: 1.2;
  font-size: 1rem;
  background: var(--icat-card-bg);
  color: var(--icat-fontcolor);
  overflow: hidden;
  border: var(--style-border);
  display: block;
  padding: 1rem 1.3rem;
  margin: 1.5rem 0 0.5rem;
  border-radius: 12px
}
.icat-license:after {
  position: absolute;
  content: "\e039";
  font-size: 210px;
  font-family: "iconfont";
  color: var(--icat-fontcolor);
  opacity: 0.1;
  filter: blur(6px);
  height: 210px;
  width: 210px;
  right: -40px;
  top: -80px;
}
@media screen and (max-width: 768px) {
  .icat-license:after {
    top: auto;
    bottom: -40px;
  }
}

.icat-license a {
  color: var(--icat-fontcolor);
  border-radius: 6px;
  transition: .5s;
}
.icat-license a:hover {
  color: var(--icat-white);
  background: var(--icat-blue);
  padding: 0 4px;
}
.icat-license .icat-license-link a {
  opacity: .6;
}
.icat-license .icat-license-link a:hover {
  opacity: 1;
}
.icat-license-title {
  font-size: 18px;
  font-weight: 600;
}
.icat-license-meta-title,.icat-license-title {
  margin: 0 0 .25rem
}
.icat-license-link,.icat-license-meta-title {
  font-size: .8rem
}
.icat-license-link {
  color: #7a7a7a;
  font-size: .9rem
}
.icat-license-meta {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap
}
.icat-license-meta-item {
  margin: 0 2rem 1em 0
}
.icat-license-meta-text {
  margin: 0
}
.icat-license-tips {
  font-size: .95rem;
}

/* 版权样式 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 license.css 样式
1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/license.css"> # 魔改版权样式
    - ···
  bottom:
    - ···

  ···

订阅页

Butterfly的魔改教程：文章订阅页
基于Follow文章更新通知的订阅服务