feat(theme): logo配置功能提交

2024-08-22 15:39:06 +08:00
@@ -11,6 +11,16 @@ spec:
          name: pixel_style
          label: 像素化风格
          help: 开启后，将使用像素风格字体及图标。
+        - $formkit: attachment
+          name: logo
+          label: logo图片链接
+          help: 配置后，将展示在导航栏左侧。
+          accepts:
+            - "image/png"  
+        - $formkit: text
+          name: title
+          label: 站点标题
+          help: 配置后，将展示站点标题。
    - group: index
      label: 首页设置
      formSchema:
@@ -23,22 +23,12 @@
    justify-content: space-between;
  }
  
-  &__logo {
-    display: flex;
+  .dividing {
    flex: 1;
-
-    &:after {
-      content: '';
    background: repeating-linear-gradient(90deg, var(--foreground), var(--foreground) 2px, transparent 0, transparent 16px);
    display: block;
    width: 100%;
-      right: 10px;
-    }
-
-    a {
-      flex: 0 0 auto;
-      max-width: 100%;
-    }
+    height: 25px;
  }

  .menu {
@@ -1,8 +1,22 @@
 .logo {
  display: flex;
  align-items: center;
-  text-decoration: none;
-  background: var(--foreground);
-  color: var(--background);
-  padding: 5px 10px;
+  
+  .icon {
+    max-width: 100%;
+    max-height: 35px;
+    height: 100%;
+    font-size: 0;
+    object-fit: cover;
+    margin-right: 10px;
+  }
+  
+  .text {
+    display: flex;
+    padding: 3px 10px;
+    color: var(--background);
+    background: var(--foreground);
+    text-decoration: none;
+    margin-right: 16px;
+  }
 }
@@ -92,6 +92,7 @@

  &-content {
    margin-top: 30px;
+    font-family: Hack, Monaco, Consolas, 'Ubuntu Mono', PingHei, 'PingFang SC', 'Microsoft YaHei', monospace;
  }

  &-cover {
@@ -1,11 +1,11 @@
-<header class="header">
+<header class="header" xmlns:th="http://www.w3.org/1999/xhtml">
  <div th:fragment="header" th:with="menu = ${menuFinder.getPrimary()}">
    <div class="header__inner">
-      <div class="header__logo">
-        <a href="/" style="text-decoration: none">
-          <div class="logo" th:text="${site.title}">Blog Title</div>
+      <a class="logo" href="/" style="text-decoration: none">
+        <img class="icon" th:if="${not #strings.isEmpty(theme.config.basic.logo)}" th:src="${theme.config.basic.logo}" alt="Logo" />
+        <div class="text"  th:if="${not #strings.isEmpty(theme.config.basic.title)}" th:text="${theme.config.basic.title}"></div>
      </a>
-      </div>
+      <div class="dividing"></div>
      <button
        id="search-button"
        type="button"
@@ -5,7 +5,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title th:text="${site.title}"></title>
-    <link rel="stylesheet" th:href="@{/assets/dist/style.css?version=v1.0.0}" href="./assets/dist/style.css" />
+    <link rel="stylesheet" th:href="@{/assets/dist/style.css?version=v1.0.1}" href="./assets/dist/style.css" />
  </head>
  <!-- 根据情况判断是否添加开启像素化样式 -->
  <body class="main" th:classappend="${theme.config.basic.pixel_style} ? 'pixel_style' : '' ">
@@ -26,6 +26,6 @@
        <th:block th:replace="${footer}" />
      </th:block>
    </div>
-    <script th:src="@{/assets/dist/main.iife.js?version=v1.0.0}"></script>
+    <script th:src="@{/assets/dist/main.iife.js?version=v1.0.1}"></script>
  </body>
 </html>
@@ -13,5 +13,5 @@ spec:
  repo: https://git.dev.cm/theme-terminal
  settingName: "theme-terminal-setting"
  configMapName: "theme-terminal-configMap"
-  version: 1.0.0
+  version: 1.0.1
  require: ">=2.8.0"