Skip to content

Redesign the documentation homepage #624

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ruibaby merged 6 commits into from
Sep 5, 2026
Merged

Redesign the documentation homepage #624

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1c8b156
Redesign the documentation homepage
intoyang Sep 5, 2026
ef281f6
Merge remote-tracking branch 'upstream/main' into docs/update-homepage
intoyang Sep 5, 2026
bb27709
Improve homepage copy feedback and mobile layout
intoyang Sep 5, 2026
922fe10
Refine homepage topic navigation
intoyang Sep 5, 2026
1a6afe7
Refine footer edit link styling
intoyang Sep 5, 2026
868a675
Fix homepage accessibility and restore spacing
ruibaby Sep 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 97 additions & 5 deletions docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,14 @@ import PhPaintBrushBroadDuotone from "~icons/ph/paint-brush-broad-duotone";
import PhPaletteDuotone from "~icons/ph/palette-duotone";
import PhPaperclipDuotone from "~icons/ph/paperclip-duotone";
import PhPuzzlePieceDuotone from "~icons/ph/puzzle-piece-duotone";
import PhQuestionDuotone from "~icons/ph/question-duotone";
import PhQuestion from "~icons/ph/question";
import PhStorefrontDuotone from "~icons/ph/storefront-duotone";
import PhTerminalDuotone from "~icons/ph/terminal-duotone";
import PhUsersThreeDuotone from "~icons/ph/users-three-duotone";
import MingcuteSettings3Line from "~icons/mingcute/settings-3-line";
import MingcuteWorld2Line from "~icons/mingcute/world-2-line";
import { Link } from "@rspress/core/runtime";
import { CopyButton } from "../theme/components/CopyButton";

<main className="docs-home">
<header className="docs-hero">
Expand All @@ -31,7 +35,7 @@ import { Link } from "@rspress/core/runtime";
Halo 是一款强大易用的开源建站工具，可以通过丰富的主题和插件搭建任何类型的网站。这里汇集了安装、使用和开发
Halo 所需的全部文档。
</p>
<Link className="docs-hero__cta" to={{pathname: '/guide/install/'}}>
<Link className="docs-hero__cta docs-hero__cta--primary" to={{pathname: '/guide/install/'}}>
快速开始 <span aria-hidden="true">→</span>
</Link>
<nav className="docs-hero__platforms" aria-label="常见安装方式">
Expand All @@ -51,6 +55,91 @@ import { Link } from "@rspress/core/runtime";
/>
</header>

<section className="docs-section docs-trial" aria-labelledby="try-halo">
<header className="docs-trial__header">
<h2 id="try-halo">立即体验</h2>
</header>

<div className="docs-trial__grid">
<aside className="docs-trial__demo" aria-labelledby="online-demo">
<div className="docs-trial__title">
<h3 id="online-demo">在线 Demo 环境</h3>
</div>
<nav className="docs-trial__demo-links" aria-label="Halo 在线演示入口">
<a href="https://demo.halocms.site" target="_blank" rel="noreferrer">
<MingcuteWorld2Line width={17} height={17} aria-hidden="true" />
<span>演示站点</span>
<span aria-hidden="true">↗</span>
</a>
<a href="https://demo.halocms.site/console" target="_blank" rel="noreferrer">
<MingcuteSettings3Line width={17} height={17} aria-hidden="true" />
<span>管理后台</span>
<span aria-hidden="true">↗</span>
</a>
</nav>
<dl className="docs-trial__credentials">
<div>
<dt>用户名</dt>
<dd>
<code>demo</code>
<CopyButton value="demo" label="复制 Demo 用户名" />
</dd>
</div>
<div>
<dt>密码</dt>
<dd>
<code>P@ssw0rd123..</code>
<CopyButton value="P@ssw0rd123.." label="复制 Demo 密码" />
</dd>
</div>
</dl>
<p className="docs-trial__note">请勿在演示环境中上传或填写敏感信息。</p>
</aside>

<article className="docs-trial__install">
<div className="docs-trial__title">
<h3>本地 Docker 运行</h3>
</div>
<p>使用本地 Docker 环境快速启动一个 Halo 实例。</p>
<div className="docs-trial__command">
<div className="docs-trial__command-bar" aria-hidden="true">
<span className="docs-trial__window-dots">
<i></i><i></i><i></i>
</span>
<span>Docker CLI</span>
</div>
<div className="docs-trial__command-body">
<code tabIndex={0}>
<span className="docs-trial__token docs-trial__token--prompt">$</span>{' '}
<span className="docs-trial__token docs-trial__token--command">docker</span>{' '}
<span className="docs-trial__token docs-trial__token--subcommand">run</span>{' '}
<span className="docs-trial__token docs-trial__token--option">-d</span>{' '}
<span className="docs-trial__token docs-trial__token--option">--name</span>{' '}
<span className="docs-trial__token docs-trial__token--value">halo</span>{' '}
<span className="docs-trial__token docs-trial__token--option">-p</span>{' '}
<span className="docs-trial__token docs-trial__token--value">8090:8090</span>{' '}
<span className="docs-trial__token docs-trial__token--option">-v</span>{' '}
<span className="docs-trial__token docs-trial__token--value">~/.halo2:/root/.halo2</span>{' '}
<span className="docs-trial__token docs-trial__token--image">halohub/halo:2.26</span>
</code>
<CopyButton
value="docker run -d --name halo -p 8090:8090 -v ~/.halo2:/root/.halo2 halohub/halo:2.26"
label="复制 Docker 快速体验命令"
size={18}
/>
</div>
</div>
<div className="docs-trial__install-footer">
<Link to={{pathname: '/guide/install/docker-compose'}}>
查看完整安装文档 <span aria-hidden="true">→</span>
</Link>
<span>生产环境推荐使用 Docker Compose</span>
</div>
</article>
</div>

</section>

<section className="docs-section" aria-labelledby="get-started">
<div className="docs-section__heading">
<h2 id="get-started">快速开始</h2>
Expand Down Expand Up @@ -94,10 +183,10 @@ import { Link } from "@rspress/core/runtime";
<nav aria-label="Halo 使用文档">
<Link to={{pathname: '/guide/use/posts'}}><span className="topic-link__icon" aria-hidden="true"><PhArticleDuotone width={18} height={18} /></span><span>文章与内容</span></Link>
<Link to={{pathname: '/guide/use/themes'}}><span className="topic-link__icon" aria-hidden="true"><PhPaletteDuotone width={18} height={18} /></span><span>主题</span></Link>
<Link to={{pathname: '/guide/use/plugins'}}><span className="topic-link__icon" aria-hidden="true"><PhPuzzlePieceDuotone width={18} height={18} /></span><span>插件</span></Link>
<Link to={{pathname: '/guide/use/attachments'}}><span className="topic-link__icon" aria-hidden="true"><PhPaperclipDuotone width={18} height={18} /></span><span>附件</span></Link>
<Link to={{pathname: '/guide/use/plugins'}}><span className="topic-link__icon" aria-hidden="true"><PhPuzzlePieceDuotone width={18} height={18} /></span><span>插件</span></Link>
<Link to={{pathname: '/guide/use/settings'}}><span className="topic-link__icon" aria-hidden="true"><PhGearDuotone width={18} height={18} /></span><span>系统设置</span></Link>
<Link to={{pathname: '/guide/faq'}}><span className="topic-link__icon" aria-hidden="true"><PhQuestionDuotone width={18} height={18} /></span><span>常见问题</span></Link>
<Link to={{pathname: '/guide/use/users'}}><span className="topic-link__icon" aria-hidden="true"><PhUsersThreeDuotone width={18} height={18} /></span><span>用户与权限</span></Link>
</nav>
<Link className="topic-group__all" to={{pathname: '/guide/use/'}}>查看全部功能文档<span aria-hidden="true">→</span></Link>
</article>
Expand Down Expand Up @@ -127,7 +216,10 @@ import { Link } from "@rspress/core/runtime";
<span>查看常见问题，或到社区论坛提问。</span>
</div>
<nav aria-label="帮助资源">
<Link to={{pathname: '/guide/faq'}}>常见问题</Link>
<Link className="docs-help__link--icon" to={{pathname: '/guide/faq'}}>
<PhQuestion width={15} height={15} aria-hidden="true" />
<span>常见问题</span>
</Link>
<a href="https://github.com/orgs/halo-dev/discussions" target="_blank" rel="noreferrer">GitHub <span aria-hidden="true">↗</span></a>
<a href="https://bbs.halo.run" target="_blank" rel="noreferrer">社区论坛 <span aria-hidden="true">↗</span></a>
</nav>
Expand Down
Loading
Loading