原创...大约 3 分钟
盒子小屋🏠 的音乐播放器插件来自 vuepress-plugin-Meting2🙏 支持vuepress2. x
插件作者借鉴 vuepress-plugin-sbaudio 和 vuepress-plugin-meting
原创...大约 3 分钟
VuePress-Theme-Hope主题，当在 行为选项 中设置
{ custom: true }时，主题将通过@theme-hope别名来引入组件，所以你可以利用这一点来替换主题的任何一个组件。
替换组件的方式
你需要在自己的 VuePress 配置文件通过 alias 替换主题中使用的组件别名。
原创...大约 7 分钟
整个主题在多处都添加了 FontClass / 图片 格式图标的支持。
目前可以使用 iconfont、iconify 和 fontawesome 为你的项目添加图标，可以设置自己的图标资源。
同时，png/svg 格式的图标也是支持的。可以使用完整 URL 或路径名来添加图标。
具体 参考主题>指南>界面>图标支持
原创...大约 3 分钟
VuePress-Theme-Hope主题对
vuepress-plugin-search-pro，@vuepress/plugin-docsearch和@vuepress/plugin-search三种搜索插件提供了内置支持。具体实现参考主题的指南>功能>搜索
盒子小屋🏠 采用了@vuepress/plugin-docsearch搜索插件
原创...大约 5 分钟
引入卡片组件
- 将卡片组件添加到项目目录下
盒子小屋🏠 的卡片组件放置在 .vuepress/components 下。
卡片组件
// .vuepress/components/Mylink.vue
<!-- 卡片组件 -->
<template>
<div class="vp-project-panel">
<template
v-if="linkDatas.length > 0"
v-for="(item, index) in linkDatas"
:key="index"
>
<a
class="item vp-project-card"
:class="GetColorClassName(index)"
:href="item.link"
target="_blank"
>
<img
class="vp-project-image"
:src="item.ico"
alt=""
onerror='this.onerror=null,this.src=this.srcset="/assets/default/loading.webp"'
/>
<div class="vp-project-name">{{ item.name }}</div>
<div class="vp-project-desc">{{ item.desc }}</div>
</a>
</template>
</div>
</template>
<script setup lang="ts">
import { PropType } from "vue";
import { LinkData } from "../data/friendData";
const props = defineProps({
type: String,
links:Object as PropType<LinkData[]>,
});
let linkDatas: LinkData[];
console.log(props.links);
linkDatas = props.links
const GetColorClassName = (index) => {
const Idx = index % 9;
return `project${Idx}`;
};
</script>
<style lang="scss" scoped>
a.item {
text-decoration: none;
}
.project-card .image {
border-radius: 50%;
}
</style>
原创...大约 4 分钟