hexo-theme-lnote 1.2.4 → 1.2.6

package/templates/MenuNav.vue

@@ -0,0 +1,39 @@
+<template>
+    <div :class="['btn-group', typeBgClass(type)]" role="group">
+        <div class="btn-group" role="group" v-for="menu in menus">
+            <button
+                type="button"
+                :class="['btn', `btn-outline-${type}`, 'dropdown-toggle']"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+            >
+                {{ menu.text }}
+            </button>
+            <ul :class="['dropdown-menu']">
+                <li v-for="item in menu.secondaryMenus">
+                    <a
+                        :class="['dropdown-item']"
+                        :href="uriFor([item.link])"
+                    >
+                        {{ item.text }}
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { uriFor, typeBgClass } from './utils/uri'
+import type { Type } from '../types/tag'
+type SecondaryMenu = {
+    text: string
+    link: string
+}
+type FirstMenu = {
+    text: string
+    secondaryMenus: SecondaryMenu[]
+}
+const type: Type = 'warning'
+const menus: FirstMenu[] = []
+</script>

package/templates/Note.vue

@@ -0,0 +1,33 @@
+<template>
+    <div
+        v-if="iconType"
+        :class="[
+            'note',
+            'alert',
+            `alert-${alertType}`,
+            'd-flex',
+            'align-items-top',
+        ]"
+        role="alert"
+    >
+        <svg
+            class="flex-shrink-0 me-2"
+            role="img"
+            width="1.2em"
+            height="1.2em"
+            :style="{marginTop: '0.2rem'}"
+        >
+            <use :xlink:href="`#${iconType}`"></use>
+        </svg>
+        <div v-html="html"></div>
+    </div>
+    <div v-else :class="['note', 'alert', `alert-${alertType}`]">
+        <div v-html="html"></div>
+    </div>
+</template>
+<script lang="ts" setup>
+import type { Type } from '../types/tag'
+const alertType: Type = 'info'
+const iconType: Type = 'info'
+const html: string = ''
+</script>

package/templates/Noun.vue

@@ -0,0 +1,25 @@
+<template>
+    <button
+        type="button"
+        :class="['btn', 'btn-link', `text-${type}-emphasis`, 'lnote-popover-btn']"
+        data-bs-toggle="popover"
+        data-bs-trigger="hover focus"
+        data-bs-placement="right"
+        :data-bs-custom-class="`lnote-popover ${type}`"
+        data-bs-html="true"
+        :data-bs-content="content"
+    >
+        {{ text }}
+        <svg width="18" height="18">
+            <use xlink:href="#question-circle-fill"></use>
+        </svg>
+    </button>
+</template>
+
+<script lang="ts" setup>
+import { typeBgClass } from './utils/uri'
+import type { Type } from '../types/tag'
+const type: Type = 'primary'
+const content = ''
+const text = ''
+</script>

package/templates/NounContent.vue

@@ -0,0 +1,29 @@
+<template>
+    <div :class="['card', `border-${type}`]">
+        <div :class="['card-header', 'fw-bold', `text-bg-${type}`]">{{ title }}</div>
+        <div :class="['card-body', `bg-${type}-subtle`, 'rounded-bottom']">
+            <!-- <h5 class="card-title" v-if="title">{{ title }}</h5> -->
+            <p class="card-text">
+                {{ text }}
+            </p>
+            <a
+                v-if="link"
+                :href="uriFor([link])"
+                :class="['card-link', `text-${type}-emphasis`]"
+            >
+                {{ moreText }}
+            </a>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { uriFor, typeBgClass } from './utils/uri'
+import type { Type } from '../types/tag'
+const type: Type = 'primary'
+// const promptText = ''
+const moreText = ''
+const title = ''
+const text = ''
+const link = ''
+</script>

package/templates/Tab.vue

@@ -0,0 +1,40 @@
+<template>
+    <nav>
+        <ul
+            class="nav nav-underline mb-3 d-flex flex-nowrap overflow-x-auto text-nowrap border-bottom"
+            role="tablist"
+        >
+            <li class="nav-item" role="presentation" v-for="(item, index) in tabs">
+                <button
+                    data-bs-toggle="tab"
+                    role="tab"
+                    type="button"
+                    :aria-selected="index === 0 ? 'true' : 'false'"
+                    :class="['nav-link', { active: index === 0 }]"
+                    :id="`tab-${key}-${index}`"
+                    :data-bs-target="`#nav-${key}-${index}`"
+                    :aria-controls="`nav-${key}-${index}`"
+                >
+                    {{ item.name }}
+                </button>
+            </li>
+        </ul>
+        <div class="tab-content">
+            <div
+                v-for="(item, index) in tabs"
+                :class="['tab-pane', 'fade', index === 0 && 'show active']"
+                :id="`nav-${key}-${index}`"
+                role="tabpanel"
+                :aria-labelledby="`tab-${key}-${index}`"
+                :tabindex="index"
+            >
+                <div v-html="item.content"></div>
+            </div>
+        </div>
+    </nav>
+</template>
+<script lang="ts" setup>
+import type { Tab } from '../types/tag'
+const key: string = ''
+const tabs: Tab[] = []
+</script>

package/templates/footer.ejs

@@ -1,13 +1,13 @@
-<footer>
-  <div class="footer-inner">
-    <div class="footer-content">
-      <a href="<%= href %>" rel="nofollow noopener">
-        <%= name %>
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
-          <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
-        </svg>
-        <%= version %>
-      </a>
-    </div>
-  </div>
+<footer>
+  <div class="footer-inner">
+    <div class="footer-content">
+      <a href="<%= href %>" rel="nofollow noopener">
+        <%= name %>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
+          <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
+        </svg>
+        <%= version %>
+      </a>
+    </div>
+  </div>
 </footer>

package/templates/utils/uri.ts

@@ -0,0 +1,40 @@
+import fs from 'fs'
+import path from 'path'
+import type { Type } from '../../types/tag'
+
+function runtimeProjectInfo() {
+    const projectPath = path.resolve(process.cwd(), 'package.json')
+    return JSON.parse(fs.readFileSync(projectPath, 'utf-8'))
+}
+
+function linkIsCDN(url: string) {
+    if (/^https*:\/\//.test(url) || /^\/\//.test(url)) {
+        return true
+    }
+    return false
+}
+
+/**
+ * @description 图片链接生成
+ *  1. http或https开头的cdn链接，将原样转换回去，且只会返回第一个
+ *  2. 多个链接组合成一个，并在前面添加上当前项目的name
+ * @param {string[]} uris uri组，每一个uri必须带 / 开头，保持和 hexo 图片标签一样
+ * @returns 
+ */
+export function uriFor(uris: string[]) {
+    if (uris.length === 1 && linkIsCDN(uris[0])) {
+        return uris[0]
+    }
+    const { name } = runtimeProjectInfo()
+    return ['/', name, ...uris].join('')
+}
+
+export function typeBgClass(type: Type) {
+    if (['warning', 'info', 'light'].includes(type)) {
+        return 'bg-dark'
+    }
+    if (['dark'].includes(type)) {
+        return 'bg-light'
+    }
+    return ''
+}

package/source/css/_pages/_tag/tag.styl

@@ -1,9 +0,0 @@
-.lnote-popover-btn
-    --bs-btn-padding-y: 0
-    --bs-btn-line-height: 1
-.lnote-popover
-    --bs-popover-border-color: var(--bs-primary)
-    --bs-popover-header-bg: var(--bs-primary)
-    --bs-popover-header-color: var(--bs-white)
-    --bs-popover-body-padding-x: 1rem
-    --bs-popover-body-padding-y: .5rem

package/templates/noun.vue

@@ -1,18 +0,0 @@
-<template>
-    <button v-if="title == null" type="button" class="btn btn-link lnote-popover-btn" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-placement="right"
-        data-bs-custom-class="lnote-popover" :data-bs-content="desc">
-        {{ text }}
-        <svg width="18" height="18"><use xlink:href="#question-circle-fill"></use></svg>
-    </button>
-    <button v-else type="button" class="btn btn-link lnote-popover-btn" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-placement="right"
-        data-bs-custom-class="lnote-popover" :data-bs-title="title" :data-bs-content="desc">
-        {{ text }}
-        <svg width="18" height="18"><use xlink:href="#question-circle-fill"></use></svg>
-    </button>
-</template>
-
-<script lang="ts" setup>
-const title: string | undefined = undefined
-const desc = ''
-const text = ''
-</script>