@sugarat/theme 0.1.50 → 0.2.1

package/node.d.ts

@@ -119,6 +119,8 @@ declare namespace Theme {
         inspiring?: string | string[];
         inspiringTimeout?: number;
         pageSize?: number;
+        author?: string | boolean;
+        logo?: string | boolean;
     }
     interface ArticleConfig {
         readingTime?: boolean;
@@ -266,6 +268,10 @@ declare namespace Theme {
          * 启用RSS配置
          */
         RSS?: RSSOptions;
+        /**
+         * 首页页脚
+         */
+        footer?: Footer;
     }
     type RSSOptions = Omit<FeedOptions, 'id'> & {
         id?: string;
@@ -301,6 +307,40 @@ declare namespace Theme {
         limit?: number;
         ariaLabel?: string;
     };
+    interface Footer {
+        /**
+         * 自定义补充信息
+         */
+        message?: string;
+        /**
+         * 是否展示主题版本信息
+         */
+        version?: boolean;
+        /**
+         * copyright
+         */
+        copyright?: string | {
+            message: string;
+            link?: string;
+            icon?: boolean | string;
+        };
+        /**
+         * ICP 备案信息
+         */
+        icpRecord?: {
+            name: string;
+            link: string;
+            icon?: boolean | string;
+        };
+        /**
+         * 公安备案信息
+         */
+        securityRecord?: {
+            name: string;
+            link: string;
+            icon?: boolean | string;
+        };
+    }
     interface Config extends DefaultTheme.Config {
         blog?: BlogConfig;
     }

package/node.js

@@ -32,7 +32,7 @@ __export(node_exports, {
 });
 module.exports = __toCommonJS(node_exports);
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.14_vue@3.3.4/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.17_vue@3.3.4/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.1.50",
+  "version": "0.2.1",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "sass": "^1.56.1",
     "tsup": " ^6.5.0",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.0-rc.14",
+    "vitepress": "1.0.0-rc.17",
     "vitepress-plugin-tabs": "^0.2.0",
     "vue": "^3.3.4"
   },

package/src/components/BlogApp.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts" name="BlogApp">
 import Theme from 'vitepress/theme'
+import { useData } from 'vitepress'
+import { computed } from 'vue'
 import { useBlogThemeMode } from '../composables/config/blog'
 import BlogHomeInfo from './BlogHomeInfo.vue'
 import BlogHomeBanner from './BlogHomeBanner.vue'
@@ -12,7 +14,10 @@ import BlogImagePreview from './BlogImagePreview.vue'
 import BlogArticleAnalyze from './BlogArticleAnalyze.vue'
 import BlogAlert from './BlogAlert.vue'
 import BlogPopover from './BlogPopover.vue'
+import BlogFooter from './BlogFooter.vue'
 
+const { frontmatter } = useData()
+const layout = computed(() => frontmatter.value.layout)
 const isBlogTheme = useBlogThemeMode()
 const { Layout } = Theme
 </script>
@@ -20,6 +25,7 @@ const { Layout } = Theme
 <template>
   <Layout>
     <template #layout-top>
+      <slot name="layout-top" />
       <BlogAlert />
       <BlogPopover />
     </template>
@@ -65,7 +71,10 @@ const { Layout } = Theme
       <slot name="doc-after" />
       <BlogComment />
     </template>
-
+    <template #layout-bottom>
+      <BlogFooter v-if="layout === 'home'" />
+      <slot name="layout-bottom" />
+    </template>
     <!-- 透传默认主题的其它插槽 -->
     <!-- navbar -->
     <template #nav-bar-title-before>

package/src/components/BlogAuthor.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+import { useBlogConfig } from '../composables/config/blog'
+
+const { home } = useBlogConfig()
+const { frontmatter, site } = useData()
+const author = computed(() =>
+  frontmatter.value.author
+  ?? frontmatter.value?.blog?.author
+  ?? home?.author
+  ?? site.value.themeConfig?.blog?.author
+)
+const logo = computed(() =>
+  frontmatter.value.logo
+  ?? frontmatter.value?.blog?.logo
+  ?? home?.logo
+  ?? site.value.themeConfig.logo
+)
+const show = computed(() => author.value || logo.value)
+</script>
+
+<template>
+  <div v-if="show" class="blog-author">
+    <img v-if="logo" :src="logo" alt="avatar">
+    <p v-if="author">
+      {{ author }}
+    </p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.blog-author {
+  margin-bottom: 20px;
+
+  img {
+    display: block;
+    margin: 10px auto;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background-color: rgba(var(--bg-gradient-home));
+  }
+
+  img:hover {
+    transform: rotate(666turn);
+    transition-duration: 59s;
+    transition-timing-function: cubic-bezier(.34, 0, .84, 1)
+  }
+
+  p {
+    text-align: center;
+  }
+}
+</style>

package/src/components/BlogFooter.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useHomeFooterConfig } from '../composables/config/blog'
+import packageJSON from '../../package.json'
+import { copyrightSVG, icpSVG, themeSVG } from '../constants/svg'
+
+const footer = useHomeFooterConfig()
+const data = ref<{
+  name: string
+  link?: string
+  icon?: string | boolean
+}[]>([])
+onMounted(() => {
+  if (!footer) {
+    return
+  }
+  const { icpRecord, securityRecord, copyright, version } = footer
+  // version
+  if (version !== false) {
+    data.value.push({
+      name: `@sugarat/theme@${packageJSON.version}`,
+      link: 'https://theme.sugarat.top/',
+      icon: themeSVG
+    })
+  }
+  // copyright
+  if (typeof copyright === 'string') {
+    data.value.push({
+      name: copyright,
+      icon: copyrightSVG
+    })
+  }
+  if (copyright instanceof Object) {
+    data.value.push({
+      icon: copyrightSVG,
+      name: copyright.message,
+      ...copyright
+    })
+  }
+  // 备案信息
+  if (icpRecord) {
+    data.value.push({
+      icon: icpSVG,
+      ...icpRecord
+    })
+  }
+  // 网备信息
+  if (securityRecord) {
+    data.value.push({
+      icon: 'security',
+      ...securityRecord
+    })
+  }
+})
+</script>
+
+<template>
+  <footer v-if="footer" class="blog-footer">
+    <p v-if="footer?.message" v-html="footer?.message" />
+    <p class="footer-item-list">
+      <span v-for="(item, index) in data" :key="index" class="footer-item">
+        <i v-if="item.icon === 'security'">
+          <img src="./../styles/gongan.png" alt="公网安备">
+        </i>
+        <i v-else-if="item.icon" v-html="item.icon" />
+        <a v-if="item.link" :href="item.link" target="_blank" rel="noopener noreferrer">
+          {{ item.name }}
+        </a>
+        <span v-else>{{ item.name }}</span>
+      </span>
+    </p>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+footer.blog-footer {
+  text-align: center;
+  position: relative;
+  border-top: 1px solid var(--vp-c-gutter);
+  padding: 20px 12px;
+  background-color: var(--vp-c-bg);
+
+  p {
+    line-height: 24px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--vp-c-text-2);
+  }
+}
+
+.footer-item-list {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 719px) {
+  .footer-item-list {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.footer-item {
+  display: flex;
+  align-items: center;
+  margin: 0 8px;
+
+  i {
+    margin-right: 4px;
+  }
+
+  i :deep(svg) {
+    fill: var(--vp-c-text-2);
+    width: 16px;
+    height: 16px;
+  }
+
+  i :deep(img) {
+    width: 16px;
+    height: 16px;
+  }
+
+  a:hover {
+    color: var(--vp-c-brand-1);
+    text-decoration: underline;
+    text-decoration-color: var(--vp-c-brand-1);
+    text-decoration-style: dashed;
+  }
+}
+</style>

package/src/components/BlogHomeInfo.vue

@@ -3,10 +3,14 @@ import BlogHomeOverview from './BlogHomeOverview.vue'
 import BlogHotArticle from './BlogHotArticle.vue'
 import BlogHomeTags from './BlogHomeTags.vue'
 import BlogFriendLink from './BlogFriendLink.vue'
+import BlogAuthor from './BlogAuthor.vue'
 </script>
 
 <template>
   <div class="blog-info" data-pagefind-ignore="all">
+    <!-- 头像信息 -->
+    <BlogAuthor />
+
     <!-- 统计数据，日后支持，点击筛选出左侧的数据 -->
     <BlogHomeOverview />
 

package/src/composables/config/blog.ts

@@ -27,12 +27,15 @@ const currentPageNum: InjectionKey<Ref<number>> = Symbol('home-page-num')
 
 const userWorks: InjectionKey<Ref<Theme.UserWorks>> = Symbol('user-works')
 
+const homeFooter: InjectionKey<Theme.Footer | undefined> = Symbol('home-footer')
+
 export function withConfigProvider(App: Component) {
   return defineComponent({
     name: 'ConfigProvider',
     setup(_, { slots }) {
       const { theme } = useData()
       const config = computed(() => resolveConfig(theme.value))
+      provide(homeFooter, config.value.blog?.footer)
       provide(configSymbol, config)
       provide(
         userWorks,
@@ -197,3 +200,7 @@ export function useAutoUpdateAnchor() {
   // 返回当前锚点的响应式对象
   return currentAnchor
 }
+
+export function useHomeFooterConfig() {
+  return inject(homeFooter)
+}

package/src/composables/config/index.ts

@@ -127,6 +127,8 @@ export namespace Theme {
     inspiring?: string | string[]
     inspiringTimeout?: number
     pageSize?: number
+    author?: string | boolean
+    logo?: string | boolean
   }
 
   export interface ArticleConfig {
@@ -296,6 +298,10 @@ export namespace Theme {
      * 启用RSS配置
      */
     RSS?: RSSOptions
+    /**
+     * 首页页脚
+     */
+    footer?: Footer
   }
 
   export type RSSOptions = Omit<FeedOptions, 'id'> & {
@@ -332,6 +338,41 @@ export namespace Theme {
     limit?: number
     ariaLabel?: string
   }
+
+  export interface Footer {
+    /**
+     * 自定义补充信息
+     */
+    message?: string
+    /**
+     * 是否展示主题版本信息
+     */
+    version?: boolean
+    /**
+     * copyright
+     */
+    copyright?: string | {
+      message: string
+      link?: string
+      icon?: boolean | string
+    }
+    /**
+     * ICP 备案信息
+     */
+    icpRecord?: {
+      name: string
+      link: string
+      icon?: boolean | string
+    }
+    /**
+     * 公安备案信息
+     */
+    securityRecord?: {
+      name: string
+      link: string
+      icon?: boolean | string
+    }
+  }
   export interface Config extends DefaultTheme.Config {
     blog?: BlogConfig
   }

package/src/constants/svg.ts

@@ -43,3 +43,12 @@ export const recommendSVG = `<svg width="512" height="512" viewBox="0 0 128 128"
 <path fill="#FFF" d="M94.8 52.5c-.4-3.8-2.1-7.3-4.9-9.7s-6.4-3.7-10-3.7c-3.7 0-7.3 1.2-10.1 3.5s-4.6 5.8-4.9 9.6c0 .3-.3.5-.5.4c-.2 0-.4-.2-.4-.5c-.1-2 .3-4.1 1.1-6c.8-1.9 2-3.6 3.5-5.1c3-2.9 7.3-4.3 11.4-4.3c4.2 0 8.3 1.6 11.3 4.5c1.5 1.5 2.7 3.2 3.5 5.1c.8 1.9 1.1 4 1 6c0 .3-.2.5-.5.5c-.3.1-.5-.1-.5-.3z"/>
 <path fill="#896024" d="M37.01 49.35c-1.03-.72-2.58-.49-3.58.95s-.67 2.97.36 3.69c1.03.72 2.58.49 3.58-.95c1.01-1.45.68-2.98-.36-3.69z"/>
 </svg>`
+
+export const themeSVG = `<svg width="128" height="128" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<title>主题</title>
+<path d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10a2.5 2.5 0 0 0 2.5-2.5c0-.61-.23-1.2-.64-1.67a.528.528 0 0 1-.13-.33c0-.28.22-.5.5-.5H16c3.31 0 6-2.69 6-6c0-4.96-4.49-9-10-9zm5.5 11c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5s1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zm-3-4c-.83 0-1.5-.67-1.5-1.5S13.67 6 14.5 6s1.5.67 1.5 1.5S15.33 9 14.5 9zM5 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5S7.33 13 6.5 13S5 12.33 5 11.5zm6-4c0 .83-.67 1.5-1.5 1.5S8 8.33 8 7.5S8.67 6 9.5 6s1.5.67 1.5 1.5z"/>
+</svg>`
+
+export const icpSVG = '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" data-v-2f084f89=""><title data-v-2f084f89="">ICP备案号</title><path d="M778.24 163.84c-76.8-40.96-165.888-61.44-269.312-61.44s-192.512 20.48-269.312 61.44h-133.12l23.552 337.92c8.192 113.664 67.584 217.088 162.816 280.576l215.04 144.384 215.04-144.384c96.256-63.488 155.648-166.912 163.84-280.576l23.552-337.92H778.24z m47.104 333.824c-7.168 94.208-56.32 181.248-135.168 233.472l-181.248 120.832L327.68 731.136c-78.848-53.248-129.024-139.264-135.168-233.472L173.056 225.28h136.192v-26.624c58.368-23.552 124.928-34.816 199.68-34.816s141.312 12.288 199.68 34.816V225.28H844.8l-19.456 272.384z" data-v-2f084f89=""></path><path d="M685.056 328.704v-46.08H455.68c2.048-4.096 6.144-9.216 11.264-15.36 5.12-7.168 9.216-12.288 11.264-15.36L419.84 240.64c-31.744 46.08-75.776 87.04-133.12 123.904 4.096 4.096 10.24 11.264 18.432 21.504l17.408 17.408c23.552-15.36 45.056-31.744 63.488-50.176 26.624 25.6 49.152 43.008 67.584 51.2-46.08 15.36-104.448 27.648-175.104 35.84 2.048 5.12 6.144 13.312 9.216 24.576 4.096 11.264 6.144 19.456 7.168 24.576l39.936-7.168v218.112H389.12V680.96h238.592v19.456h54.272V481.28H348.16c60.416-12.288 114.688-27.648 163.84-46.08 49.152 19.456 118.784 34.816 210.944 46.08 5.12-17.408 10.24-34.816 17.408-51.2-62.464-4.096-116.736-12.288-161.792-24.576 38.912-20.48 74.752-46.08 106.496-76.8z m-150.528 194.56h94.208v41.984h-94.208v-41.984z m0 78.848h94.208v41.984h-94.208v-41.984z m-144.384-78.848h94.208v41.984H390.144v-41.984z m0 78.848h94.208v41.984H390.144v-41.984zM424.96 326.656h182.272c-26.624 22.528-57.344 41.984-94.208 57.344-31.744-15.36-61.44-34.816-88.064-57.344z" data-v-2f084f89=""></path></svg>'
+
+export const copyrightSVG = '<svg t="1695543755857" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="89399" width="200" height="200"><path d="M512 16C238.066 16 16 238.066 16 512s222.066 496 496 496 496-222.066 496-496S785.934 16 512 16z m234.268 693.506c-3.184 3.734-79.552 91.462-219.702 91.462-169.384 0-288.968-126.52-288.968-291.134 0-162.606 124.008-286.802 287.524-286.802 133.914 0 203.93 74.63 206.844 77.808a24 24 0 0 1 2.476 29.246l-44.76 69.31c-8.098 12.534-25.548 14.702-36.468 4.59-0.466-0.428-53.058-47.76-123.76-47.76-92.232 0-147.832 67.15-147.832 152.164 0 79.204 51.028 159.384 148.554 159.384 77.394 0 130.56-56.676 131.088-57.25 10.264-11.13 28.118-10.066 37.016 2.106l49.094 67.144a24.002 24.002 0 0 1-1.106 29.732z" p-id="89400"></path></svg>'