给 curve 博客新增朋友圈鱼塘页面
前置条件
- 已经部署了轻量级朋友圈，有自己的
后端地址
玩过安知鱼主题的应该都已经部署过轻量级朋友圈，没部署的看 项目仓库 以及作者的 部署教程
开始魔改
新建 fclite.css 文件
在仓库的 public/css/ 目录新建 fclite.css 文件，代码太长了，点击这里 直接下载，或者到朋友圈作者的 仓库 下载
新建 fclite.js 文件
在仓库的 public/js/ 目录新建 fclite.js 文件，代码也很长，点击这里 直接下载，或者到朋友圈作者的 仓库 下载
新建 friends 页面
在仓库的 pages 目录 下，新建一个 md 文件，文件名为 friends.md，将以下内容粘贴到文件中，并修改 约第48行 的 private_api_url 地址为你的 朋友圈后端地址，保留末尾的/。然后保存：
html
---
title: 友圈鱼塘
aside: false
comment: true
---
# 友圈鱼塘
<div class="friend-circle-container">
<div class="root-container">
<div id="friend-circle-lite-root"></div>
</div>
</div>
<style>
.friend-circle-container {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
overflow-y: scroll;
overflow-x: hidden;
}
.root-container {
width: 100%;
margin-top: 40px;
max-width: 1100px;
}
@media (max-width: 1200px) {
.root-container {
max-width: 95%;
margin-top: 20px;
}
}
</style>
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
// 设置 UserConfig 配置，避免页面加载时未定义
if (typeof window.UserConfig === 'undefined') {
window.UserConfig = {
private_api_url: 'https://rss.811520.xyz/',
page_turning_number: 20,
error_img: 'https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite@latest/static/favicon.ico'
}
}
// 动态加载 fclite.js 并确保初始化
const script = document.createElement('script');
script.src = "/js/fclite.js";
script.defer = true;
script.onload = () => {
// 确保 fclite.js 初始化完成
if (typeof window.FriendCircleLite !== 'undefined') {
window.FriendCircleLite.init();
}
};
document.body.appendChild(script);
})
</script>
<link rel="stylesheet" href="/css/fclite.css">修改主题配置
打开主题配置文件 themeConfig.mjs，搜索 // 导航栏菜单，在 nav 字段下面的 items 字段新增一行：
js
{ text: "友圈鱼塘", link: "/pages/friends", icon: "fish" },最终效果
#curve #blog #朋友圈
给 curve 博客新增朋友圈鱼塘页面https://blog.24811213.xyz/posts/2024-11/110801
赞赏博主
评论 隐私政策