chore: 官网拆分 homepage + 关于页瘦身 + 端口 5175（当前可用状态基线）
This commit is contained in:
Logan.Li committed
1 parent
5eb11826db
commit
be151cb68f
85 files changed
+4420
-1530
No files matched your search
@@ -0,0 +1,693 @@
|
||||
/* OpsXShell 文档站 —— 清爽专业风格（浅色） */
|
||||
:root {
|
||||
--blue: #2563eb;
|
||||
--blue-dark: #1d4ed8;
|
||||
--blue-soft: rgba(37, 99, 235, 0.08);
|
||||
--bg: #f6f8fb;
|
||||
--panel: #ffffff;
|
||||
--border: #e4e9f1;
|
||||
--text: #1c2434;
|
||||
--text-2: #5b6880;
|
||||
--text-3: #98a2b3;
|
||||
--code-bg: #f3f6fb;
|
||||
--code-border: #e1e8f3;
|
||||
--green: #059669;
|
||||
--amber: #b45309;
|
||||
--red: #dc2626;
|
||||
--sidebar-w: 262px;
|
||||
--toc-w: 220px;
|
||||
--topbar-h: 56px;
|
||||
--radius: 10px;
|
||||
--shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.05);
|
||||
--mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 72px;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 14.5px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
a {
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
}
|
||||
.i {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--blue-dark);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ---------- 顶栏 ---------- */
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: saturate(1.4) blur(8px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.topbar-inner {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
height: var(--topbar-h);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.menu-btn {
|
||||
display: none;
|
||||
border: 1px solid var(--border);
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
cursor: pointer;
|
||||
color: var(--text-2);
|
||||
place-items: center;
|
||||
}
|
||||
.menu-btn .i {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.brand-logo {
|
||||
display: inline-flex;
|
||||
}
|
||||
.brand-logo svg {
|
||||
display: block;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.brand-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
.brand-name em {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
color: var(--text-2);
|
||||
margin-left: 2px;
|
||||
}
|
||||
.ver-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--blue);
|
||||
background: var(--blue-soft);
|
||||
border: 1px solid rgba(37, 99, 235, 0.22);
|
||||
padding: 1px 9px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.search {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
max-width: 420px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.search input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 9px;
|
||||
background: var(--bg);
|
||||
padding: 0 14px 0 34px;
|
||||
font-size: 13.5px;
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2398a2b3' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 12px center;
|
||||
}
|
||||
.search input:focus {
|
||||
border-color: var(--blue);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px var(--blue-soft);
|
||||
}
|
||||
.search-panel {
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
max-height: 420px;
|
||||
overflow: auto;
|
||||
padding: 6px;
|
||||
}
|
||||
.search-item {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.search-item:hover,
|
||||
.search-item.sel {
|
||||
background: var(--blue-soft);
|
||||
}
|
||||
.search-item .si-title {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.search-item .si-group {
|
||||
color: var(--text-3);
|
||||
font-size: 11px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.search-item .si-snippet {
|
||||
color: var(--text-2);
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
display: block;
|
||||
}
|
||||
.search-empty {
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
color: var(--text-3);
|
||||
font-size: 13px;
|
||||
}
|
||||
.top-links {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.top-links a {
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ---------- 三栏布局 ---------- */
|
||||
.layout {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
|
||||
gap: 0 28px;
|
||||
padding: 24px 20px 60px;
|
||||
}
|
||||
|
||||
/* 侧栏 */
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: calc(var(--topbar-h) + 24px);
|
||||
align-self: start;
|
||||
max-height: calc(100vh - var(--topbar-h) - 48px);
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: #d6dde8;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nav-group {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.nav-group-title {
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-3);
|
||||
padding: 0 10px 6px;
|
||||
}
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 13.5px;
|
||||
color: var(--text-2);
|
||||
text-decoration: none !important;
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
.nav-link:hover {
|
||||
background: rgba(37, 99, 235, 0.06);
|
||||
color: var(--text);
|
||||
}
|
||||
.nav-link.active {
|
||||
background: var(--blue-soft);
|
||||
color: var(--blue-dark);
|
||||
font-weight: 600;
|
||||
border-left-color: var(--blue);
|
||||
}
|
||||
.sidebar-foot {
|
||||
margin-top: 24px;
|
||||
padding: 12px 10px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 11.5px;
|
||||
color: var(--text-3);
|
||||
}
|
||||
|
||||
/* 内容 */
|
||||
.content {
|
||||
min-width: 0;
|
||||
max-width: 860px;
|
||||
}
|
||||
.breadcrumb {
|
||||
font-size: 12.5px;
|
||||
color: var(--text-3);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.breadcrumb span {
|
||||
margin: 0 6px;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0 0 6px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.page-meta {
|
||||
font-size: 12.5px;
|
||||
color: var(--text-3);
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
/* Markdown 排版 */
|
||||
.md h2 {
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
margin: 38px 0 12px;
|
||||
padding-top: 8px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.md h3 {
|
||||
font-size: 16.5px;
|
||||
font-weight: 700;
|
||||
margin: 26px 0 8px;
|
||||
}
|
||||
.md h2 + h3,
|
||||
.md h1 + h2 {
|
||||
margin-top: 18px;
|
||||
}
|
||||
.md p {
|
||||
margin: 10px 0;
|
||||
color: #2a3348;
|
||||
}
|
||||
.md ul,
|
||||
.md ol {
|
||||
padding-left: 22px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.md li {
|
||||
margin: 5px 0;
|
||||
color: #2a3348;
|
||||
}
|
||||
.md li::marker {
|
||||
color: var(--blue);
|
||||
}
|
||||
.md strong {
|
||||
color: var(--text);
|
||||
}
|
||||
.md hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 30px 0;
|
||||
}
|
||||
.md img {
|
||||
max-width: 100%;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.md blockquote {
|
||||
margin: 14px 0;
|
||||
padding: 10px 16px;
|
||||
border-left: 3px solid var(--blue);
|
||||
background: var(--blue-soft);
|
||||
border-radius: 0 8px 8px 0;
|
||||
color: #33415e;
|
||||
}
|
||||
|
||||
/* 表格 */
|
||||
.md table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
font-size: 13.5px;
|
||||
background: #fff;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 0 1px var(--border);
|
||||
}
|
||||
.md th,
|
||||
.md td {
|
||||
padding: 9px 14px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
vertical-align: top;
|
||||
}
|
||||
.md th {
|
||||
background: #f9fbfe;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.md tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 代码块 */
|
||||
.md code {
|
||||
font-family: var(--mono);
|
||||
font-size: 12.8px;
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--code-border);
|
||||
border-radius: 5px;
|
||||
padding: 1px 6px;
|
||||
color: #334155;
|
||||
}
|
||||
.md pre {
|
||||
position: relative;
|
||||
background: #0f172a;
|
||||
color: #dbe4f3;
|
||||
border-radius: var(--radius);
|
||||
padding: 16px 16px 14px;
|
||||
overflow-x: auto;
|
||||
margin: 16px 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.md pre code {
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
.md pre .lang-tag {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 12px;
|
||||
font-size: 10.5px;
|
||||
color: #7c8db0;
|
||||
font-family: var(--mono);
|
||||
text-transform: lowercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.md pre .copy-btn {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 60px;
|
||||
font-size: 11px;
|
||||
color: #9fb0d0;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 2px 9px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.md pre:hover .copy-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
.md pre .copy-btn:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
/* 行内高亮 token */
|
||||
.md pre .tok-key {
|
||||
color: #7dd3fc;
|
||||
}
|
||||
.md pre .tok-str {
|
||||
color: #86efac;
|
||||
}
|
||||
.md pre .tok-num {
|
||||
color: #fcd34d;
|
||||
}
|
||||
.md pre .tok-com {
|
||||
color: #64748b;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 提示块（通过 blockquote 首字符约定） */
|
||||
.md blockquote.tip {
|
||||
border-left-color: var(--green);
|
||||
background: rgba(5, 150, 105, 0.07);
|
||||
}
|
||||
.md blockquote.warn {
|
||||
border-left-color: var(--amber);
|
||||
background: rgba(180, 83, 9, 0.07);
|
||||
}
|
||||
|
||||
/* 上下页 */
|
||||
.pn-nav {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
.pn {
|
||||
flex: 1;
|
||||
border: 1px solid var(--border);
|
||||
background: #fff;
|
||||
border-radius: var(--radius);
|
||||
padding: 13px 16px;
|
||||
text-decoration: none !important;
|
||||
transition:
|
||||
border-color 0.15s,
|
||||
box-shadow 0.15s;
|
||||
}
|
||||
.pn:hover {
|
||||
border-color: var(--blue);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.pn.next {
|
||||
text-align: right;
|
||||
}
|
||||
.pn-label {
|
||||
display: block;
|
||||
font-size: 11.5px;
|
||||
color: var(--text-3);
|
||||
}
|
||||
.pn-title {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 反馈 */
|
||||
.feedback {
|
||||
margin-top: 28px;
|
||||
padding: 16px 18px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--text-2);
|
||||
font-size: 13px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.fb-btn {
|
||||
border: 1px solid var(--border);
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 5px 12px;
|
||||
font-size: 12.5px;
|
||||
cursor: pointer;
|
||||
color: var(--text-2);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.fb-btn:hover {
|
||||
border-color: var(--blue);
|
||||
color: var(--blue);
|
||||
}
|
||||
.fb-btn.done {
|
||||
border-color: var(--green);
|
||||
color: var(--green);
|
||||
background: rgba(5, 150, 105, 0.06);
|
||||
}
|
||||
.fb-thanks {
|
||||
color: var(--green);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
/* 右侧目录 */
|
||||
.toc {
|
||||
position: sticky;
|
||||
top: calc(var(--topbar-h) + 24px);
|
||||
align-self: start;
|
||||
max-height: calc(100vh - var(--topbar-h) - 48px);
|
||||
overflow-y: auto;
|
||||
padding-top: 34px;
|
||||
}
|
||||
.toc-title {
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-3);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.toc-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
border-left: 2px solid var(--border);
|
||||
padding-left: 0;
|
||||
}
|
||||
.toc-nav a {
|
||||
font-size: 12.5px;
|
||||
color: var(--text-2);
|
||||
padding: 4px 0 4px 12px;
|
||||
text-decoration: none !important;
|
||||
border-left: 2px solid transparent;
|
||||
margin-left: -2px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.toc-nav a:hover {
|
||||
color: var(--blue);
|
||||
}
|
||||
.toc-nav a.toc-l3 {
|
||||
padding-left: 26px;
|
||||
font-size: 12px;
|
||||
color: var(--text-3);
|
||||
}
|
||||
.toc-nav a.active {
|
||||
color: var(--blue);
|
||||
border-left-color: var(--blue);
|
||||
font-weight: 600;
|
||||
}
|
||||
.print-btn {
|
||||
margin-top: 18px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--border);
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 7px;
|
||||
font-size: 12.5px;
|
||||
color: var(--text-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
.print-btn:hover {
|
||||
border-color: var(--blue);
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
/* 404 */
|
||||
.doc-404 {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 100vh;
|
||||
text-align: center;
|
||||
}
|
||||
.doc-404 h1 {
|
||||
font-size: 56px;
|
||||
margin: 0;
|
||||
color: var(--blue);
|
||||
}
|
||||
.doc-404 .btn {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
background: var(--blue);
|
||||
color: #fff;
|
||||
padding: 8px 18px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---------- 响应式 ---------- */
|
||||
@media (max-width: 1200px) {
|
||||
.layout {
|
||||
grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
|
||||
}
|
||||
.toc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 880px) {
|
||||
.menu-btn {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
}
|
||||
.layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
padding-top: 12px;
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: 60;
|
||||
left: 0;
|
||||
top: var(--topbar-h);
|
||||
bottom: 0;
|
||||
width: 280px;
|
||||
background: #fff;
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 16px;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.2s;
|
||||
max-height: none;
|
||||
}
|
||||
.sidebar.open {
|
||||
transform: none;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.ver-badge {
|
||||
display: none;
|
||||
}
|
||||
.top-links a {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 打印 ---------- */
|
||||
@media print {
|
||||
.topbar,
|
||||
.sidebar,
|
||||
.toc,
|
||||
.pn-nav,
|
||||
.feedback,
|
||||
.menu-btn {
|
||||
display: none !important;
|
||||
}
|
||||
.layout {
|
||||
display: block;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
background: #fff;
|
||||
}
|
||||
.md pre {
|
||||
background: #f1f5f9 !important;
|
||||
color: #1e293b !important;
|
||||
}
|
||||
.md pre .copy-btn,
|
||||
.md pre .lang-tag {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
/* OpsXShell 文档站交互：搜索 / 代码复制 / 目录高亮 / 反馈 / 移动端导航 */
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
/* ---------- 代码块：语言标签 + 复制按钮 + 轻量高亮 ---------- */
|
||||
document.querySelectorAll("article.md pre").forEach(function (pre) {
|
||||
var code = pre.querySelector("code");
|
||||
if (!code) return;
|
||||
var lang = (code.className.match(/language-([\w-]+)/) || [, ""])[1];
|
||||
if (lang) {
|
||||
var tag = document.createElement("span");
|
||||
tag.className = "lang-tag";
|
||||
tag.textContent = lang;
|
||||
pre.appendChild(tag);
|
||||
}
|
||||
// 复制按钮
|
||||
var btn = document.createElement("button");
|
||||
btn.className = "copy-btn";
|
||||
btn.type = "button";
|
||||
btn.textContent = "复制";
|
||||
btn.addEventListener("click", function () {
|
||||
navigator.clipboard.writeText(code.textContent).then(
|
||||
function () {
|
||||
btn.textContent = "已复制 ✓";
|
||||
setTimeout(function () { btn.textContent = "复制"; }, 1400);
|
||||
},
|
||||
function () { btn.textContent = "复制失败"; }
|
||||
);
|
||||
});
|
||||
pre.appendChild(btn);
|
||||
// JSON / bash 轻量高亮
|
||||
if (lang === "json") highlightJSON(code);
|
||||
else if (lang === "bash" || lang === "sh" || lang === "shell") highlightBash(code);
|
||||
});
|
||||
|
||||
function esc(s) {
|
||||
return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
||||
}
|
||||
function highlightJSON(code) {
|
||||
var src = code.textContent;
|
||||
code.innerHTML = esc(src).replace(
|
||||
/("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false|null)\b|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g,
|
||||
function (m, str, colon, kw, num) {
|
||||
if (str && colon) return '<span class="tok-key">' + str + "</span>" + colon;
|
||||
if (str) return '<span class="tok-str">' + str + "</span>";
|
||||
if (kw) return '<span class="tok-num">' + kw + "</span>";
|
||||
if (num) return '<span class="tok-num">' + num + "</span>";
|
||||
return m;
|
||||
}
|
||||
);
|
||||
}
|
||||
function highlightBash(code) {
|
||||
var lines = code.textContent.split("\n");
|
||||
code.innerHTML = lines
|
||||
.map(function (line) {
|
||||
if (/^\s*#/.test(line)) return '<span class="tok-com">' + esc(line) + "</span>";
|
||||
return esc(line).replace(/(^|\s)(-{1,2}[\w-]+)/g, '$1<span class="tok-key">$2</span>');
|
||||
})
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
/* ---------- blockquote 提示样式约定：> **提示** / > **注意** ---------- */
|
||||
document.querySelectorAll("article.md blockquote").forEach(function (bq) {
|
||||
var t = (bq.textContent || "").trim();
|
||||
if (/^(注意|警告|⚠)/.test(t)) bq.classList.add("warn");
|
||||
else if (/^(提示|说明|💡|Tip)/i.test(t)) bq.classList.add("tip");
|
||||
});
|
||||
|
||||
/* ---------- 搜索 ---------- */
|
||||
var input = document.getElementById("search-input");
|
||||
var panel = document.getElementById("search-panel");
|
||||
var entries = null;
|
||||
var selIndex = -1;
|
||||
|
||||
function ensureIndex(cb) {
|
||||
if (entries) return cb();
|
||||
fetch("/docs/search-data.json")
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) { entries = data; cb(); })
|
||||
.catch(function () { entries = []; cb(); });
|
||||
}
|
||||
|
||||
function snippet(text, q) {
|
||||
var i = text.toLowerCase().indexOf(q);
|
||||
if (i < 0) return text.slice(0, 60) + "…";
|
||||
var start = Math.max(0, i - 24);
|
||||
return (start > 0 ? "…" : "") + text.slice(start, i + q.length + 40) + "…";
|
||||
}
|
||||
|
||||
function doSearch() {
|
||||
var q = input.value.trim().toLowerCase();
|
||||
selIndex = -1;
|
||||
if (!q) { panel.hidden = true; return; }
|
||||
ensureIndex(function () {
|
||||
var hits = [];
|
||||
entries.forEach(function (e) {
|
||||
var titleHit = e.title.toLowerCase().indexOf(q) >= 0;
|
||||
var idx = e.text.toLowerCase().indexOf(q);
|
||||
if (titleHit || idx >= 0) {
|
||||
hits.push({
|
||||
slug: e.slug,
|
||||
title: e.title,
|
||||
group: e.group,
|
||||
score: (titleHit ? 10 : 0) + (idx === 0 ? 3 : 0),
|
||||
snippet: titleHit ? snippet(e.text, q) : snippet(e.text, q),
|
||||
});
|
||||
}
|
||||
});
|
||||
hits.sort(function (a, b) { return b.score - a.score; });
|
||||
hits = hits.slice(0, 8);
|
||||
if (!hits.length) {
|
||||
panel.innerHTML = '<div class="search-empty">没有找到相关内容，换个关键词试试</div>';
|
||||
} else {
|
||||
panel.innerHTML = hits
|
||||
.map(function (h) {
|
||||
return (
|
||||
'<a class="search-item" href="/docs/' + h.slug + '">' +
|
||||
'<span class="si-title">' + h.title + '</span><span class="si-group">' + h.group + "</span>" +
|
||||
'<span class="si-snippet">' + h.snippet + "</span></a>"
|
||||
);
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
panel.hidden = false;
|
||||
});
|
||||
}
|
||||
|
||||
var debounce;
|
||||
if (input) {
|
||||
input.addEventListener("input", function () {
|
||||
clearTimeout(debounce);
|
||||
debounce = setTimeout(doSearch, 160);
|
||||
});
|
||||
input.addEventListener("focus", function () {
|
||||
if (input.value.trim()) doSearch();
|
||||
});
|
||||
input.addEventListener("keydown", function (e) {
|
||||
var items = panel.querySelectorAll(".search-item");
|
||||
if (e.key === "ArrowDown" && items.length) {
|
||||
e.preventDefault();
|
||||
selIndex = Math.min(selIndex + 1, items.length - 1);
|
||||
} else if (e.key === "ArrowUp" && items.length) {
|
||||
e.preventDefault();
|
||||
selIndex = Math.max(selIndex - 1, 0);
|
||||
} else if (e.key === "Enter") {
|
||||
if (selIndex >= 0 && items[selIndex]) { location.href = items[selIndex].href; return; }
|
||||
var first = items[0];
|
||||
if (first) location.href = first.href;
|
||||
return;
|
||||
} else if (e.key === "Escape") {
|
||||
panel.hidden = true;
|
||||
return;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
items.forEach(function (el, i) { el.classList.toggle("sel", i === selIndex); });
|
||||
});
|
||||
document.addEventListener("click", function (e) {
|
||||
if (!e.target.closest(".search")) panel.hidden = true;
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- 目录滚动高亮 ---------- */
|
||||
var tocLinks = Array.prototype.slice.call(document.querySelectorAll(".toc-nav a"));
|
||||
if (tocLinks.length && "IntersectionObserver" in window) {
|
||||
var byId = {};
|
||||
tocLinks.forEach(function (a) { byId[a.getAttribute("href").slice(1)] = a; });
|
||||
var io = new IntersectionObserver(
|
||||
function (entries) {
|
||||
entries.forEach(function (en) {
|
||||
if (en.isIntersecting) {
|
||||
tocLinks.forEach(function (a) { a.classList.remove("active"); });
|
||||
var a = byId[en.target.id];
|
||||
if (a) a.classList.add("active");
|
||||
}
|
||||
});
|
||||
},
|
||||
{ rootMargin: "-72px 0px -70% 0px", threshold: 0 }
|
||||
);
|
||||
document.querySelectorAll("article.md h2[id], article.md h3[id]").forEach(function (h) { io.observe(h); });
|
||||
}
|
||||
|
||||
/* ---------- 反馈组件 ---------- */
|
||||
var fb = document.getElementById("feedback");
|
||||
if (fb) {
|
||||
var pageKey = "opsx-docs-fb:" + location.pathname;
|
||||
var voted = null;
|
||||
try { voted = localStorage.getItem(pageKey); } catch (e) {}
|
||||
var btns = fb.querySelectorAll(".fb-btn");
|
||||
var thanks = document.getElementById("fb-thanks");
|
||||
function mark(v) {
|
||||
btns.forEach(function (b) {
|
||||
if (b.dataset.v === v) b.classList.add("done");
|
||||
});
|
||||
thanks.hidden = false;
|
||||
try { localStorage.setItem(pageKey, v); } catch (e) {}
|
||||
}
|
||||
if (voted) mark(voted);
|
||||
btns.forEach(function (b) {
|
||||
b.addEventListener("click", function () { mark(b.dataset.v); });
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- 打印 ---------- */
|
||||
var printBtn = document.getElementById("print-btn");
|
||||
if (printBtn) printBtn.addEventListener("click", function () { window.print(); });
|
||||
|
||||
/* ---------- 移动端侧栏 ---------- */
|
||||
var menuBtn = document.getElementById("menu-btn");
|
||||
var sidebar = document.getElementById("sidebar");
|
||||
if (menuBtn && sidebar) {
|
||||
menuBtn.addEventListener("click", function () { sidebar.classList.toggle("open"); });
|
||||
document.addEventListener("click", function (e) {
|
||||
if (sidebar.classList.contains("open") && !e.target.closest(".sidebar") && !e.target.closest(".menu-btn")) {
|
||||
sidebar.classList.remove("open");
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
Reference in new issue
Block a user