Mix Space社区主题
Cyber
Shiro 的分支, 以炫酷赛博风为核心开发目标
At87668/Cyber
Cyber — A cyber style theme for Mx Space.
概述
注意！
Cyber 是 Shiro 的社区分支，请勿向原作者 (Innei) 报告本项目的 Issue。
版本要求：目前 Cyber 仅支持 Mix Space Core 版本 == 13.x (API v3)。
由 Shiro 分支而来，专为 Mix Space 生态系统设计的现代化个人站点前端。在继承 Shiro 极简主义与极致性能的基础上，适配了最新的 API v3，并融入了更具科技感的视觉风格。
欢迎体验 Cyber 带来的赛博炫酷！
部署指南
前端部署
Vercel 一键部署（推荐）
点击下方按钮即可快速部署，部署时请填写以下环境变量：
环境变量说明
| 变量名 | 必填 | 说明 |
|---|---|---|
NEXT_PUBLIC_API_URL | ✅ | Mix Space Core API 地址，必须以 /api/v3 结尾 |
NEXT_PUBLIC_GATEWAY_URL | ✅ | Mix Space Gateway 地址，用于 WebSocket 等功能 |
ENABLE_EXPERIMENTAL_COREPACK | ❌ | 建议设为 1，启用 Corepack 以优化依赖管理 |
从其他方式部署
参照 Shiro
后端配置
-
在管理员面板中切换至
代码片段区 -
新建一个项: 名称为
cyber, 分组为theme, 类型为json
填入以下内容并按需修改
{
"footer": {
"otherInfo": {
"date": "2020-{{now}}",
"icp": {
"text": "萌 ICP 备 20236136 号",
"link": "https://icp.gov.moe/?keyword=20236136"
}
},
"linkSections": [
{
"name": "关于",
"links": [
{
"name": "关于本站",
"href": "/about-site"
},
{
"name": "关于我",
"href": "/about"
},
{
"name": "关于此项目",
"href": "https://github.com/innei/Shiro",
"external": true
}
]
},
{
"name": "更多",
"links": [
{
"name": "时间线",
"href": "/timeline"
},
{
"name": "友链",
"href": "/friends"
},
{
"name": "监控",
"href": "https://status.innei.in/status/main",
"external": true
}
]
},
{
"name": "联系",
"links": [
{
"name": "写留言",
"href": "/message"
},
{
"name": "发邮件",
"href": "mailto:i@innei.ren",
"external": true
},
{
"name": "GitHub",
"href": "https://github.com/innei",
"external": true
}
]
}
]
},
"config": {
"color": {
"light": [
"#33A6B8",
"#FF6666",
"#26A69A",
"#fb7287",
"#69a6cc",
"#F11A7B",
"#78C1F3",
"#FF6666",
"#7ACDF6"
],
"dark": [
"#F596AA",
"#A0A7D4",
"#ff7b7b",
"#99D8CF",
"#838BC6",
"#FFE5AD",
"#9BE8D8",
"#A1CCD1",
"#EAAEBA"
]
},
"bg": [
"/static/images/F0q8mwwaIAEtird.jpeg",
"/static/images/IMG_2111.jpeg.webp.jpg"
],
"custom": {
"css": [],
"styles": [],
"js": [],
"scripts": []
},
"site": {
"favicon": "/innei.svg",
"faviconDark": "/innei-dark.svg"
},
"hero": {
"title": {
"template": [
{
"type": "h1",
"text": "Hi, I'm ",
"class": "font-light text-4xl"
},
{
"type": "h1",
"text": "Innei",
"class": "font-medium mx-2 text-4xl"
},
{
"type": "h1",
"text": "👋。",
"class": "font-light text-4xl"
},
{
"type": "br"
},
{
"type": "h1",
"text": "A NodeJS Full Stack ",
"class": "font-light text-4xl"
},
{
"type": "code",
"text": "<Developer />",
"class": "font-medium mx-2 text-3xl rounded p-1 bg-gray-200 dark:bg-gray-800/0 hover:dark:bg-gray-800/100 bg-opacity-0 hover:bg-opacity-100 transition-background duration-200"
},
{
"type": "span",
"class": "inline-block w-[1px] h-8 -bottom-2 relative bg-gray-800/80 dark:bg-gray-200/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:animation-blink"
}
]
},
"description": "An independent developer coding with love."
},
"module": {
"activity": {
"enable": true,
"endpoint": "/fn/ps/update"
},
"donate": {
"enable": true,
"link": "https://afdian.net/@Innei",
"qrcode": [
"/static/images/20191211132347.png",
"/static/images/0424213144.png"
]
},
"bilibili": {
"liveId": 1434499
},
"rss": {
"noRSS": true
}
}
}
}- 新建一个项: 名称为
status, 分组为cyber, 类型为function
填入以下内容
export default async function handler(ctx: Context) {
return 'null';
}国际化配置
若您需要在theme/cyber.json配置国际化占位符而不是硬编码name, 您需要新建函数:
例如, 您访问中文页面, 语言编码为zh,
则需要新建: 名称为zh, 分组为i18n, 类型为function
填入以下内容
export default async function handler(ctx: Context) {
return {
"footer": {
"about": "关于",
"about_site": "关于本站",
"about_me": "关于我",
"about_project": "关于此项目",
"more": "更多",
"timeline": "时间线",
"friends": "友链",
"contact": "联系",
"write_message": "写留言",
"send_email": "发邮件"
}
}同理, 若您需要英文翻译, 则在i18n分组下新建en函数。
theme/cyber.json需要遵循以下格式:
{
"footer": {
"linkSections": [
{
"name": "$i18n.footer.about",
"links": [
{
"name": "$i18n.footer.about_site",
"href": "/about-site"
},
{
"name": "$i18n.footer.about_me",
"href": "/about"
}
]
}
]
}
}其中$i18n.xx.xx为 i18n 占位符, 将使用{api_address}/s/i18n/{locale}中的内容进行替换,
例如, 您访问中文页面, 语言编码为zh, {api_address}/s/i18n/zh返回了{"footer":{"about":"关于","about_site":"关于本站"}},
则$i18n.footer.about将替换为关于, $i18n.footer.about_site将替换为关于本站。
注意！
若您访问的语言页面没有配置对应函数, i18n 占位符将保留在页面上。
其他配置信息参见: Shiro
预览
本地开发
git clone https://github.com/At87668/Cyber.git
cd Cyber
pnpm install
cp .env.template .env.local # 编辑 .env.local 填入上述环境变量
pnpm dev