@sugarat/theme 0.1.7 → 0.1.9

package/node.d.ts

@@ -39,6 +39,22 @@ declare namespace Theme {
         layout?: string;
         categories: string[];
         tags: string[];
+        /**
+         * 文章首页置顶
+         */
+        top?: number;
+        /**
+         * 手动控制相关文章列表的顺序
+         */
+        recommend?: number | false;
+        /**
+         * 时间线
+         */
+        timeline: string;
+        /**
+         * 专栏&合集
+         */
+        album: string;
     }
     interface PageData {
         route: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "main": "src/index.ts",
   "exports": {

package/src/components/BlogItem.vue

@@ -1,5 +1,6 @@
 <template>
   <a class="blog-item" :href="route">
+    <i class="pin" v-if="!!pin"></i>
     <!-- 左侧信息  -->
     <div class="info-part">
       <!-- 标题 -->
@@ -33,6 +34,7 @@ const props = defineProps<{
   tag?: string[]
   author?: string
   cover?: string
+  pin?: number
 }>()
 
 const showTime = computed(() => {
@@ -41,6 +43,35 @@ const showTime = computed(() => {
 </script>
 
 <style lang="scss" scoped>
+.blog-item .pin {
+  position: absolute;
+  overflow: hidden;
+  width: 30px;
+  height: 30px;
+  top: -4px;
+  left: -4px;
+  opacity: 0.5;
+}
+.blog-item:hover .pin {
+  opacity: 1;
+}
+.blog-item .pin::before {
+  content: '';
+  position: absolute;
+  width: 120%;
+  height: 30px;
+  background-image: linear-gradient(
+    45deg,
+    var(--blog-theme-color),
+    var(--blog-theme-color)
+  );
+  transform: rotate(-45deg) translateY(-20px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.23);
+}
+
 .blog-item {
   position: relative;
   margin: 0 auto 20px;

package/src/components/BlogList.vue

@@ -9,6 +9,7 @@
         :tag="v.meta.tag"
         :cover="v.meta.cover"
         :author="v.meta.author || globalAuthor"
+        :pin="v.meta.top"
       />
     </li>
   </ul>
@@ -43,11 +44,13 @@ const activeTag = useActiveTag()
 const activeTagLabel = computed(() => activeTag.value.label)
 
 const wikiList = computed(() => {
-  const data = docs.value
-    .filter((v) => v.meta.date && v.meta.title)
-    .filter((v) => !v.meta.hidden)
+  const topList = docs.value.filter((v) => v.meta.top)
+  topList.sort((a, b) => a.meta.top - b.meta.top)
+  const data = docs.value.filter(
+    (v) => v.meta.date && v.meta.title && !v.meta.top && !v.meta.hidden
+  )
   data.sort((a, b) => +new Date(b.meta.date) - +new Date(a.meta.date))
-  return data
+  return topList.concat(data)
 })
 
 const filterData = computed(() => {

package/src/components/BlogRecommendArticle.vue

@@ -66,9 +66,16 @@ const recommendList = computed(() => {
     .filter((v) => !!v.meta.title)
     // 过滤掉自己
     .filter((v) => v.route !== route.path.replace(/.html$/, ''))
+    // 过滤掉不需要展示的
+    .filter((v) => v.meta.recommend !== false)
 
-  origin.sort((a, b) => +new Date(b.meta.date) - +new Date(a.meta.date))
-  return origin
+  const topList = origin.filter((v) => v.meta?.recommend)
+  topList.sort((a, b) => Number(a.meta.recommend) - Number(b.meta.recommend))
+
+  const normalList = origin.filter((v) => !v.meta?.recommend)
+  normalList.sort((a, b) => +new Date(b.meta.date) - +new Date(a.meta.date))
+
+  return topList.concat(normalList)
 })
 const currentPage = ref(1)
 const changePage = () => {
@@ -128,7 +135,7 @@ const showChangeBtn = computed(() => {
       font-size: 14px;
       color: var(--description-font-color);
       font-weight: 600;
-      margin: 6px 12px 10px 0;
+      margin: 6px 8px 10px 0;
       width: 18px;
       height: 18px;
       line-height: 18px;

package/src/components/TimelinePage.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>时间线页面</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss"></style>

package/src/composables/config/index.ts

@@ -45,6 +45,23 @@ export namespace Theme {
     // old
     categories: string[]
     tags: string[]
+    /**
+     * 文章首页置顶
+     */
+    top?: number
+    /**
+     * 手动控制相关文章列表的顺序
+     */
+    recommend?: number | false
+    // TODO: 待开发
+    /**
+     * 时间线
+     */
+    timeline: string
+    /**
+     * 专栏&合集
+     */
+    album: string
   }
   export interface PageData {
     route: string

package/src/index.ts

@@ -10,9 +10,15 @@ import DefaultTheme from 'vitepress/theme'
 import BlogApp from './components/BlogApp.vue'
 import { withConfigProvider } from './composables/config/blog'
 
+// page
+import TimelinePage from './components/TimelinePage.vue'
+
 export const BlogTheme: Theme = {
   ...DefaultTheme,
-  Layout: withConfigProvider(BlogApp)
+  Layout: withConfigProvider(BlogApp),
+  enhanceApp(ctx) {
+    ctx.app.component('TimelinePage', TimelinePage)
+  }
 }
 
 export * from './composables/config/index'

package/src/styles/index.scss

@@ -8,6 +8,7 @@ html {
   --nav-bgc: rgba(255, 255, 255, 0.9);
   --badge-font-color: #4e5969;
   --description-font-color: #86909c;
+  --blog-theme-color: #409eff;
 }
 
 html[class='dark'] {