docs(themes): 添加 theme-card 组件

docs/assets/css/main.css

@@ -36,7 +36,8 @@
   flex-wrap: wrap;
 }*/
 
-.a-button, .a-button-cover {
+.a-button,
+.a-button-cover {
   border-radius: 2rem;
   border-width: 1px;
   border-style: solid;
@@ -58,13 +59,14 @@
   color: #fff !important;
 }
 
-.a-button:hover, .a-button-cover:hover {
+.a-button:hover,
+.a-button-cover:hover {
   color: inherit;
   opacity: 0.8;
 }
 
 /* 没有元素时隐藏侧边栏 */
-.b-main-hide button.sidebar-toggle{
+.b-main-hide button.sidebar-toggle {
   display: none !important;
 }
 
@@ -81,4 +83,58 @@
 /* logo 图片 */
 a.app-name-link img {
   width: var(--app-name-img-width);
-}
+}
+
+/* 主题卡片 */
+.theme-card {
+  padding: 1rem;
+  width: 100%;
+  min-width: 300px;
+}
+
+.theme-content {
+  position: relative;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  box-shadow: rgb(0, 0, 0, 0.1) 0 1px 3px 0, rgb(0, 0, 0, 0.06) 0 1px 2px 0;
+  transition: all 0.2s;
+}
+
+.theme-img {
+  width: 100%;
+  color: inherit;
+  text-decoration: inherit;
+  display: block;
+  padding-top: 56.25%;
+  background-color: transparent;
+  background-size: cover;
+}
+
+.theme-button {
+  display: flex;
+  padding: 1rem;
+  border-top: 1px rgb(234, 234, 234);
+  align-items: center;
+  justify-content: space-between;
+}
+
+.theme-text {
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin: 0;
+}
+
+.theme-icon {
+  color: inherit;
+  text-decoration: inherit;
+  font-size: 0.875rem;
+  background-color: transparent;
+}
+
+.theme-icon:first-of-type {
+  margin-right: 1rem;
+}
+
+.theme-icon img{
+  width: 1rem;
+}

docs/assets/js/main.js

@@ -1,3 +1,34 @@
+// vue3 主题卡片组件
+const themeCard = {
+  template: `
+    <div class="theme-card">
+      <div class="theme-content">
+        <a class="theme-img" :style='{ backgroundImage: "url(\\"" + secr +"\\")" }'></a>
+        <div class="theme-button">
+          <div class="theme-text">{{name}}{{foo}}</div>
+          <div>
+            <a :href="prev" class="theme-icon" target="_blank">
+              <img src="/assets/images/eye.svg" alt="预览"/>
+            </a>
+            <a :href="repo" class="theme-icon" target="_blank">
+              <img src="/assets/images/download.svg" alt="仓库"/>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  props: {
+    name: String, // 主题名
+    secr: String, // 截图
+    prev: String, // 预览地址
+    repo: String, // 仓库地址
+  },
+  data() {
+    return {}
+  },
+};
+
 // 隐藏空侧边栏的插件函数
 function hideEmptySidebar(hook, vm) {
   const setHide = () => {
@@ -26,7 +57,7 @@ window.$docsify = {
   relativePath: false,
   basePath: "/",
   homepage: "READEME.md",
-  notFoundPage: 'not-found.md',
+  notFoundPage: "not-found.md",
   loadNavbar: true,
   // 小屏设备下合并导航栏到侧边栏
   mergeNavbar: false,
@@ -47,6 +78,10 @@ window.$docsify = {
     "/([a-z]*-[a-z]*)/docs/.*/_sidebar.md": "/$1/docs/_sidebar.md",
   },
   plugins: [hideEmptySidebar],
+  // vue 组件
+  vueComponents: {
+    "theme-card": themeCard,
+  },
   // vue 全局选项
   vueGlobalOptions: {
     data() {

docs/index.html

@@ -35,7 +35,7 @@
   <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-javascript.min.js"></script>
   <!-- vue3 -->
-  <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
 </body>
 
 </html>

docs/zh-cn/themes/README.md

@@ -1 +1,5 @@
-# 主题
+# 主题
+
+<div style="width: 100%;" align="center">
+  <theme-card name="fog" secr="/assets/images/background_14.jpg" prev="https://nianian.cn" repo="https://github.com/wonder-light/glidea"></theme-card>
+</div>