mirror of
https://github.com/TriM-Organization/LiteyukiBot-TriM.git
synced 2024-11-28 16:24:51 +08:00
feat: 优化插件商店排版
This commit is contained in:
parent
9743868cce
commit
e271059720
8
docs/.vuepress/client.js
Normal file
8
docs/.vuepress/client.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { defineClientConfig } from "vuepress/client";
|
||||
import storeComp from "./components/store.vue";
|
||||
|
||||
export default defineClientConfig({
|
||||
enhance: ({ app, router, siteData }) => {
|
||||
app.component("storeComp", storeComp);
|
||||
},
|
||||
});
|
||||
90
docs/.vuepress/components/ItemCard.vue
Normal file
90
docs/.vuepress/components/ItemCard.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="item-card">
|
||||
<div class="item-name">{{ props.item.name }}</div>
|
||||
<div class="item-description">{{ props.item.description }}</div>
|
||||
<div class="item-bar">
|
||||
<!-- 三个可点击svg，一个github，一个下载，一个可点击"https://github.com/{{ username }}.png?size=80"个人头像配上id-->
|
||||
<a :href=props.item.link class="">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16">
|
||||
<path fill="currentColor"
|
||||
d="m7.775 3.275l1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0a.751.751 0 0 1 .018-1.042a.751.751 0 0 1 1.042-.018a1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018a.751.751 0 0 1-.018-1.042m-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018a.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0a.751.751 0 0 1-.018 1.042a.751.751 0 0 1-1.042.018a1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div><a class="author-info" :href="`https://github.com/${props.item.author }`">
|
||||
<img class="icon avatar" :src="`https://github.com/${ props.item.author }.png?size=80`" alt="">
|
||||
<div class="author-name">{{ props.item.author }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {defineProps} from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
item: Object
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.item-card {
|
||||
position: relative;
|
||||
border-radius: 15px;
|
||||
background-color: #00000011;
|
||||
height: 160px;
|
||||
padding: 16px;
|
||||
margin: 10px;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.item-card:hover {
|
||||
border: 2px solid #00a6ff;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: #00a6ff;
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #00000055;
|
||||
}
|
||||
|
||||
.author-info {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.item-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
color: #00000055;
|
||||
}
|
||||
</style>
|
||||
38
docs/.vuepress/components/store.vue
Normal file
38
docs/.vuepress/components/store.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import ItemCard from './ItemCard.vue'
|
||||
|
||||
// 从public/assets/resources.json加载插件
|
||||
let items = ref([])
|
||||
fetch('/assets/resources.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
items.value = data
|
||||
})
|
||||
.catch(error => console.error(error))
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>主题/资源商店</h1>
|
||||
<div class="market">
|
||||
<!-- 布局商品-->
|
||||
<ItemCard v-for="item in items" :key="item.id" :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
color: #00a6ff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.market {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
39
docs/.vuepress/public/assets/resources.json
Normal file
39
docs/.vuepress/public/assets/resources.json
Normal file
@ -0,0 +1,39 @@
|
||||
[
|
||||
{
|
||||
"name": "KawaiiStatus",
|
||||
"author": "SnowyKami",
|
||||
"description": "可爱的状态卡片，仿照koishi的制作",
|
||||
"link": "https://cdn.liteyuki.icu/static/lrp/KawaiiStatus.zip",
|
||||
"icon": "https://cdn.jsdelivr.net/gh/SnowyKami/CDN/img/KawaiiStatus.png"
|
||||
},
|
||||
{
|
||||
"name": "MiSans字体包",
|
||||
"author": "SnowyKami",
|
||||
"description": "小米官方字体MiSans",
|
||||
"link": "https://cdn.liteyuki.icu/static/lrp/MiSansFonts.zip"
|
||||
},
|
||||
{
|
||||
"name": "MapleMono字体包",
|
||||
"author": "SnowyKami",
|
||||
"description": "适用于字母的字体包",
|
||||
"link": "https://cdn.liteyuki.icu/static/lrp/MapleMonoFonts.zip"
|
||||
},
|
||||
{
|
||||
"name": "示例包1",
|
||||
"author": "SnowyKami",
|
||||
"description": "A simple bot that shows the status of the bot and the server.",
|
||||
"link": ""
|
||||
},
|
||||
{
|
||||
"name": "示例包2",
|
||||
"author": "SnowyKami",
|
||||
"description": "A simple bot that shows the status of the bot and the server.",
|
||||
"link": ""
|
||||
},
|
||||
{
|
||||
"name": "示例包3",
|
||||
"author": "SnowyKami",
|
||||
"description": "A simple bot that shows the status of the bot and the server.",
|
||||
"link": ""
|
||||
}
|
||||
]
|
||||
@ -3,6 +3,7 @@ import navbar from "./navbar.js";
|
||||
import sidebar from "./sidebar.js";
|
||||
|
||||
export default hopeTheme({
|
||||
|
||||
hostname: "https://vuepress-theme-hope-docs-demo.netlify.app",
|
||||
|
||||
author: {
|
||||
@ -45,7 +46,10 @@ export default hopeTheme({
|
||||
|
||||
// 在这里配置主题提供的插件
|
||||
plugins: {
|
||||
// 你应该自行生成自己的评论服务
|
||||
searchPro: true,
|
||||
// search: true,
|
||||
|
||||
blog: true,
|
||||
comment: {
|
||||
provider: "Giscus",
|
||||
repo: "snowykami/LiteyukiBot",
|
||||
@ -63,6 +67,7 @@ export default hopeTheme({
|
||||
align: true,
|
||||
attrs: true,
|
||||
codetabs: true,
|
||||
footnote: true,
|
||||
component: true,
|
||||
demo: true,
|
||||
figure: true,
|
||||
@ -88,6 +93,7 @@ export default hopeTheme({
|
||||
tabs: true,
|
||||
vPre: true,
|
||||
|
||||
|
||||
// 在启用之前安装 chart.js
|
||||
// chart: true,
|
||||
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
{
|
||||
"name": "liteyuki",
|
||||
"version": "2.0.0",
|
||||
"description": "A project of vuepress-theme-hope",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"docs:build": "vuepress-vite build .",
|
||||
"docs:clean-dev": "vuepress-vite dev . --clean-cache",
|
||||
"docs:dev": "vuepress-vite dev .",
|
||||
"docs:update-package": "pnpm dlx vp-update"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vuepress/bundler-vite": "2.0.0-rc.9",
|
||||
"vue": "^3.4.21",
|
||||
"vuepress": "2.0.0-rc.9",
|
||||
"vuepress-theme-hope": "2.0.0-rc.32"
|
||||
}
|
||||
}
|
||||
2861
docs/pnpm-lock.yaml
2861
docs/pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -1,27 +1 @@
|
||||
---
|
||||
home: true
|
||||
icon: paint-brush
|
||||
heroText: Liteyuki Theme Store
|
||||
tagline: 轻雪主题/资源商店
|
||||
|
||||
highlights:
|
||||
- header: 所有资源包
|
||||
bgImage: https://theme-hope-assets.vuejs.press/bg/2-light.svg
|
||||
bgImageDark: https://theme-hope-assets.vuejs.press/bg/2-dark.svg
|
||||
bgImageStyle:
|
||||
background-repeat: repeat
|
||||
background-size: initial
|
||||
features:
|
||||
- title: Kawaii-Status
|
||||
icon: paint-brush
|
||||
details: 可爱的状态卡片，模仿的Koishi
|
||||
link: https://cdn.liteyuki.icu/static/lrp/KawaiiStatus.zip
|
||||
- title: MiSans字体包
|
||||
icon: paint-brush
|
||||
details: 标准字体包，适用于大多数主题，简约大方
|
||||
link: https://cdn.liteyuki.icu/static/lrp/MiSansFonts.zip
|
||||
- title: MapleMono字体包
|
||||
icon: paint-brush
|
||||
details: 适用于标准主题的MapleMono字体包
|
||||
link: https://cdn.liteyuki.icu/static/lrp/MapleMonoFonts.zip
|
||||
---
|
||||
<storeComp/>
|
||||
@ -1,4 +1,4 @@
|
||||
{
|
||||
|
||||
"compilerOptions": {
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext",
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
---
|
||||
title: 资源包
|
||||
icon: comment
|
||||
icon: paint-brush
|
||||
order: 3
|
||||
category: 使用手册
|
||||
---
|
||||
|
||||
## 简介
|
||||
资源包,也可根据用途称为主题包、字体包、语言包等,它允许你一定程度上自定义轻雪的外观,并且不用修改源码
|
||||
- 资源/主题商店提供了一些资源包供你选择,你也可以自己制作资源包
|
||||
- [资源/主题商店](/store/)提供了一些资源包供你选择,你也可以自己制作资源包
|
||||
- 资源包的制作很简单,如果你接触过`Minecraft`的资源包,那么你会很快上手
|
||||
- 部分内容制作需要一点点前端基础,例如`html`,`css`,如果你不懂,可以参考一些教程
|
||||
- 欢迎各位投稿资源包到轻雪资源商店
|
||||
|
||||
Loading…
Reference in New Issue
Block a user