From 05c58760904d73472555c76238318cda75df1963 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=99=B4=E5=A4=A9?= Date: Thu, 5 Mar 2026 23:07:00 +0800 Subject: [PATCH] feat: add Docs Center section with markdown reader to official website MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 4 doc cards: Linux Deploy, Docker Deploy, README, Changelog - Click to open inline markdown reader (fetches from GitHub raw) - marked.js lazy-loaded on first doc open - Spotlight hover effect on doc cards - Keyboard ESC to close reader - Nav links updated with '文档' in desktop + mobile menus --- docs/index.html | 216 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 215 insertions(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 6ee3c36..cf5f61f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -257,6 +257,48 @@ .deploy-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; } .deploy-desc { font-size: 14px; color: var(--text-s); } + /* ══════════════ Docs Center ══════════════ */ + .docs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } + .doc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; display: flex; gap: 16px; align-items: flex-start; backdrop-filter: blur(12px); transition: all 0.3s; cursor: pointer; position: relative; overflow: hidden; } + .doc-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99,102,241,0.06), transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } + .doc-card:hover::before { opacity: 1; } + .doc-card:hover { border-color: var(--border-h); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(99,102,241,0.08); } + .doc-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } + .doc-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; } + .doc-card p { color: var(--text-s); font-size: 13px; margin-bottom: 8px; } + .doc-tags { display: flex; flex-wrap: wrap; gap: 6px; } + .doc-tag { padding: 2px 8px; background: rgba(255,255,255,0.06); border-radius: 4px; font-size: 11px; color: var(--text-t); } + @media (max-width: 640px) { .docs-grid { grid-template-columns: 1fr; } } + + /* Markdown Reader Modal */ + .md-reader { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: flex-start; padding: 40px 20px; overflow-y: auto; } + .md-reader.active { display: flex; } + .md-reader-inner { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; max-width: 820px; width: 100%; position: relative; } + .md-reader-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); border-radius: 16px 16px 0 0; z-index: 1; } + .md-reader-header h3 { font-size: 16px; font-weight: 700; } + .md-reader-header a { color: var(--text-s); font-size: 13px; margin-right: 16px; } + .md-reader-header a:hover { color: var(--accent); } + .md-reader-close { background: none; border: none; color: var(--text-s); cursor: pointer; padding: 4px; border-radius: 8px; transition: all 0.2s; } + .md-reader-close:hover { background: var(--surface); color: var(--text); } + .md-reader-body { padding: 32px; line-height: 1.8; font-size: 15px; } + .md-reader-body h1 { font-size: 24px; font-weight: 800; margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } + .md-reader-body h2 { font-size: 20px; font-weight: 700; margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } + .md-reader-body h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; } + .md-reader-body p { margin-bottom: 12px; } + .md-reader-body ul, .md-reader-body ol { margin-bottom: 12px; padding-left: 24px; } + .md-reader-body li { margin-bottom: 4px; } + .md-reader-body code { background: var(--surface); padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: 'JetBrains Mono', 'Fira Code', monospace; } + .md-reader-body pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; overflow-x: auto; margin-bottom: 16px; } + .md-reader-body pre code { background: none; padding: 0; font-size: 13px; } + .md-reader-body table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 14px; } + .md-reader-body th, .md-reader-body td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; } + .md-reader-body th { background: var(--surface); font-weight: 600; } + .md-reader-body blockquote { border-left: 3px solid var(--accent); padding: 8px 16px; margin: 12px 0; color: var(--text-s); background: var(--surface); border-radius: 0 8px 8px 0; } + .md-reader-body a { color: var(--accent); text-decoration: none; } + .md-reader-body a:hover { text-decoration: underline; } + .md-reader-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; } + .md-loading { text-align: center; padding: 60px; color: var(--text-t); } + /* ══════════════ Ecosystem ══════════════ */ .eco-list { display: flex; flex-direction: column; gap: 16px; } .eco-card { display: flex; align-items: center; justify-content: space-between; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 24px; transition: all 0.3s; } @@ -400,6 +442,7 @@ 架构 开始 部署 + 文档 社区 下载 GitHub @@ -424,6 +467,7 @@ 架构 开始 部署 + 文档 社区 GitHub ↗ @@ -756,6 +800,86 @@ + +
+
+
+
+

文档中心

+

遇到问题？这里有你需要的一切

+
+
+
+
🖥️
+
+

Linux 部署指南

+

从零开始在 Linux 服务器上部署 OpenClaw Gateway，一键脚本 + 手动安装两种方式

+
+ 一键部署 + systemd + PM2 + Nginx 反代 +
+
+
+
+
🐳
+
+

Docker 部署指南

+

容器化部署 OpenClaw，支持 Compose 编排、自定义镜像、Ollama 联动、多实例

+
+ Docker Compose + Dockerfile + Ollama + 反向代理 +
+
+
+
+
📖
+
+

项目主页 README

+

完整的项目介绍，包含安装方式、功能特性、技术架构、源码构建、常见问题

+
+ 安装指南 + 功能介绍 + 源码构建 + 常见问题 +
+
+
+
+
📋
+
+

更新日志

+

每个版本的新增功能、Bug 修复和改进记录

+
+ 新功能 + Bug 修复 + 版本记录 +
+
+
+
+
+
+ + +
+
+
+

+
+ 在 GitHub 上查看 + +
+
+
+
+
+
@@ -1049,7 +1173,7 @@ }); /* ── 3D Tilt on Tech & Gallery Cards ── */ - document.querySelectorAll('.tech-card, .gallery-card, .eco-card').forEach(function(card) { + document.querySelectorAll('.tech-card, .gallery-card, .eco-card, .doc-card').forEach(function(card) { card.classList.add('tilt-card'); card.addEventListener('mousemove', function(e) { var r = card.getBoundingClientRect(); @@ -1061,6 +1185,96 @@ card.style.transform = ''; }); }); + /* ── Doc Card Spotlight ── */ + document.querySelectorAll('.doc-card').forEach(function(card) { + card.addEventListener('mousemove', function(e) { + var r = card.getBoundingClientRect(); + card.style.setProperty('--mouse-x', ((e.clientX - r.left) / r.width * 100) + '%'); + card.style.setProperty('--mouse-y', ((e.clientY - r.top) / r.height * 100) + '%'); + }); + }); + + /* ── Markdown Reader ── */ + var GITHUB_RAW = 'https://raw.githubusercontent.com/qingchencloud/clawpanel/main/'; + var GITHUB_BLOB = 'https://github.com/qingchencloud/clawpanel/blob/main/'; + var docCache = {}; + var markedLoaded = false; + + function loadMarked(cb) { + if (markedLoaded) return cb(); + var s = document.createElement('script'); + s.src = 'https://cdn.jsdelivr.net/npm/marked@15/marked.min.js'; + s.onload = function() { markedLoaded = true; cb(); }; + s.onerror = function() { cb(true); }; + document.head.appendChild(s); + } + + function openDoc(file, title) { + var reader = document.getElementById('mdReader'); + var content = document.getElementById('mdContent'); + var titleEl = document.getElementById('mdTitle'); + var ghLink = document.getElementById('mdGithubLink'); + + titleEl.textContent = title; + var blobPath = file.replace(/^\.\.\//g, ''); + if (!blobPath.startsWith('docs/') && blobPath !== 'README.md' && blobPath !== 'CHANGELOG.md') blobPath = 'docs/' + blobPath; + ghLink.href = GITHUB_BLOB + blobPath; + reader.classList.add('active'); + document.body.style.overflow = 'hidden'; + + if (docCache[file]) { + renderDoc(docCache[file], content); + return; + } + + content.innerHTML = '
加载中...
'; + + loadMarked(function(err) { + if (err) { + content.innerHTML = '
marked.js 加载失败，在 GitHub 上查看
'; + return; + } + var rawPath = file.startsWith('../') ? file.replace('../', '') : 'docs/' + file; + fetch(GITHUB_RAW + rawPath) + .then(function(res) { if (!res.ok) throw new Error(res.status); return res.text(); }) + .then(function(md) { + docCache[file] = md; + renderDoc(md, content); + }) + .catch(function() { + content.innerHTML = '
文档加载失败，在 GitHub 上查看原文
'; + }); + }); + } + + function renderDoc(md, container) { + container.innerHTML = marked.parse(md); + container.querySelectorAll('a').forEach(function(a) { + var href = a.getAttribute('href'); + if (!href) return; + if (href.charAt(0) === '#') { + a.onclick = function(e) { + e.preventDefault(); + var target = container.querySelector('[id="' + href.substring(1) + '"]'); + if (target) target.scrollIntoView({ behavior: 'smooth' }); + }; + } else if (!href.startsWith('http')) { + a.href = GITHUB_BLOB + 'docs/' + href; + a.target = '_blank'; + } + }); + container.scrollTop = 0; + document.getElementById('mdReader').scrollTop = 0; + } + + function closeDoc() { + document.getElementById('mdReader').classList.remove('active'); + document.body.style.overflow = ''; + } + + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape') closeDoc(); + });