完善 docs

2025-09-27 11:45:23 +00:00 · 2022-06-09 21:29:25 +08:00
parent ce325ea626
commit 0a4bf9fc9a
21 changed files with 427 additions and 84 deletions
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -13,9 +13,32 @@
  --ifm-color-primary-light: #6440b1;
  --ifm-color-primary-lighter: #6943b9;
  --ifm-color-primary-lightest: #7b59c3;
-  --ifm-code-font-size: 90%;
+  --ifm-code-font-size: 80%;
+  --ifm-code-padding-horizontal: 0.3rem;
+  --ifm-global-radius: 0.3rem;
+  --ifm-code-border-radius: 0.2rem;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --ifm-h1-font-size: 2.5rem;
+  --ifm-heading-font-weight: 500;
+  --ifm-button-font-weight: var(--ifm-heading-font-weight);
+  --ifm-hr-background-color: var(--ifm-color-emphasis-200);
+}
+
+.navbar__title {
+  font-weight: 500;
+}
+
+.navbar__link {
+  color: var(--ifm-navbar-link-color);
+  font-weight: var(--ifm-font-weight-normal);
+}
+
+.menu {
+  font-weight: var(--ifm-font-weight-normal);
+}
+
+.badge {
+  font-weight: var(--ifm-font-weight-normal);
 }

 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -34,12 +57,55 @@
  :root {
    --ifm-font-size-base: 16px;
  }
+
+  .banner-img {
+    display: none;
+  }
 }

@media screen and (min-width: 997px) {
  :root {
    --ifm-font-size-base: 18px;
  }
+
+  .hero__subtitle {
+    margin-top: 2rem;
+  }
+
+  .hero__title {
+    font-size: 4rem;
+    margin-left: -20px;
+  }
+
+  .markdown h1:first-child {
+    --ifm-h1-font-size: 2.5rem;
+  }
+
+  .title_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocCategoryGeneratedIndexPage-styles-module {
+    --ifm-h1-font-size: 2.5rem !important;
+  }
+
+  .markdown {
+    --ifm-h3-vertical-rhythm-top: 2;
+  }
+
+  hr {
+    margin-top: 2.5rem;
+  }
+
+  .markdown>h2 {
+    margin-bottom: calc(var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading) * 1.5);
+  }
+
+  .markdown>h3 {
+    --ifm-h3-font-size: 1.3rem;
+  }
+
+
+}
+
+.menu__caret:before {
+  background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 1.5rem;
 }

 html[data-theme=light] .navbar__item.header-github-link {
@@ -53,25 +119,3 @@ html[data-theme=light] .navbar__item.header-github-link {
  margin-right: -1rem;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy42MDEgMGExMy41OTcgMTMuNTk3IDAgMCAwLTQuMjk4IDI2LjQ5OGMuNjc2LjEyNi45MjgtLjI5NS45MjgtLjY1NSAwLS4zMjUtLjAxMS0xLjM5NC0uMDE4LTIuNTMxLTMuNzgzLjgyMi00LjU4LTEuNjAzLTQuNTgtMS42MDMtLjYxOS0xLjU3Ni0xLjUxLTEuOTktMS41MS0xLjk5LTEuMjM0LS44NDUuMDkyLS44MjcuMDkyLS44MjcgMS4zNjYuMDk3IDIuMDg1IDEuNCAyLjA4NSAxLjQgMS4yMTMgMi4wNzkgMy4xODEgMS40OCAzLjk1NiAxLjEyNi4xMjMtLjg3OC40NzUtMS40NzcuODY0LTEuODE3LTMuMDEtLjM0LTYuMTk2LTEuNTA2LTYuMTk2LTYuNzE2YTUuMjU3IDUuMjU3IDAgMCAxIDEuNDAzLTMuNjU0Yy0uMTQyLS4zNDItLjYwOC0xLjcyNS4xMy0zLjYwMiAwIDAgMS4xNDItLjM2NSAzLjc0IDEuMzkzYTEyLjkyIDEyLjkyIDAgMCAxIDYuODEgMGMyLjU4NS0xLjc0OSAzLjczNi0xLjM5MyAzLjczNi0xLjM5My43MzkgMS44NzMuMjc1IDMuMjU1LjEzMyAzLjYwMmE1LjI1NSA1LjI1NSAwIDAgMSAxLjM5OCAzLjY1YzAgNS4yMjMtMy4xOCA2LjM3MS02LjIwNyA2LjcxLjQ4Ni40Mi45MiAxLjI0OS45MiAyLjUxNiAwIDEuODItLjAxMyAzLjI4NS0uMDEzIDMuNzMxIDAgLjM2My4yNDMuNzg2LjkzMi42NTNBMTMuNTk2IDEzLjU5NiAwIDAgMCAxMy42MDEgMHoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNNS4xNTQgMTkuNTJjLS4wMy4wNjgtLjEzNS4wODgtLjIyNS4wNDNzLS4xNTYtLjEzNy0uMTI0LS4yMDVjLjAzMS0uMDY3LjEzNy0uMDg3LjIyNS0uMDQyLjA4OC4wNDUuMTU1LjEzNy4xMjIuMjA0aC4wMDJ6bS41NTEuNjE1Yy0uMDY1LjA2LS4xOTEuMDMyLS4yNzktLjA2M2EuMjA3LjIwNyAwIDAgMS0uMDM4LS4yODFjLjA2Ny0uMDYxLjE4OS0uMDMyLjI3OS4wNjMuMDkuMDk0LjEwNi4yMjUuMDM4LjI4MXptLjUzNi43ODNjLS4wODMuMDU5LS4yMjUgMC0uMzA0LS4xMTctLjA3OS0uMTE3LS4wODMtLjI2NSAwLS4zMjQuMDg0LS4wNTguMjI1IDAgLjMwNC4xMTUuMDc5LjExNS4wODQuMjY4IDAgLjMyNnptLjc0My43NTdhLjI1NS4yNTUgMCAwIDEtLjM1OC0uMDZjLS4xMi0uMTExLS4xNTMtLjI2Ni0uMDc2LS4zNDguMDc2LS4wOC4yMjUtLjA2LjM1LjA1Mi4xMjcuMTEzLjE1NC4yNjYuMDc1LjM0N2wuMDEuMDA5em0xLjAwNC40MzljLS4wMzMuMTA2LS4xODQuMTU1LS4zNC4xMS0uMTU1LS4wNDUtLjI1NC0uMTctLjIyNS0uMjc5LjAzLS4xMDguMTg1LS4xNTcuMzQtLjExLjE1Ni4wNDcuMjU1LjE3LjIyNS4yNzl6bTEuMTEyLjA4MWMwIC4xMTMtLjEyNi4yMDUtLjI4OC4yMDctLjE2Mi4wMDItLjI5Mi0uMDg1LS4yOTUtLjE5OC0uMDAyLS4xMTMuMTI2LS4yMDUuMjktLjIwNy4xNjUtLjAwMi4yOTMuMDg4LjI5My4xOTh6bTEuMDM2LS4xNzVjLjAyLjExLS4wOTIuMjI1LS4yNTIuMjUyLS4xNi4wMjctLjMwNC0uMDM5LS4zMjQtLjE0OS0uMDItLjExLjA5NC0uMjI1LjI1Mi0uMjUyLjE1OC0uMDI3LjMwNC4wMzguMzI0LjE0OHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=) 0/20px 20px no-repeat;
 }
-
-.hero__subtitle {
-  margin-top: 2rem;
-}
-
-.hero__title {
-  font-size: 4rem;
-}
-
-@media screen and (max-width: 996px) {
-  .banner-img {
-    display: none;
-  }
-}
-
-.markdown h1:first-child {
-  --ifm-h1-font-size: 2.5rem;
-}
-
-.title_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocCategoryGeneratedIndexPage-styles-module {
-  --ifm-h1-font-size: 2.5rem !important;
-}
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -18,23 +18,23 @@ function HomepageHeader() {
            <h1 className="hero__title">{siteConfig.title}</h1>
            <p className="hero__subtitle">{siteConfig.tagline + "："}</p>
            <div>
-              <p style={{ color: 'var(--ifm-color-primary)', fontWeight: 'bold', marginBottom: 2 }}>
+              <p style={{ color: 'var(--ifm-color-primary)', marginBottom: 2 }}>
                <span className="badge badge--primary" style={{ marginRight: 8 }}>2D 渲染</span>
                支持多纹理渲染（多纹理材质、多纹理合批）
              </p>
-              <p style={{ color: 'var(--ifm-color-primary)', fontWeight: 'bold', marginBottom: 2 }}>
+              <p style={{ color: 'var(--ifm-color-primary)', marginBottom: 2 }}>
                <span className="badge badge--primary" style={{ marginRight: 8 }}>2D 渲染</span>
                支持高 DPI 文本渲染
              </p>
-              <p style={{ color: 'var(--ifm-color-primary)', fontWeight: 'bold', marginBottom: 2 }}>
+              <p style={{ color: 'var(--ifm-color-primary)', marginBottom: 2 }}>
                <span className="badge badge--primary" style={{ marginRight: 8 }}>动态图集</span>
                完全重构，支持自动多纹理合批、优化算法、复用废弃空间等特性
              </p>
-              <p style={{ color: 'var(--ifm-color-primary)', fontWeight: 'bold', marginBottom: 2 }}>
+              <p style={{ color: 'var(--ifm-color-primary)', marginBottom: 2 }}>
                <span className="badge badge--primary" style={{ marginRight: 8 }}>Label 组件</span>
                重构 Char 缓存模式，支持自动多纹理合批、多图集、复用废弃空间等特性
              </p>
-              <p style={{ color: 'var(--ifm-color-primary)', fontWeight: 'bold', marginBottom: 2 }}>
+              <p style={{ color: 'var(--ifm-color-primary)', marginBottom: 2 }}>
                <span className="badge badge--primary" style={{ marginRight: 8 }}>Spine 组件</span>
                支持与其它组件合批、合入动态图集与 SpriteFrame 换装
              </p>
@@ -47,6 +47,13 @@ function HomepageHeader() {
              >
                开始使用
              </Link>
+              <Link
+                className="button button--outline button--primary button--lg"
+                href='TODO'
+                style={{ marginRight: 20 }}
+              >
+                查看演示
+              </Link>
              <Link
                className="button button--secondary button--lg"
                href='https://github.com/smallmain/cocos-service-pack'>
--- a/docs/src/theme/DocCard/index.js
+++ b/docs/src/theme/DocCard/index.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import {translate} from '@docusaurus/Translate';
+
+function CardContainer({href, children}) {
+  return (
+    <Link
+      href={href}
+      className={clsx('card padding--lg', styles.cardContainer)}>
+      {children}
+    </Link>
+  );
+}
+
+function CardLayout({href, icon, title, description}) {
+  return (
+    <CardContainer href={href}>
+      <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
+        {icon} {title}
+      </h2>
+      {description && (
+        <p
+          className={clsx('text--truncate', styles.cardDescription)}
+          title={description}>
+          {description}
+        </p>
+      )}
+    </CardContainer>
+  );
+}
+
+function CardCategory({item}) {
+  const href = findFirstCategoryLink(item); // Unexpected: categories that don't have a link have been filtered upfront
+
+  if (!href) {
+    return null;
+  }
+
+  return (
+    <CardLayout
+      href={href}
+      icon=""
+      title={item.label}
+      description={translate(
+        {
+          message: '{count} items',
+          id: 'theme.docs.DocCard.categoryDescription',
+          description:
+            'The default description for a category card in the generated index about how many items this category includes',
+        },
+        {
+          count: item.items.length,
+        },
+      )}
+    />
+  );
+}
+
+function CardLink({item}) {
+  const doc = useDocById(item.docId ?? undefined);
+  const icon = "";
+  return (
+    <CardLayout
+      href={item.href}
+      icon={icon}
+      title={item.label}
+      description={doc?.description}
+    />
+  );
+}
+
+export default function DocCard({item}) {
+  switch (item.type) {
+    case 'link':
+      return <CardLink item={item} />;
+
+    case 'category':
+      return <CardCategory item={item} />;
+
+    default:
+      throw new Error(`unknown item type ${JSON.stringify(item)}`);
+  }
+}
--- a/docs/src/theme/DocCard/styles.module.css
+++ b/docs/src/theme/DocCard/styles.module.css
@@ -0,0 +1,27 @@
+.cardContainer {
+  --ifm-link-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
+  --ifm-link-hover-decoration: none;
+
+  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
+}
+
+.cardContainer:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
+}
+
+.cardContainer *:last-child {
+  margin-bottom: 0;
+}
+
+.cardTitle {
+  font-size: 1.2rem;
+}
+
+.cardDescription {
+  font-size: 0.8rem;
+}