-topaz-denoise-enhance-tuya.jpg)
Halo-Theme-Hao主题1.3.9修改版配置美化
原项目仓库地址：点击进入
Hao主题1.3.9修改版GitHub项目仓库：点击进入
侧栏侧栏小板报
先去申请一个免费Key: 免费申请地址
主题内置，后台侧栏获取坐标直接输入就行了。
下面是自定义页面的小板报，可以去其他主题的自定义页面输入。
<div id="welcome-info"></div>
<style>
#welcome-info {
color: var(--main);
line-height: 1.5rem;
}
#welcome-info b {
color: var(--theme);
}
</style>
<script type="text/javascript">
// 访客信息
let ipLocation;
// 获取 IP 位置并修改文本内容
fetch('https://api.nsmao.net/api/ip/query?key=75*************jb') //申请key:https://api.nsmao.net
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
ipLocation = data;
// 我的固定位置（广州）
const myLng = 113.34;
const myLat = 23.08;
// 距离我的位置
let distMine = getDistance(myLng, myLat, ipLocation.data.lng, ipLocation.data.lat);
let pos = ipLocation.data.country;
let posdesc = '';
// 根据国家或省份/城市生成对应的提示信息
switch (ipLocation.data.country) {
case "日本":
posdesc = "よろしく，一起去看樱花吗";
break;
case "美国":
posdesc = "Let us live in peace!";
break;
case "英国":
posdesc = "想同你一起夜乘伦敦眼";
break;
case "俄罗斯":
posdesc = "干了这瓶伏特加！";
break;
case "法国":
posdesc = "C'est La Vie";
break;
case "德国":
posdesc = "Die Zeit verging im Fluge.";
break;
case "澳大利亚":
posdesc = "一起去大堡礁吧！";
break;
case "加拿大":
posdesc = "拾起一片枫叶赠予你";
break;
case "中国":
pos = ipLocation.data.prov + " " + ipLocation.data.city + " " + ipLocation.data.district;
switch (ipLocation.data.prov) {
case "北京市":
posdesc = "北——京——欢迎你~~~";
break;
case "上海市":
posdesc = "走在外滩，感受历史与现代的交融。";
break;
case "广东省":
switch (ipLocation.data.city) {
case "广州市":
posdesc = "看小蛮腰，喝早茶了嘛~";
break;
case "深圳市":
posdesc = "今天你逛商场了嘛~";
break;
default:
posdesc = "带你感受广东的热情与美食！";
break;
}
break;
case "浙江省":
switch (ipLocation.data.city) {
case "杭州市":
posdesc = "西湖美景，三月天~";
break;
case "宁波市":
posdesc = "来宁波，感受大海的气息。";
break;
default:
posdesc = "这里是浙江，充满江南的韵味！";
break;
}
break;
case "四川省":
switch (ipLocation.data.city) {
case "成都市":
posdesc = "宽窄巷子，成都慢生活。";
break;
case "绵阳市":
posdesc = "享受科技城的宁静与创新。";
break;
default:
posdesc = "来四川，品麻辣火锅，赏壮丽山河。";
break;
}
break;
case "福建省":
switch (ipLocation.data.city) {
case "厦门市":
posdesc = "鼓浪屿听海，厦门美食让人流连忘返。";
break;
case "福州市":
posdesc = "有福之州，来此感受千年古城。";
break;
default:
posdesc = "福建山水如画，美景无处不在。";
break;
}
break;
case "山东省":
switch (ipLocation.data.city) {
case "青岛市":
posdesc = "来青岛喝啤酒，看大海吧！";
break;
case "济南市":
posdesc = "泉城济南，四面荷花三面柳。";
break;
default:
posdesc = "山东好客，欢迎来感受齐鲁文化！";
break;
}
break;
case "江苏省":
switch (ipLocation.data.city) {
case "南京市":
posdesc = "六朝古都南京，历史与现代的碰撞。";
break;
case "苏州市":
posdesc = "来苏州，感受园林之美。";
break;
default:
posdesc = "水乡泽国，江南佳丽地。";
break;
}
break;
case "河北省":
posdesc = "燕赵大地，英雄辈出的河北，等你探索！";
break;
case "河南省":
switch (ipLocation.data.city) {
case "郑州市":
posdesc = "中原大地，郑州是交通枢纽与历史重镇。";
break;
case "洛阳市":
posdesc = "千年古都洛阳，牡丹花开的城市。";
break;
default:
posdesc = "这里是河南，历史悠久文化灿烂。";
break;
}
break;
case "湖南省":
switch (ipLocation.data.city) {
case "长沙市":
posdesc = "热辣长沙，吃小龙虾逛黄兴路步行街。";
break;
default:
posdesc = "湖南，烟雨迷蒙的湘江流过这片土地。";
break;
}
break;
case "湖北省":
switch (ipLocation.data.city) {
case "武汉市":
posdesc = "来大武汉，过长江大桥，吃热干面！";
break;
default:
posdesc = "湖北，长江中游的明珠，风景秀丽。";
break;
}
break;
case "安徽省":
switch (ipLocation.data.city) {
case "合肥市":
posdesc = "创新之城合肥，科教文化汇聚地。";
break;
default:
posdesc = "安徽山水，黄山、九华山欢迎你。";
break;
}
break;
case "广西壮族自治区":
switch (ipLocation.data.city) {
case "桂林市":
posdesc = "桂林山水甲天下，风景如画。";
break;
case "南宁市":
posdesc = "绿城南宁，宜居宜游。";
break;
default:
posdesc = "广西山清水秀，民俗风情浓郁。";
break;
}
break;
case "贵州省":
posdesc = "来贵州，品茅台，赏黄果树瀑布。";
break;
case "云南省":
switch (ipLocation.data.city) {
case "昆明市":
posdesc = "春城昆明，四季如春，风景秀丽。";
break;
case "大理市":
posdesc = "苍山洱海，大理古城，你来了就不想走。";
break;
default:
posdesc = "云南风景独特，风情万种。";
break;
}
break;
case "西藏自治区":
posdesc = "世界屋脊西藏，神秘而纯净。";
break;
case "新疆维吾尔自治区":
posdesc = "辽阔新疆，民族风情与壮丽景观并存。";
break;
case "内蒙古自治区":
posdesc = "草原辽阔的内蒙古，等你来策马奔腾。";
break;
case "宁夏回族自治区":
posdesc = "宁夏，塞上江南，黄河流经的美丽地方。";
break;
case "海南省":
posdesc = "阳光、沙滩、椰风海韵，欢迎来海南度假。";
break;
default:
posdesc = "带我去你的城市逛逛吧！";
break;
}
break;
default:
posdesc = "带我去你的国家逛逛吧";
break;
}
// 根据时间显示不同欢迎语
let timeChange;
let date = new Date();
if (date.getHours() >= 5 && date.getHours() < 11) timeChange = "<span>🌤️ 早上好，一日之计在于晨</span>";
else if (date.getHours() >= 11 && date.getHours() < 13) timeChange = "<span>☀️ 中午好，记得午休喔~</span>";
else if (date.getHours() >= 13 && date.getHours() < 17) timeChange = "<span>🕞 下午好，饮茶先啦！</span>";
else if (date.getHours() >= 17 && date.getHours() < 19) timeChange = "<span>🚶‍♂️ 即将下班，记得按时吃饭~</span>";
else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span>🌙 晚上好，夜生活嗨起来！</span>";
else timeChange = "<span>🛏 夜深了，早点休息，少熬夜 </span>";
// 更新页面内容
let welcome = document.getElementById("welcome-info");
if(welcome){
welcome.innerHTML =
' 欢迎来自 <b><span>'+pos+'</span></b> 的小友💖<br>' +
' 当前位置距离 <b>博主</b> 约 <b><span>'+distMine.toFixed(2)+'</span></b> 公里！<br>' +
' 您的IP地址为：<b><span>'+ipLocation.data.ip+'</span></b><br>' +
' '+ timeChange + '<br>' +
' Tip：<b><span style="font-size: 15px;">'+posdesc+'</span></b>';
}
})
.catch(error => console.error('Error:', error));
// 计算距离函数
function getDistance(e1, n1, e2, n2) {
if(!e2 || !n2){
return '未知地点'
}
const R = 6371; // 地球半径，单位为公里
const {sin, cos, asin, PI, hypot} = Math;
let getPoint = (e, n) => {
e *= PI / 180;
n *= PI / 180;
return {x: cos(n) * cos(e), y: cos(n) * sin(e), z: sin(n)};
};
let a = getPoint(e1, n1);
let b = getPoint(e2, n2);
let c = hypot(a.x - b.x, a.y - b.y, a.z - b.z);
let r = asin(c / 2) * 2 * R;
return Math.round(r);
}
// 访客信息 END
</script>
阿里IconFont的Symbol彩色图标
1：打开阿里巴巴iconfont官网，登录账号-新建项目-选择喜欢的图标-添加入库-找到右上角购物车-添加到项目-我的项目-更新代码-选择Symbol格式-复制代码-填入后台设置。
2：也可以在 Halo 后台「全局 head 标签」里注入
<!-- 阿里巴巴 IconFont Symbol 注入 -->
<script src="https://at.alicdn.com/t/c/font_4242261_hx71wjq7ya6.js"></script>
侧栏音乐卡片
1：直接去音乐卡片Github项目仓库免费部署。
2：也可以直接用我部署好的地址：music.oortaka.top，音乐ID改为自己的，例如：https://music.oortaka.top/?id=1806165735&theme=card&title=最近最常听&show_rainbow=1&show_bar=1&mode=light&size=300&show_random=1&type=0
3：仓库有教程，按照那个填入后台设置。
友链底部美化
同右图效果：在后台设置底部显示内容添加下面的代码
<h2 id="友链文章">
<a href="#友链文章" class="headerlink" title="友链文章" draggable="false" data-pjax-state=""></a>
友链文章
</h2>
<div class="tabs" id="test1">
<ul class="nav-tabs">
<li class="tab active"><button type="button" data-href="#test1-1">鱼塘mini</button></li>
<li class="tab"><button type="button" data-href="#test1-2">好文推荐</button></li>
<li class="tab"><button type="button" data-href="#test1-3">实用工具</button></li>
<li class="tab"><button type="button" data-href="#test1-4">通用技术</button></li>
<li class="tab"><button type="button" data-href="#test1-5">前端技术</button></li>
<li class="tab"><button type="button" data-href="#test1-6">博客魔改</button></li>
<li class="tab"><button type="button" data-href="#test1-7">有趣文章</button></li>
</ul>
<div class="tab-contents">
<div class="tab-item-content active" id="test1-1">
<div class="note warning simple">
<p>以下内容自动生成，未经过审核。</p>
</div>
<!-- 这里指定后端“基址”，不要带 /all -->
<div id="cf-container" data-api="https://fcircle.oortaka.top"></div>
<button type="button" class="tab-to-top" aria-label="scroll to top">
<i class="haofont hao-icon-arrow-up"></i>
</button>
</div>
<div class="tab-item-content" id="test1-2">
<ul>
<!--
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://blog.eurkon.com/post/1213ef82.html">
Hexo 博客文章统计图 🔥
</a><br>
本博客的关于本站中的统计部分来源于该教程。
</p>
</li>
-->
</ul>
<button type="button" class="tab-to-top" aria-label="scroll to top">
<i class="haofont hao-icon-arrow-up"></i>
</button>
</div>
<div class="tab-item-content" id="test1-3">
<ul>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://www.antmoe.com/posts/91a1b4e4/index.html">
如何为评论系统快速添加表情
</a><br>
方便快捷的在你的twikoo、Valine、Waline甚至文章中添加表情。
</p>
</li>
</ul>
<button type="button" class="tab-to-top" aria-label="scroll to top">
<i class="haofont hao-icon-arrow-up"></i>
</button>
</div>
<div class="tab-item-content" id="test1-4">
<ul>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://blog.juanertu.com/archives/fccd987.html">
VSCode个人常用插件合集
</a><br>
非常棒的实用VSCode插件合集，值得每个都看看。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://akilar.top/posts/8a76eb87/">
Win10:PowerShell美化教程
</a><br>
一个好看的终端才是好心情的开始。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://nanzx.top/posts/932b/">
Java基础面试题
</a><br>
java干货分享，送给面试要求造核弹的你.
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://www.antmoe.com/posts/2db95804/index.html">
自动提交网址给百度
</a><br>
SEO优化必备，不过不要重复内容提交过多，适度最好。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://www.antmoe.com/posts/77e27eac/index.html">
AppStore降价监控
</a><br>
直呼好家伙！心心念念的app终于不用天天盯着了。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://forever97.top/2021/01/18/htmlquick/">
HTML快捷键
</a><br>
新技能get，再也不用一个字母一个字母去敲了，太方便了～！
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://weilining.cf/119.html">
GitHub fork之后如何同步
</a><br>
在github上直接操作挺繁琐的，用本地git再提交就方便很多了。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://zfe.space/post/python_bili.html">
python数据分析入门——bili数据抓取到数据分析网站的实战记录
</a><br>
冰老师最近的python爬虫力作，功能非常强大，吐血推荐。
</p>
</li>
</ul>
<button type="button" class="tab-to-top" aria-label="scroll to top">
<i class="haofont hao-icon-arrow-up"></i>
</button>
</div>
<div class="tab-item-content" id="test1-5">
<ul>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://blog.ccknbc.cc/posts/i-dont-really-want-html/">
我真的不想要.html
</a><br>
网站地址优化教程。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://noionion.top/44642.html">
麻麻，我有自己的图床啦！简单搭建一个廉价、私人、无限制图片大小的稳定图床
</a><br>
利用阿里云oss搭建图床，不错的教程。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://www.imaegoo.com/2020/h5-smooth-scroll/">
PC 浏览器平滑惯性滚动（smooth scroll）一套简单实现
</a><br>
让电脑滚动页面的时候也可以有惯性。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://blog.juanertu.com/archives/59df034f.html">
那些你总是要用却又死活记不住的css属性
</a><br>
涵盖很多不是特别常用但是偶尔还会用到的css属性。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://www.antmoe.com/posts/61248f6/index.html">
Gulp4简单使用
</a><br>
从零开始学会gulp打包压缩。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://blog.imzjw.cn/posts/rdp-freenom">
利用Google RDP免费注册Freenom域名
</a><br>
白嫖域名的新选择。
</p>
</li>
</ul>
<button type="button" class="tab-to-top" aria-label="scroll to top">
<i class="haofont hao-icon-arrow-up"></i>
</button>
</div>
<div class="tab-item-content" id="test1-6">
<ul>
<!--
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://akilar.top/posts/f99b208/">
基于Butterfly主题的美化日记
</a><br>
Akilar的全部魔改方案教程。
</p>
</li>
-->
</ul>
<button type="button" class="tab-to-top" aria-label="scroll to top">
<i class="haofont hao-icon-arrow-up"></i>
</button>
</div>
<div class="tab-item-content" id="test1-7">
<ul>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://snow.js.org/snow/">
雪（精选集）
</a><br>
小林的小说和随笔，推荐去看。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://www.7b3.org/posts/116.html">
为什么铺天盖地都是Python的广告？
</a><br>
段子手力作。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://snow.js.org/mabaoguo/">
健身房的年轻后生不讲武德，把马保国老师的眼睛给打肿了
</a><br>
年轻人耗子尾汁。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://zfe.space/post/20201213.html">
《赛博朋克2077》：小白萌新避坑指南
</a><br>
冰老师的游戏测评力作。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="http://www.cq.qcwy.org.cn/2020/07/23/life/life-big/">
长大后明白的道理
</a><br>
走心长文，人生不同的阶段都有不同的感悟，对身边对世界都有自己的理解，且不断变化。
</p>
</li>
<li>
<p>
<a target="_blank" rel="noopener external nofollow" href="https://akilar.top/posts/da70cd4e/">
微小说：蜃楼
</a><br>
Aki早期文学力作，文末附带阅读理解答案。
</p>
</li>
</ul>
<button type="button" class="tab-to-top" aria-label="scroll to top">
<i class="haofont hao-icon-arrow-up"></i>
</button>
</div>
<!--
<div class="tab-item-content" id="test1-8">
<p>这个模块的目的是因为通过友链的名称和头像可能会逛得漫无目的，该模块能够帮助访客减少逛消耗的时间，提升效率。提升友链该文章访问量，增加曝光。可能对贵站SEO有帮助。</p>
<p><strong>因时间精力有限，本模块暂不更新了</strong></p>
<p><strong>Q: 怎样才能收录进来呢</strong><br>A: 一般来说友链的置顶文章会优先收录，非博客搭建、非魔改相关文章优先收录，非学习笔记优先收录</p>
<p><strong>Q: 可以自荐吗</strong><br>A: 目前暂不可以自荐，推荐将博客优秀文章置顶</p>
<p><strong>Q: 被收录的可以要求删掉吗</strong><br>A: 可以在评论区留言文章名称，在下次博客更新后删除</p>
<p><strong>Q: 🔥 标志是什么</strong><br>A：对我个人帮助大的文章，不作为文章品质参考，所有收录文章都质量比较高</p>
<button type="button" class="tab-to-top" aria-label="scroll to top">
<i class="haofont hao-icon-arrow-up"></i>
</button>
</div>
-->
</div>
</div>
<details>
<summary>友情链接页免责声明</summary>
<h2 id="免责声明">
<a href="#免责声明" class="headerlink" title="免责声明" data-pjax-state=""></a>
免责声明
</h2>
<p>
本博客遵守美国相关法律。本页内容仅作为方便学习而产生的快速链接的链接方式，对与友情链接中存在的链接、好文推荐链接等均为其他网站。我本人能力有限无法逐个甄别每篇文章的每个字，并无法获知是否在收录后原作者是否对链接增加了违反法律甚至其他破坏用户计算机等行为。因为部分友链网站甚至没有做备案、域名并未做实名认证等，所以友链网站均可能存在风险，请你须知。
</p>
<p>所以在我力所能及的情况下，我会包括但不限于：</p>
<ol>
<li>针对收录的博客中的绝大多数内容通过标题来鉴别是否存在有风险的内容</li>
<li>在收录的友链好文推荐中检查是否存在风险内容</li>
</ol>
<p>但是你在访问的时候，仍然无法避免，包括但不限于：</p>
<ol>
<li>作者更换了超链接的指向，替换成了其他内容</li>
<li>作者的服务器被恶意攻击、劫持、被注入恶意内容</li>
<li>作者的域名到期，被不法分子用作他用</li>
<li>作者修改了文章内容，增加钓鱼网站、广告等无效信息</li>
<li>不完善的隐私保护对用户的隐私造成了侵害、泄漏</li>
</ol>
<p>最新文章部分为机器抓取，本站作者未经过任何审核和筛选，本着友链信任原则添加的。如果你发现其中包含违反中华人民共和国法律的内容，请及时联系和举报。该友链会被拉黑。</p>
<p>
如果因为从本页跳转给你造成了损失，深表歉意，并且建议用户如果发现存在问题在本页面进行回复。通常会很快处理。如果长时间无法得到处理，建议联系
<strong>oortaka0825@gmail.com</strong>。
</p>
</details>
<h2 id="友情链接申请">
<a href="#友情链接申请" class="headerlink" title="友情链接申请" draggable="false" data-pjax-state=""></a>
友情链接申请
</h2>
<p>很高兴能和非常多的朋友们交流，如果你也想加入友链，可以在下方留言，我会在不忙的时候统一添加。</p>
<details>
<summary>🧀 友链申请方式</summary>
<h2 id="本站添加的友链要求">
<a href="#本站添加的友链要求" class="headerlink" title="本站添加的友链要求" data-pjax-state=""></a>
本站添加的友链要求
</h2>
<ol>
<li>能够正常访问</li>
<li>含本站友链</li>
<li>网站类型为<strong>个人博客</strong></li>
</ol>
<p>
请（<a onclick="addFriendLink()" href="#post-comment" data-pjax-state="anchor">点击这里快速添加</a>）
站点信息申请友情链接，申请后在我不忙的时候会统一添加，即使不通过也会给予邮件回复。
</p>
<h2 id="你提交的信息有可能被修改">
<a href="#你提交的信息有可能被修改" class="headerlink" title="你提交的信息有可能被修改" data-pjax-state=""></a>
你提交的信息有可能被修改
</h2>
<p>如果有修改，我会将修改内容进行告知</p>
<ol>
<li>
为了友链相关页面和组件的统一性和美观性，可能会对你的昵称进行缩短处理，例如昵称包含<strong>博客</strong>、<strong>XX的XX</strong>等内容或形式将被简化。
</li>
<li>
为了图片加载速度和内容安全性考虑，头像实际展示图片均使用博客自己图床，所以无法收到贵站自己的头像更新，如果有迫切的更改信息需求，请在本页的评论中添加。
</li>
</ol>
<h2 id="我的友链信息">
<a href="#我的友链信息" class="headerlink" title="我的友链信息" data-pjax-state=""></a>
我的友链信息
</h2>
<p>为了避免图床问题，建议你将头像存储到贵站图床。</p>
<ol>
<li>我的名称: <code>内密心書</code></li>
<li>网站地址: <code>https://oortaka.top</code></li>
<li>描述: <code>喜欢捣鼓的博主</code></li>
<li>头像: <code>https://oortaka.top/upload/10-tuya.png</code></li>
<li>背景: <code>https://oortaka.top/upload/10-tuya.jpeg</code></li>
</ol>
<h2 id="友链申请格式如下"><strong>友链申请格式如下🥳</strong></h2>
<pre class="language-bash" tabindex="0"><code class="hljs language-bash">昵称（请勿包含博客等字样）：
网站地址（要求博客地址，请勿提交个人主页）：
头像图片url（请提供尽可能清晰的图片，我会上传到我自己的图床）：
描述：</code></pre>
<h2 id="友链申请格式示例"><strong>示例 📢：</strong></h2>
<pre class="language-bash" tabindex="0"><code class="hljs language-bash">昵称：困困鱼
网站地址：https://0206.ink
头像图片url：https://oortaka.top/upload/109951167249792628%20(1)-topaz-denoise-enhance-tuya.jpg
描述：喜欢捣鼓的博主
背景: https://oortaka.top/upload/10-tuya.jpeg</code></pre>
</details>
<ol>
<li>我的名称: <code>内密心書</code></li>
<li>网站地址: <code>https://oortaka.top</code></li>
<li>描述: <code>喜欢捣鼓的博主</code></li>
<li>头像: <code>https://oortaka.top/upload/10-tuya.png</code></li>
<li>背景: <code>https://oortaka.top/upload/10-tuya.jpeg</code></li>
</ol>
<p>请<strong>勾选</strong>你符合的条件：</p>
<div id="friendlink_checkboxs">
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox1" onclick="checkForm()">我已添加 <b>内密心書</b> 博客的友情链接
</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox2" onclick="checkForm()">我的链接主体为 <b>个人</b>，网站类型为<b>博客</b>
</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox3" onclick="checkForm()">我的网站现在可以在全球区域正常访问
</label>
</p>
<p>
<label class="checkbox">
<input type="checkbox" id="checkbox4" onclick="checkForm()">网站内容符合美国法律法规
</label>
</p>
</div>
<script>
var twikooSubmit = document.getElementsByClassName("tk-submit")[0];
if (twikooSubmit) twikooSubmit.style.opacity = "0";
function checkForm() {
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");
var checkbox4 = document.getElementById("checkbox4");
var twikooSubmit = document.getElementsByClassName("tk-submit")[0];
if (checkbox1.checked && checkbox2.checked && checkbox3.checked && checkbox4.checked) {
twikooSubmit.style.opacity = "1";
twikooSubmit.style.height = "auto";
twikooSubmit.style.overflow = "auto";
var input = document.getElementsByClassName('el-textarea__inner')[0];
let evt = document.createEvent('HTMLEvents');
evt.initEvent('input', true, true);
input.value =
'昵称（请勿包含博客等字样）：\n' +
'网站地址（要求博客地址，请勿提交个人主页）：\n' +
'头像图片url（请提供尽可能清晰的图片，我会上传到我自己的图床）：\n' +
'描述：\n';
input.dispatchEvent(evt);
input.focus();
input.setSelectionRange(-1, -1);
} else {
twikooSubmit.style.opacity = "0";
twikooSubmit.style.height = "0";
twikooSubmit.style.overflow = "hidden";
}
}
</script>
<!-- 自动从 https://fcircle.oortaka.top/all 读取并填充：鱼塘mini / 好文推荐 / 博客魔改 -->
<script>
(function () {
function boot() {
var box = document.getElementById("cf-container");
if (!box || box.dataset.filled) return;
var BASE = (box.dataset && box.dataset.api) ? String(box.dataset.api) : "";
if (!BASE) { console.warn("[friends] 缺少 data-api"); return; }
BASE = BASE.replace(/\/+$/,"");
box.innerHTML = '<p style="opacity:.6">加载中…</p>';
fetch(BASE + "/all?_t=" + Date.now(), { cache: "no-store" })
.then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
.then(function (data) {
var posts = [];
if (Array.isArray(data)) posts = data;
else if (Array.isArray(data.article_data)) posts = data.article_data;
else if (Array.isArray(data.randompost)) posts = data.randompost;
else if (data && typeof data === "object") posts = [data];
posts.sort(function (a,b) {
var ta = new Date(a.updated || a.created || 0).getTime();
var tb = new Date(b.updated || b.created || 0).getTime();
return tb - ta;
});
renderMini(box, posts.slice(0, 8)); // 鱼塘 mini：最新 8 条
renderList("#test1-2 ul", posts.slice(0, 10)); // 好文推荐：最新 10 条
var hackRe = /魔改|美化|主题|样式|布局|CSS|JS|Hexo|Halo|Butterfly|Volantis|Matery|Stellar|Acrylic|NexT|Stun|Yun/i;
renderList("#test1-6 ul", posts.filter(function(p){ return hackRe.test(p.title||""); }).slice(0, 10)); // 博客魔改
box.dataset.filled = "1";
})
.catch(function (e) {
console.error("[friends-tabs] load failed:", e);
box.innerHTML = "<p>加载失败：" + e.message + "</p>";
});
}
function renderMini(container, items) {
if (!items.length) { container.innerHTML = '<p style="opacity:.6">暂无数据</p>'; return; }
var html = '<ul class="mini-list" style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:0;padding:0;list-style:none;">' +
items.map(function (p) {
var t = esc(p.title || "（无标题）");
var a = esc(p.author || "");
var d = esc(p.updated || p.created || "");
var l = p.link || "#";
return (
'<li class="mini-item" style="background:var(--heo-card-bg);border-radius:12px;padding:.75rem 1rem;">' +
'<a target="_blank" rel="noopener noreferrer nofollow" href="' + l + '" style="font-weight:600;display:block;line-height:1.4;margin-bottom:.35rem;">' + t + '</a>' +
'<div class="mini-meta" style="font-size:.85em;opacity:.7;">' + a + (a && d ? " · " : "") + d + '</div>' +
'</li>'
);
}).join("") +
"</ul>";
container.innerHTML = html;
}
function renderList(selector, items) {
var ul = document.querySelector(selector);
if (!ul) return;
if (!items.length) { ul.innerHTML = '<li><p style="opacity:.6">暂无数据</p></li>'; return; }
ul.innerHTML = items.map(function (p) {
var t = esc(p.title || "（无标题）");
var a = esc(p.author || "");
var d = esc(p.updated || p.created || "");
var l = p.link || "#";
return '<li><p><a target="_blank" rel="noopener noreferrer nofollow" href="' + l + '">' + t + '</a><br>' + (a ? a + ' · ' : '') + d + '</p></li>';
}).join("");
}
function esc(s){ return String(s).replace(/[&<>"]/g, m => ({'&':'&','<':'<','>':'>','"':'"'}[m])); }
if (document.readyState !== "loading") boot();
document.addEventListener("DOMContentLoaded", boot);
document.addEventListener("pjax:complete", boot);
document.addEventListener("pjax:success", boot);
})();
</script>
<style>
.tk-comments > .tk-submit { opacity: 0; height: 0; transition: opacity .5s, height .5s; overflow: hidden; }
.checkbox { display: flex; align-items: center; }
.checkbox input {
appearance: none; position: relative; height: 16px; width: 16px;
transition: all 0.15s ease-out 0s; cursor: pointer; display: inline-block;
outline: none; border-radius: 2px; flex-shrink: 0; margin-right: 8px;
border: 2px solid #2196f3; pointer-events: none;
}
.checkbox input[type="checkbox"]::before { left: 1px; top: 5px; width: 0; height: 2px; transition: all 0.2s ease-in; transform: rotate(45deg); }
.checkbox input[type="checkbox"]::after { right: 7px; bottom: 3px; width: 2px; height: 0; transition: all 0.2s ease-out; transform: rotate(40deg); transition-delay: 0.25s; }
.checkbox input[type="checkbox"]:checked { background: #2196f3; }
.checkbox input[type="checkbox"]:checked::before { left: 0; top: 7px; width: 6px; height: 2px; }
.checkbox input[type="checkbox"]:checked::after { right: 3px; bottom: 1px; width: 2px; height: 10px; }
.checkbox.minus input[type="checkbox"]::before { left: 1px; top: 5px; width: 10px; height: 2px; }
.checkbox.minus input[type="checkbox"]:checked::after { left: 1px; top: 5px; width: 10px; height: 2px; }
.checkbox.plus input[type="checkbox"]::before { transform: rotate(0); left: 1px; top: 5px; width: 0; height: 2px; }
.checkbox.plus input[type="checkbox"]::after { transform: rotate(0); left: 5px; top: 1px; width: 2px; height: 0; }
.checkbox.plus input[type="checkbox"]:checked::before { left: 1px; top: 5px; width: 10px; height: 2px; }
.checkbox.plus input[type="checkbox"]:checked::after { left: 5px; top: 1px; width: 2px; height: 10px; }
.checkbox.times input[type="checkbox"]::before { transform: rotate(45deg); left: 3px; top: 1px; width: 0; height: 2px; }
.checkbox.times input[type="checkbox"]::after { transform: rotate(135deg); right: 3px; top: 1px; width: 0; height: 2px; }
.checkbox.times input[type="checkbox"]:checked::before { left: 1px; top: 5px; width: 10px; height: 2px; }
.checkbox.times input[type="checkbox"]:checked::after { right: 1px; top: 5px; width: 10px; height: 2px; }
.checkbox input[type="radio"] { border-radius: 50%; }
.checkbox input[type="radio"]::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; margin: 2px; transform: scale(0); transition: all 0.25s ease-out; }
.checkbox input[type="radio"]:checked::before { transform: scale(1); background: var(--text-bg-hover); }
.checkbox red input { border-color: #fe5f58; }
.checkbox.red input[type="checkbox"]:checked { background: #fe5f58; }
.checkbox.red input[type="radio"]:checked::before { background: #fe5f58; }
.checkbox.green input { border-color: #3dc550; }
.checkbox.green input[type="checkbox"]:checked { background: #3dc550; }
.checkbox.green input[type="radio"]:checked::before { background: #3dc550; }
.checkbox.yellow input { border-color: #ffbd2b; }
.checkbox.yellow input[type="checkbox"]:checked { background: #ffbd2b; }
.checkbox.yellow input[type="radio"]:checked::before { background: #ffbd2b; }
.checkbox.cyan input { border-color: #1bcdfc; }
.checkbox.cyan input[type="checkbox"]:checked { background: #1bcdfc; }
.checkbox.cyan input[type="radio"]:checked::before { background: #1bcdfc; }
.checkbox.blue input { border-color: #2196f3; }
.checkbox.blue input[type="checkbox"]:checked { background: #2196f3; }
.checkbox.blue input[type="radio"]:checked::before { background: #2196f3; }
.checkbox p { display: inline-block; margin-top: 2px !important; margin-bottom: 0 !important; }
.checkbox input[type="checkbox"]::before,
.checkbox input[type="checkbox"]::after { position: absolute; content: ""; background: #fff; }
</style>
友链鱼塘配置
1：进入配置项目部署后端地址，在fc_settings.yaml文件里面把link: "https://oortaka.top/links/"改成自己的友链地址，鱼塘会在这里拉取你添加的友链并读取他们的文章。
2：部署好后端后台token地址填写配置地址：例如https://fcircle.oortaka.top/后面必须要有/。
关于页面访问统计
进入51LA网站添加你的站点。
1：进入V6 流量统计系统-查看报表-配置-参数设置-把数据挂件打开。
2：进入V6 流量统计系统-查看报表-配置-参数设置-统计代码-获取SDK追踪代码-把显示代码的id:"3e8j7Si43kD2NNbv"，把这串ID填入主题后台的统计ID。
侧栏文章订阅
1：下载文章订阅插件：点击前往
2：后台主题设置在侧栏添加自定义页面，填入下面的代码：
<follow-card
class="sidebar-subscription"
show-multiline="true"
text-align="center"
show-title="false">
</follow-card>
<style>
/* 全局变量：控制卡片圆角、内边距、宽高等 */
:root {
--follow-card-radius: 1rem; /* 卡片圆角 */
--follow-input-radius: 1rem; /* 输入框圆角 */
--follow-button-radius: 1rem; /* 按钮圆角 */
/* 卡片内边距（你原来的三档，先修正语法） */
--follow-card-padding-sm: 0.2rem;
--follow-card-padding-md: 0.2rem;
--follow-card-padding-lg: 0.2rem;
/* 新增：宽高与左右加宽(出血)控制 */
--follow-card-width: 272px; /* 主体宽度 */
--follow-card-max-width: 272px; /* 最大宽度；可改成 420px 等 */
--follow-card-height: 160px; /* 固定高度就填数值，比如 220px */
--follow-card-min-height: 100px; /* 最小高度，比如 160px */
--follow-card-padding-x: 0.001rem; /* 左右内边距（便于单独控制） */
--follow-card-padding-y: 1.3rem; /* 上下内边距 */
--follow-card-bleed-x: 1rem; /* 左右“出血”量；想更宽就设 1rem/1.5rem */
}
/* 消费这些变量 */
follow-card.sidebar-subscription {
display: block;
box-sizing: border-box;
width: var(--follow-card-width);
max-width: var(--follow-card-max-width);
height: var(--follow-card-height);
min-height: var(--follow-card-min-height);
padding: var(--follow-card-padding-y) var(--follow-card-padding-x);
/* 让卡片突破外层左右内边距（可选）*/
margin-left: calc(-1 * var(--follow-card-bleed-x));
margin-right: calc(-1 * var(--follow-card-bleed-x));
border-radius: var(--follow-card-radius);
}
/* 若组件暴露了内层 part，可同步把最小高度传进去（可选，没暴露就忽略） */
follow-card.sidebar-subscription::part(container),
follow-card.sidebar-subscription::part(card) {
min-height: var(--follow-card-min-height);
}
/* 把订阅卡整块往上提，数值自己调 */
.card-widget .item-content > follow-card.sidebar-subscription,
.card-widget follow-card.sidebar-subscription,
follow-card.sidebar-subscription {
margin-top: -30px !important; /* 改成 -16 / -28 / -36 都行 */
display: block !important;
position: relative;
z-index: 2; /* 防止被标题盖住 */
}
</style>
阅读建议
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果
