Changelog

明白啦 👍 Jerry，你想要一个模仿 Docusaurus 风格的 WordPress 页面模板：

  • 顶部导航栏（像 Docusaurus 的 header）
  • 底部页脚（像 Docusaurus 的 footer）
  • 主体三栏布局：
    • 左边：显示所有页面导航（类似 Docs 左侧导航栏）
    • 中间：当前页面内容
    • 右边：广告位

下面给你写一个完整的 WordPress Page Template（放到 astra-child 根目录，比如 template-docusaurus.php）：

<?php
/*
Template Name: Docusaurus Style Page
*/
get_header();
?>

<style>
/* 基础布局 */
.docusaurus-layout {
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    gap: 20px;
    max-width: 1200px;
    margin: 20px auto;
}

/* 左侧导航 */
.docusaurus-sidebar {
    background: #f8f9fa;
    border-right: 1px solid #ddd;
    padding: 15px;
}

.docusaurus-sidebar ul {
    list-style: none;
    padding-left: 0;
}

.docusaurus-sidebar li {
    margin: 8px 0;
}

.docusaurus-sidebar a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.docusaurus-sidebar a:hover {
    color: #0073aa;
}

/* 中间内容 */
.docusaurus-content {
    padding: 20px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 右侧广告 */
.docusaurus-right {
    background: #fdfdfd;
    border-left: 1px solid #ddd;
    padding: 15px;
    text-align: center;
}
.docusaurus-right .ad-box {
    background: #eee;
    padding: 20px;
    margin-bottom: 20px;
}
</style>

<div class="docusaurus-layout">
    <!-- 左侧：页面导航 -->
    <aside class="docusaurus-sidebar">
        <h3>Pages</h3>
        <ul>
            <?php
            // 获取所有顶级页面
            $pages = get_pages(array('sort_column' => 'menu_order'));
            foreach ($pages as $page) {
                echo '<li><a href="' . get_permalink($page->ID) . '">' . esc_html($page->post_title) . '</a></li>';
            }
            ?>
        </ul>
    </aside>

    <!-- 中间：内容 -->
    <main class="docusaurus-content">
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                echo '<h1>' . get_the_title() . '</h1>';
                the_content();
            endwhile;
        endif;
        ?>
    </main>

    <!-- 右侧：广告位 -->
    <aside class="docusaurus-right">
        <h3>Advertisement</h3>
        <div class="ad-box">Ad Slot 1</div>
        <div class="ad-box">Ad Slot 2</div>
    </aside>
</div>

<?php
get_footer();
?>

🔹 使用方法

  1. 将上面的代码保存为：
    astra-child/template-docusaurus.php
  2. 在后台 WordPress 页面编辑器 → 右侧「模板」里选择 Docusaurus Style Page。
  3. 页面就会自动套用这个三栏布局：
    • 左边：所有页面导航
    • 中间：你在编辑器里写的内容
    • 右边：广告位（你可以换成广告代码，比如 Google Ads 或联盟广告）

👉 要不要我帮你再写一个升级版，左侧导航支持层级（父子页面缩进），就像 Docusaurus 的 Docs Sidebar？

滚动至顶部