docs(ssr)

demo/SiteHeader.vue

@@ -495,7 +495,7 @@ export default {
 <style scoped>
 .nav {
   display: grid;
-  grid-template-rows: 63px;
+  grid-template-rows: calc(var(--header-height) - 1px);
   align-items: center;
   padding: 0 var(--side-padding);
 }
@@ -533,6 +533,6 @@ export default {
 
 <style>
 .nav-menu .n-menu-item {
-  height: 63px !important;
+  height: calc(var(--header-height) - 1px) !important;
 }
 </style>

demo/pages/Layout.vue

@@ -3,7 +3,7 @@
     id="doc-layout"
     :has-sider="showSider"
     :position="isXs ? undefined : 'absolute'"
-    :style="isXs ? undefined : 'top: 64px'"
+    :style="isXs ? undefined : 'top: var(--header-height)'"
   >
     <n-layout-sider
       :native-scrollbar="false"
@@ -11,7 +11,7 @@
       collapse-mode="transform"
       bordered
       show-trigger="bar"
-      trigger-style="top: calc(50% - 64px);"
+      trigger-style="top: calc(50% - var(--header-height));"
       v-if="showSider"
     >
       <n-menu
@@ -20,7 +20,11 @@
         @update:value="handleMenuUpdateValue"
       />
     </n-layout-sider>
-    <n-layout ref="layoutInstRef" :native-scrollbar="false">
+    <n-layout
+      ref="layoutInstRef"
+      :native-scrollbar="false"
+      content-style="min-height: calc(100vh - var(--header-height)); display: flex; flex-direction: column;"
+    >
       <router-view />
       <site-footer />
     </n-layout>

demo/pages/docs/ssr/enUS/index.md

@@ -0,0 +1,5 @@
+# Server-Sider Rendering
+
+SSR is still an experimental feature.
+
+For details please see Github Repo.

demo/pages/docs/ssr/zhCN/index.md

@@ -0,0 +1,5 @@
+# 服务端渲染 Server-Sider Rendering
+
+SSR 目前仍是实验性功能。
+
+具体方式请参考 Github Repo。

demo/pages/docs/supported-platforms/enUS/index.md

@@ -17,7 +17,3 @@ Only Vue 3 (>3.0.5) is supported.
 ## TypeScript
 
 Require version > 4.1.
-
-## SSR
-
-I haven't try SSR yet and not a expert of SSR. You help will always be appreciated!

demo/pages/docs/supported-platforms/zhCN/index.md

@@ -17,7 +17,3 @@
 ## TypeScript
 
 需要版本 > 4.1。
-
-## SSR
-
-我并没有尝试过 SSR，实际上对 SSR 也不够了解。欢迎大家任何的相关帮助。

demo/pages/home/Footer.vue

@@ -72,6 +72,7 @@ export default {
 <style scoped>
 .footer {
   --x-padding: 56px;
+  margin-top: auto;
 }
 
 .footer.footer--centered .footer-links {

demo/pages/home/index.vue

@@ -2,7 +2,7 @@
   <n-layout
     :native-scrollbar="false"
     :position="isXs ? 'static' : 'absolute'"
-    :style="isXs ? undefined : 'top: 64px'"
+    :style="isXs ? undefined : 'top: var(--header-height);'"
   >
     <div class="banner" style="overflow: hidden">
       <right-image class="right-image" v-if="!isS" />

demo/routes/routes.js

@@ -39,6 +39,10 @@ export const enDocRoutes = [
   {
     path: 'jsx',
     component: () => import('../pages/docs/jsx/enUS/index.md')
+  },
+  {
+    path: 'ssr',
+    component: () => import('../pages/docs/ssr/enUS/index.md')
   }
 ]
 
@@ -83,6 +87,10 @@ export const zhDocRoutes = [
   {
     path: 'jsx',
     component: () => import('../pages/docs/jsx/zhCN/index.md')
+  },
+  {
+    path: 'ssr',
+    component: () => import('../pages/docs/ssr/zhCN/index.md')
   }
 ]
 

demo/store/menu-options.js

@@ -94,6 +94,11 @@ export function createDocumentationMenuOptions ({ lang, theme, mode }) {
           zh: 'JSX & TSX',
           path: '/jsx'
         },
+        {
+          en: 'Server-Sider Rendering',
+          zh: '服务端渲染 SSR',
+          path: '/ssr'
+        },
         {
           en: 'Customize Theme',
           zh: '调整主题',

demo/styles/demo.css

@@ -2,6 +2,7 @@
 
 body {
   overflow: hidden;
+  --header-height: 64px;
 }
 
 @media only screen and (max-width: 639px) {