docs: optimize css style (#700)

Signed-off-by: Carson Yang <[email protected]>
labring · Jan 6, 2024 · 13eda40 · 13eda40
1 parent 84cc4ba
commit 13eda40
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 17 deletions.
diff --git a/docSite/assets/docs/scss/custom/pages/_custom.scss b/docSite/assets/docs/scss/custom/pages/_custom.scss
@@ -2,6 +2,41 @@
 	font-family: JetBrains Mono, LXGW WenKai Screen, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Ubuntu";
 }
 
+@media (min-width: 768px) {
+    .docs-content h1 {
+    	font-size: 2.4rem;
+    }
+
+	.docs-content .main-content h2 {
+		margin-top: 2rem !important;
+		margin-bottom: 1rem !important;
+		font-size: 1.9rem;
+	}
+
+	.docs-content .main-content h3 {
+		margin-top: 1.6rem !important;
+		margin-bottom: 0.6rem !important;
+		font-size: 1.6rem;
+	}
+
+	.docs-content .main-content h4 {
+		font-size: 1.4rem;
+	}
+
+	.docs-content .main-content ol, .docs-content .main-content ul {
+		margin-top: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+
+	.docs-content .main-content ol > li {
+		margin-left: -1.8rem;
+	}
+}
+
+.docs-content .main-content ol > li::before {
+    border-radius: 9999px;
+}
+
 .docs-content .main-content img, .docs-content .main-content  svg:not(.gitinfo svg):not(a svg) {
     max-width: 80% !important;
     height: auto;

diff --git a/docSite/content/docs/community.md b/docSite/content/docs/community.md
@@ -11,6 +11,6 @@ FastGPT 是一个由用户和贡献者参与推动的开源项目，如果您对
 
 + 📱 扫码加入社区微信交流群👇
 
-   <img width="400px" src="https://oss.laf.run/htr4n1-images/fastgpt-qr-code.jpg" />
+   <img width="400px" src="https://oss.laf.run/htr4n1-images/fastgpt-qr-code.jpg" class="medium-zoom-image" />
 
 + 🐞 请将任何 FastGPT 的 Bug、问题和需求提交到 [GitHub Issue](https://github.com/labring/fastgpt/issues/new/choose)。
diff --git a/docSite/content/docs/development/docker.md b/docSite/content/docs/development/docker.md
@@ -27,7 +27,7 @@ FastGPT 使用了 one-api 项目来管理模型池，其可以兼容 OpenAI 、A
 
 可选择 [Sealos 快速部署 OneAPI](/docs/development/one-api)，更多部署方法可参考该项目的 [README](https://github.com/songquanpeng/one-api)，也可以直接通过以下按钮一键部署：
 
-[![](https://fastly.jsdelivr.net/gh/labring-actions/templates@main/Deploy-on-Sealos.svg)](https://cloud.sealos.io/?openapp=system-fastdeploy%3FtemplateName%3Done-api)
+<a href="https://template.cloud.sealos.io/deploy?templateName=one-api" rel="external" target="_blank"><img src="https://cdn.jsdelivr.us/gh/labring-actions/templates@main/Deploy-on-Sealos.svg" alt="Deploy on Sealos"/></a>
 
 ## 一、安装 Docker 和 docker-compose
 

diff --git a/docSite/content/docs/development/intro.md b/docSite/content/docs/development/intro.md
@@ -21,10 +21,10 @@ weight: 705
 
 ## 开始本地开发
 
-**Tips**
-
+{{% alert context="success" %}}
 1. 用户默认的时区为 `Asia/Shanghai`,非 linux 环境时候，获取系统时间会异常，本地开发时候，可以将用户的时区调整成 UTC（+0）。
 2. 建议先服务器装好**数据库**，再进行本地开发。
+{{% /alert %}}
 
 ### 1. Fork 存储库
 
@@ -115,4 +115,4 @@ FastGPT 在`pnpm i`后会执行`postinstall`脚本，用于自动生成`ChakraUI
 
 遇到困难了吗？有任何问题吗? 加入微信群与开发者和用户保持沟通。
 
-<center><image width="400px" src="https://oss.laf.run/htr4n1-images/fastgpt-qr-code.jpg" /></center>
+<img width="400px" src="https://oss.laf.run/htr4n1-images/fastgpt-qr-code.jpg" class="medium-zoom-image" />
diff --git a/docSite/content/docs/development/one-api.md b/docSite/content/docs/development/one-api.md
@@ -17,7 +17,7 @@ MySQL 版本支持多实例，高并发。
 
 直接点击以下按钮即可一键部署 👇
 
-[![](https://fastly.jsdelivr.net/gh/labring-actions/templates@main/Deploy-on-Sealos.svg)](https://cloud.sealos.io/?openapp=system-fastdeploy%3FtemplateName%3Done-api)
+<a href="https://template.cloud.sealos.io/deploy?templateName=one-api" rel="external" target="_blank"><img src="https://cdn.jsdelivr.us/gh/labring-actions/templates@main/Deploy-on-Sealos.svg" alt="Deploy on Sealos"/></a>
 
 部署完后会跳转「应用管理」，数据库在另一个应用「数据库」中。需要等待 1~3 分钟数据库运行后才能访问成功。
 

diff --git a/docSite/content/docs/development/sealos.md b/docSite/content/docs/development/sealos.md
@@ -14,7 +14,7 @@ weight: 706
 ## 一键部署
 Sealos 的服务器在国外，不需要额外处理网络问题，无需服务器、无需魔法、无需域名，支持高并发 & 动态伸缩。点击以下按钮即可一键部署 👇
 
-[![](https://fastly.jsdelivr.net/gh/labring-actions/templates@main/Deploy-on-Sealos.svg)](https://cloud.sealos.io/?openapp=system-fastdeploy%3FtemplateName%3Dfastgpt)
+<a href="https://template.cloud.sealos.io/deploy?templateName=fastgpt" rel="external" target="_blank"><img src="https://cdn.jsdelivr.us/gh/labring-actions/templates@main/Deploy-on-Sealos.svg" alt="Deploy on Sealos"/></a>
 
 由于需要部署数据库，部署完后需要等待 2~4 分钟才能正常访问。默认用了最低配置，首次访问时会有些慢。
 

diff --git a/docSite/layouts/docs/_markup/render-image.html b/docSite/layouts/docs/_markup/render-image.html
@@ -9,11 +9,11 @@
         {{ if eq $image.MediaType.SubType "svg" }}
           {{ $image.Content | safeHTML }}
         {{ else }}
-          <img src="{{ $image.RelPermalink | safeURL }}" alt="{{ $text }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy">
+          <img src="{{ $image.RelPermalink | safeURL }}" alt="{{ $text }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy" class="medium-zoom-image">
         {{ end }}
       {{ end }}
     {{ else }}
-      <img src="{{ $dest | safeURL }}" alt="{{ $text }}" loading="lazy">
+      <img src="{{ $dest | safeURL }}" alt="{{ $text }}" loading="lazy" class="medium-zoom-image">
     {{ end }}
     <figcaption>{{ .Title | markdownify }}</figcaption>
   </figure>
@@ -23,10 +23,10 @@
       {{ if eq $image.MediaType.SubType "svg" }}
         {{ $image.Content | safeHTML }}
       {{ else }}
-        <img src="{{ $image.RelPermalink | safeURL }}" alt="{{ $text }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy">
+        <img src="{{ $image.RelPermalink | safeURL }}" alt="{{ $text }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy" class="medium-zoom-image">
       {{ end }}
     {{ end }}
   {{ else }}
-    <img src="{{ $dest | safeURL }}" alt="{{ $text }}" loading="lazy">
+    <img src="{{ $dest | safeURL }}" alt="{{ $text }}" loading="lazy" class="medium-zoom-image">
   {{ end }}
 {{ end }}
diff --git a/docSite/layouts/partials/docs/footer/footer-scripts.html b/docSite/layouts/partials/docs/footer/footer-scripts.html
@@ -64,7 +64,7 @@
 ></script>
 
 <script>
-  const images = Array.from(document.querySelectorAll(".main-content img"));
+  const images = Array.from(document.querySelectorAll('.medium-zoom-image'));
   images.forEach((img) => {
     mediumZoom(img, {
       margin: 0 /* The space outside the zoomed image */,

diff --git a/docSite/layouts/partials/docs/head.html b/docSite/layouts/partials/docs/head.html
@@ -1,4 +1,5 @@
 <head>
+    <script defer type="text/javascript" src="{{ "js/jsdelivr-auto-fallback.js" | absURL }}"></script>
     <meta charset="utf-8" />
     <title>
         {{- $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
@@ -105,6 +106,6 @@
     {{- end -}}
     {{- end -}}
     <!-- change -->
-    <script defer type="text/javascript" src="{{ "js/jsdelivr-auto-fallback.js" | absURL }}"></script>
+    <link rel="preload" href="https://cdn.jsdelivr.us/npm/[email protected]/style.css" as="style" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.us/npm/[email protected]/style.css" />
 </head>
diff --git a/docSite/static/js/jsdelivr-auto-fallback.js b/docSite/static/js/jsdelivr-auto-fallback.js
@@ -6,10 +6,7 @@
     const DEST_LIST = [
       'cdn.jsdelivr.us',
       'jsd.cdn.zzko.cn',
-      'jsd.onmicrosoft.cn',
-      'fastly.jsdelivr.net',
-      'gcore.jsdelivr.net',
-      'cdn.jsdelivr.net',
+      'jsd.onmicrosoft.cn'
     ];
     const PREFIX = '//';
     const SOURCE = DEST_LIST[0];