# AetherDocs
## 主题理念 : 让内容本身被看见，而不是被修饰。

架构

```
/site/assets/
├── custom                                  <===自定义目录,需要手动创建
│   ├── js                                  <===自定义目录,需要手动创建
│   │   ├── anchor.js                       <---自定义文件,需要手动创建
│   │   ├── index.js                        <---自定义文件,需要手动创建
│   │   └── progress.js                     <---自定义文件,需要手动创建
│   ├── README.md                           <---自定义说明,需要手动创建
│   └── scss                                <===自定义目录,需要手动创建
│       ├── _content.scss                   <---自定义文件,需要手动创建
│       ├── index.scss                      <---自定义文件,需要手动创建
│       ├── _layout.scss                    <---自定义文件,需要手动创建
│       ├── _sidebar.scss                   <---自定义文件,需要手动创建
│       ├── _toc.scss                       <---自定义文件,需要手动创建
│       └── _variables.scss                 <---自定义文件,需要手动创建
├── favicon.png
├── favicon.svg
├── images
├── js
│   ├── custom.js                           <---Doks默认创建,需要修改
│   ├── flexsearch.zh-cn.js                 <---自定义搜索文件,和主题风格无关
│   └── flexsearch.zh-tw.js                 <---自定义搜索文件,和主题风格无关
├── scss
│   └── common
│       ├── _custom.scss                    <---Doks默认创建,需要修改
│       └── _variables-custom.scss
└── svgs
```

## 创建目录

```bash
mkdir -p /site/assets/custom/js && mkdir -p /site/assets/custom/scss
```

### 编辑Doks默认创建的文件
用途 : 将入口改为custom目录,方便维护和复制
{{< tabs "doks" >}}
{{< tab "js" >}}

```bash
vi "/site/assets/js/custom.js"
```

{{< /tab >}}
{{< tab "scss" >}}

```bash
vi "/site/assets/scss/common/_custom.scss"
```

{{< /tab >}}
{{< /tabs >}}

将下面的内容贴到文件中

{{< tabs "doks" >}}
{{< tab "js" >}}

```js
/* 只做一件事：引入你的自定义 */
import "../custom/js/index.js";
```

{{< /tab >}}
{{< tab "scss" >}}

```js
/* 只做一件事：引入你的自定义 */

@import "../../custom/scss/index";
```

{{< /tab >}}
{{< /tabs >}}

### 创建&&编辑自定义风格文件和内容

#### JS部分

{{< tabs "js" >}}
{{< tab "index" >}}

```bash
vi "/site/assets/custom/js/index.js"
```

{{< /tab >}}
{{< tab "anchor" >}}

```bash
vi "/site/assets/custom/js/anchor.js"
```

{{< /tab >}}
{{< tab "progress" >}}

```bash
vi "/site/assets/custom/js/progress.js"
```

{{< /tab >}}
{{< /tabs >}}

将下面的内容贴到文件中

{{< tabs "js" >}}
{{< tab "index" >}}

```js
// 🔥 JS 总入口（只做调度）

import "./anchor.js";
import "./progress.js";
```

{{< /tab >}}
{{< tab "anchor" >}}

```js
function initAnchors() {
  document.querySelectorAll("h2, h3, h4").forEach(h => {
    if (h.dataset.anchorInit) return;
    h.dataset.anchorInit = "1";

    h.style.cursor = "pointer";

    h.addEventListener("click", () => {
      if (!h.id) return;

      const url = location.origin + location.pathname + "#" + h.id;
      navigator.clipboard.writeText(url);
    });
  });
}

document.addEventListener("DOMContentLoaded", initAnchors);
document.addEventListener("astro:page-load", initAnchors);
document.addEventListener("turbo:load", initAnchors);
```

{{< /tab >}}
{{< tab "progress" >}}

```js
// 阅读进度条（极轻量）

const bar = document.createElement("div");

bar.style.position = "fixed";
bar.style.top = "0";
bar.style.left = "0";
bar.style.height = "2px";
bar.style.background = "#5865f2";
bar.style.zIndex = "9999";


document.body.appendChild(bar);

window.addEventListener("scroll", () => {
  const h = document.documentElement;
  const percent = h.scrollTop / (h.scrollHeight - h.clientHeight);
  bar.style.width = percent * 100 + "%";
});
```

{{< /tab >}}
{{< /tabs >}}

---

#### SCSS部分

{{< tabs "scss" >}}
{{< tab "index" >}}

```bash
vi "/site/assets/custom/scss/index.scss"
```

{{< /tab >}}
{{< tab "content" >}}

```bash
vi "/site/assets/custom/scss/_content.scss"
```

{{< /tab >}}
{{< tab "layout" >}}

```bash
vi "/site/assets/custom/scss/_layout.scss"
```

{{< /tab >}}
{{< tab "sidebar" >}}

```bash
vi "/site/assets/custom/scss/_sidebar.scss"
```

{{< /tab >}}
{{< tab "toc" >}}

```bash
vi "/site/assets/custom/scss/_toc.scss"
```

{{< /tab >}}
{{< tab "variables" >}}

```bash
vi "/site/assets/custom/scss/_variables.scss"
```

{{< /tab >}}
{{< /tabs >}}

将下面的内容贴到文件中

{{< tabs "scss" >}}
{{< tab "index" >}}

```scss
/* =========================
   🔥 Custom Entry（唯一入口）
   ========================= */

@import "variables";  //← 变量（颜色/尺寸）
@import "sidebar";    //← 侧边栏
@import "content";    //← 正文排版
@import "layout";     //← 页面布局
@import "toc";        //← 侧边栏动画
```

{{< /tab >}}
{{< tab "content" >}}

```scss
/* =========================
   文档基础排版优化
   ========================= */

/* 段落 */
p {
  line-height: 1.75;
  font-size: 1.05rem;
  color: var(--bs-body-color);
}

/* 列表 */
li {
  margin: 6px 0;
}

/* =========================
   表格优化（更稳）
   ========================= */

.table-responsive {
  border-radius: 8px;
  overflow: hidden;
}

/* =========================
   可读性增强（高级体验）
   ========================= */

/* 标题间距更自然 */
h1, h2, h3, h4 {
  line-height: 1.3;
  margin-top: 1.6em;
}

/* 段落之间呼吸感 */
p + p {
  margin-top: 0.8em;
}

/* =========================
   Inline Code（Discord风 + 优化）
   ========================= */

:not(pre) > code {
  padding: 0.15em 0.35em;
  margin: 0;

  border-radius: 4px;

  font-size: 85%;
  font-weight: 500;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  letter-spacing: 0.01em;
  font-variant-ligatures: none;
}

/* 🌙 Dark */
[data-bs-theme="dark"] :not(pre) > code {
  background: rgba(32, 34, 37, 0.95);
  color: #dcddde;
  border: 1px solid rgba(79, 84, 92, 0.3);
}

/* ☀️ Light */
[data-bs-theme="light"] :not(pre) > code {
  background: #f2f3f5;
  color: #2e3338;
  border: 1px solid #e3e5e8;
}

/* Hover 微反馈（高级感） */
:not(pre) > code:hover {
  filter: brightness(1.05);
}
```

{{< /tab >}}
{{< tab "layout" >}}

```scss
/* 页面整体结构 */

main {
  max-width: 860px;
  margin: 0 auto;
}
```

{{< /tab >}}
{{< tab "sidebar" >}}

```scss
/* =========================
   🔥 Sidebar RESET（彻底清除）
   ========================= */

.docs-sidebar a::before,
.docs-sidebar a::after,
.sidebar a::before,
.sidebar a::after {
  content: none !important;
  display: none !important;
}

.docs-sidebar a,
.sidebar a {
  position: static !important;
  transform: none !important;
}


/* =========================
   Sidebar 基础结构
   ========================= */

.docs-sidebar .sidebar a,
.docs-sidebar .docs-links a,
.sidebar a {
  display: block;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 2px 6px;
  text-decoration: none;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
}


/* =========================
   🎯 ACTIVE 精准命中（关键）
   ========================= */

.docs-sidebar a.active,
.docs-sidebar a[aria-current="page"],
.docs-sidebar .active > a,
.sidebar a.active,
.sidebar a[aria-current="page"],
.sidebar .active > a {
  border-radius: 6px !important;
  font-weight: 500 !important;
}


/* =========================
   🌙 Dark Mode（Discord风）
   ========================= */

[data-bs-theme="dark"] {

  .sidebar {
    background: #2b2d31;
  }

  .docs-sidebar a,
  .sidebar a {
    color: #b5bac1;
  }

  .docs-sidebar a:hover,
  .sidebar a:hover {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
    transform: translateX(2px);
  }

  .docs-sidebar a.active,
  .docs-sidebar a[aria-current="page"],
  .docs-sidebar .active > a,
  .sidebar a.active,
  .sidebar a[aria-current="page"],
  .sidebar .active > a {
    background: #5865f2 !important;
    color: #ffffff !important;
    transform: none !important;
  }
}


/* =========================
   ☀️ Light Mode（Discord风）
   ========================= */

[data-bs-theme="light"] {

  .sidebar {
    background: #f2f3f5;
  }

  .docs-sidebar a,
  .sidebar a {
    color: #2e3338;
  }

  .docs-sidebar a:hover,
  .sidebar a:hover {
    background: #e3e5e8;
    color: #000;
    transform: translateX(2px);
  }

  .docs-sidebar a.active,
  .docs-sidebar a[aria-current="page"],
  .docs-sidebar .active > a,
  .sidebar a.active,
  .sidebar a[aria-current="page"],
  .sidebar .active > a {
    background: #5865f2 !important;
    color: #ffffff !important;
    transform: none !important;
  }
}


/* =========================
   Layout
   ========================= */

.sidebar {
  position: sticky;
  top: var(--navbar-height);
  max-height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
}
```

{{< /tab >}}
{{< tab "toc" >}}

```scss
/* =========================
   📚 Sidebar（安全增强版）
   ========================= */

/* 子列表默认显示（保持 Doks 原逻辑） */
.docs-sidebar ul {
  transition: all 0.2s ease;
}

/* 只给有子菜单的 li 加视觉标记 */
.docs-sidebar li > ul {
  margin-left: 10px;
}

/* 小箭头（纯视觉） */
.docs-sidebar li > a::after {
  pointer-events: none;
}
```

{{< /tab >}}
{{< tab "variables" >}}

```scss
/* 统一变量（方便迁移） */

$accent: #5865f2;
$radius: 8px;
$text-muted: #999;
```

{{< /tab >}}
{{< /tabs >}}