docs: update doc

twikoojs · Aug 16, 2023 · 961e615 · 961e615
1 parent a86cf96
commit 961e615
Show file tree

Hide file tree

Showing 8 changed files with 504 additions and 374 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -6,11 +6,12 @@ export default defineConfig({
     root: {
       label: '简体中文',
       lang: 'zh-CN',
+      link: '/',
       title: 'Twikoo 文档',
-      description: 'Twikoo 文档',
+      description: '一个简洁、安全、免费的静态网站评论系统',
       themeConfig: {
         sidebar: [
-          { text: '简介', link: '/' },
+          { text: '简介', link: '/intro' },
           { text: '快速上手', link: '/quick-start' },
           { text: '常见问题', link: '/faq' },
           { text: 'API 文档', link: '/api' },
@@ -23,10 +24,10 @@ export default defineConfig({
       lang: 'en',
       link: '/en/',
       title: 'Twikoo Docs',
-      description: 'Twikoo Docs',
+      description: 'A simple, safe, free comment system',
       themeConfig: {
         sidebar: [
-          { text: 'Introduction', link: '/en/' },
+          { text: 'Introduction', link: '/en/intro' },
           { text: 'Quick start', link: '/en/quick-start' },
           { text: 'FAQ', link: '/en/faq' },
           { text: 'API', link: '/en/api' }

diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
@@ -1,81 +1,44 @@
 <script setup>
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import Twikoo from './Twikoo.vue'
 
 const { Layout } = DefaultTheme
-const envId = 'https://twikoojsorg.imaegoo.com'
-const twikooJs = ref(null)
-const router = useRouter()
+</script>
 
-function initTwikoo () {
-  try {
-    twikoo.init({
-      envId,
-      onCommentLoaded: initLightGallery
-    })
-  } catch (e) {}
+<template>
+  <Layout>
+    <template #home-features-after>
+      <div class="home-comment-container">
+        <Twikoo></Twikoo>
+      </div>
+    </template>
+    <template #doc-after>
+      <Twikoo></Twikoo>
+    </template>
+  </Layout>
+</template>
+
+<style>
+.home-comment-container {
+  position: relative;
+  margin-top: 64px;
+  padding: 0 24px;
 }
 
-function initLightGallery () {
-  // This function is compiled to ES5
-  var commentContents = document.getElementsByClassName('tk-content');
-  for (var i = 0; i < commentContents.length; i++) {
-    var commentItem = commentContents[i];
-    var imgEls = commentItem.getElementsByTagName('img');
-    if (imgEls.length > 0) {
-      for (var j = 0; j < imgEls.length; j++) {
-        var imgEl = imgEls[j];
-        var aEl = document.createElement('a');
-        aEl.setAttribute('class', 'tk-lg-link');
-        aEl.setAttribute('href', imgEl.getAttribute('src'));
-        aEl.setAttribute('data-src', imgEl.getAttribute('src'));
-        aEl.appendChild(imgEl.cloneNode(false));
-        imgEl.parentNode.insertBefore(aEl, imgEl.nextSibling);
-        imgEl.remove();
-      }
-      lightGallery(commentItem, {
-        selector: '.tk-lg-link',
-        share: false
-      })
-    }
+@media (min-width: 640px) {
+  .home-comment-container {
+    padding: 0 48px;
   }
 }
 
-function initJs () {
-  if (twikooJs.value) {
-    twikooJs.value.onload = initTwikoo
-    router.onAfterRouteChanged = onRoute
+@media (min-width: 960px) {
+  .home-comment-container {
+    padding: 0 64px;
   }
 }
 
-function onRoute (to) {
-  if (to) setTimeout(initTwikoo, 1000)
+.home-comment-container .comment-container {
+  margin: 0 auto;
+  max-width: 1152px;
 }
-
-onMounted(() => {
-  initTwikoo()
-  initJs()
-})
-</script>
-
-<template>
-  <Layout>
-    <template #doc-after>
-      <div class="comment-container">
-        <!-- KaTeX -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
-        <component :is="'script'" defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></component>
-        <component :is="'script'" defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></component>
-
-        <!-- lightGallery -->
-        <link rel="stylesheet" href="https://cdn.staticfile.org/lightgallery/2.1.8/css/lightgallery.css">
-        <component :is="'script'" src="https://cdn.staticfile.org/lightgallery/2.1.8/lightgallery.min.js"></component>
-
-        <!-- Twikoo -->
-        <div id="twikoo"></div>
-        <component :is="'script'" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/twikoo.all.min.js" ref="twikooJs"></component>
-      </div>
-    </template>
-  </Layout>
-</template>
+</style>
diff --git a/docs/.vitepress/theme/Twikoo.vue b/docs/.vitepress/theme/Twikoo.vue
@@ -0,0 +1,75 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vitepress'
+
+const envId = 'https://twikoojsorg.imaegoo.com'
+const twikooJs = ref(null)
+const router = useRouter()
+
+function initTwikoo () {
+  try {
+    twikoo.init({
+      envId,
+      onCommentLoaded: initLightGallery
+    })
+  } catch (e) {}
+}
+
+function initLightGallery () {
+  // This function is compiled to ES5
+  var commentContents = document.getElementsByClassName('tk-content');
+  for (var i = 0; i < commentContents.length; i++) {
+    var commentItem = commentContents[i];
+    var imgEls = commentItem.getElementsByTagName('img');
+    if (imgEls.length > 0) {
+      for (var j = 0; j < imgEls.length; j++) {
+        var imgEl = imgEls[j];
+        var aEl = document.createElement('a');
+        aEl.setAttribute('class', 'tk-lg-link');
+        aEl.setAttribute('href', imgEl.getAttribute('src'));
+        aEl.setAttribute('data-src', imgEl.getAttribute('src'));
+        aEl.appendChild(imgEl.cloneNode(false));
+        imgEl.parentNode.insertBefore(aEl, imgEl.nextSibling);
+        imgEl.remove();
+      }
+      lightGallery(commentItem, {
+        selector: '.tk-lg-link',
+        share: false
+      })
+    }
+  }
+}
+
+function initJs () {
+  if (twikooJs.value) {
+    twikooJs.value.onload = initTwikoo
+    router.onAfterRouteChanged = onRoute
+  }
+}
+
+function onRoute (to) {
+  if (to) setTimeout(initTwikoo, 1000)
+}
+
+onMounted(() => {
+  initTwikoo()
+  initJs()
+})
+</script>
+
+<template>
+  <div class="comment-container">
+    <!-- KaTeX -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
+    <component :is="'script'" defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></component>
+    <component :is="'script'" defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></component>
+
+    <!-- lightGallery -->
+    <link rel="stylesheet" href="https://cdn.staticfile.org/lightgallery/2.1.8/css/lightgallery.css">
+    <component :is="'script'" src="https://cdn.staticfile.org/lightgallery/2.1.8/lightgallery.min.js"></component>
+
+    <!-- Twikoo -->
+    <div id="twikoo"></div>
+    <component :is="'script'" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/twikoo.all.min.js" ref="twikooJs"></component>
+  </div>
+</template>