valaxy-theme-yun 0.14.60 → 0.14.61

package/components/YunBg.vue

@@ -6,37 +6,39 @@ import { useThemeConfig } from '../composables'
 
 const themeConfig = useThemeConfig()
 
-const bgImgOpacity = useCssVar('--va-bg-img-opacity')
-if (themeConfig.value.bg_image.opacity)
-  bgImgOpacity.value = themeConfig.value.bg_image.opacity.toString() || '1'
+if (typeof themeConfig.value.bg_image.url !== 'undefined') {
+  const bgImgOpacity = useCssVar('--yun-bg-img-opacity')
+  if (themeConfig.value.bg_image.opacity)
+    bgImgOpacity.value = themeConfig.value.bg_image.opacity.toString() || '1'
 
-const bgImgUrl = computed(() => {
-  return isDark.value
-    ? themeConfig.value.bg_image.dark
-    : themeConfig.value.bg_image.url
-})
+  const bgImgUrl = computed(() => {
+    return isDark.value
+      ? themeConfig.value.bg_image.dark
+      : themeConfig.value.bg_image.url
+  })
 
-const bgImgCssVar = useCssVar('--va-bg-img')
+  const bgImgCssVar = useCssVar('--yun-bg-img')
 
-watch(() => bgImgUrl.value, () => {
-  bgImgCssVar.value = `url('${bgImgUrl.value}')`
-}, { immediate: true })
+  watch(() => bgImgUrl.value, () => {
+    bgImgCssVar.value = `url('${bgImgUrl.value}')`
+  }, { immediate: true })
+}
 </script>
 
 <template>
-  <div class="va-bg" />
+  <div class="yun-bg" />
 </template>
 
 <style lang="scss">
 @use 'valaxy/client/styles/mixins/index.scss' as *;
 
-.va-bg {
+.yun-bg {
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: -1;
 
-  background-image: var(--va-bg-img);
+  background-image: var(--yun-bg-img);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -44,12 +46,12 @@ watch(() => bgImgUrl.value, () => {
   background-attachment: fixed;
   animation-name: bgFadeIn;
   animation-duration: 2s;
-  opacity: var(--va-bg-img-opacity, 1);
+  opacity: var(--yun-bg-img-opacity, 1);
 }
 
 // for ios
 @include ios {
-  .va-bg {
+  .yun-bg {
     background-attachment: scroll;
   }
 }
@@ -60,7 +62,7 @@ watch(() => bgImgUrl.value, () => {
   }
 
   to {
-    opacity: var(--va-bg-img-opacity, 1);
+    opacity: var(--yun-bg-img-opacity, 1);
   }
 }
 </style>

package/components/YunLinks.vue

@@ -14,9 +14,17 @@ interface LinkType {
 const props = defineProps<{
   links: string | LinkType[]
   random: boolean
+  /**
+   * @description: 图片加载失败时显示的图片
+   */
+  errorImg?: string
 }>()
 
 const { data } = useRandomData(props.links, props.random)
+
+function onError(e: Event) {
+  onImgError(e, props.errorImg)
+}
 </script>
 
 <template>
@@ -25,7 +33,11 @@ const { data } = useRandomData(props.links, props.random)
       <li v-for="link, i in data" :key="i" class="link-item" :style="`--primary-color: ${link.color}`">
         <a class="link-url" p="x-4 y-2" :href="link.url" :title="link.name" alt="portrait" rel="friend">
           <div class="link-left">
-            <img class="link-avatar" w="16" h="16" loading="lazy" :src="link.avatar" :alt="link.name" :onError="onImgError">
+            <img
+              class="link-avatar" width="64" height="64" w="16" h="16"
+              loading="lazy" :src="link.avatar" :alt="link.name"
+              @error="onError"
+            >
           </div>
           <div class="link-info" m="l-2">
             <div class="link-blog" font="serif black">{{ link.blog }}</div>

package/docs/zh-CN/config.md

@@ -53,6 +53,7 @@ export default defineConfig<ThemeConfig>({
 
 - `links`: 友情链接信息（可以是 YAML 数组形式，也可以是一个 JSON 文件链接）
 - `random`: 是否随机展示
+- `errorImg`: 图片加载失败时的图片链接
 
 譬如：
 
@@ -81,5 +82,20 @@ links:
 random: true
 ---
 
-<YunLinks :links="frontmatter.links" :random="frontmatter.random" />
+<YunLinks :links="frontmatter.links" :random="frontmatter.random" errorImg="https://cdn.yunyoujun.cn/img/avatar/none.jpg" />
+```
+
+## 样式
+
+### 覆盖背景、侧边栏图片
+
+您可以新建 `styles/css-vars.scss`，覆盖默认 CSS 变量。
+
+```css
+:root {
+  /* 背景图片 */
+  --yun-bg-img: url("https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg");
+  /* 侧边栏背景图片 */
+  --yun-sidebar-bg-img: url("https://cdn.yunyoujun.cn/img/bg/alpha-stars-timing-1.webp");
+}
 ```

package/node/config.ts

@@ -18,7 +18,7 @@ export const defaultThemeConfig: ThemeConfig = {
 
   bg_image: {
     enable: true,
-    url: 'https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg',
+    // url: bgImg,
     // dark: 'https://cdn.yunyoujun.cn/img/bg/dark-stars-timing-0-blur-30px.png',
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.14.60",
+  "version": "0.14.61",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.7",
-    "valaxy": "0.14.60",
+    "valaxy": "0.14.61",
     "valaxy-addon-waline": "0.1.0"
   }
 }

package/styles/vars.scss

@@ -5,10 +5,10 @@ $light: () !default;
 $light: map.merge(
   (
     "bg-img":
-      url("https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg"),
+      url("../assets/images/light/bg-img.jpg"),
     "sidebar-bg-color": var(--va-c-bg-light),
     "sidebar-bg-img":
-      url("https://cdn.yunyoujun.cn/img/bg/alpha-stars-timing-1.webp"),
+      url("../assets/images/light/sidebar-bg-img.webp"),
   ),
   $light
 );

package/types/index.d.ts

@@ -72,7 +72,7 @@ export interface ThemeConfig {
     /**
      * @en Image url
      */
-    url: string
+    url?: string
     /**
      * @en Image url when dark mode
      */

package/utils/index.ts

@@ -1,10 +1,10 @@
-export const anonymousImage = 'https://cdn.yunyoujun.cn/img/avatar/none.jpg'
+import noneImg from '../assets/images/none.jpg'
 
 /**
  * set default img
  * @param e
  */
-export function onImgError(e: Event, defaultImg = anonymousImage) {
+export function onImgError(e: Event, defaultImg = noneImg) {
   const targetEl = e.target as HTMLImageElement
   targetEl.setAttribute('data-src', targetEl.src)
   targetEl.src = defaultImg