---
url: /about/index.md
---
# 关于

---

---
url: /blog/0uayyiox/index.md
---
# 在vuepress中使用vue-toastification通知组件（踩坑日记）
在写完了vue中使用vue-toastification通知组件的教程后，我发现他也可以在==vuepress-theme-hope==中集成

## 安装

### 安装依赖

在项目==根目录==执行

::: code-tabs

@tab npm

```bash
npm install --save vue-toastification
```

@tab pnpm

```bash
pnpm install --save vue-toastification
```

@tab yarn

```bash
yarn add vue-toastification
```

:::

### 在配置中启用

按照官方文档的说法，我们应该在自定义vue组件中直接引入vue-toastification组件（第一个坑），但是我们并没有`main.js`这样的入口文件，只能在`~/.vuepress/client.js`中注册组件

示例

```js title=".vuepress/client.js"
import { defineClientConfig } from 'vuepress/client'
//...
import "vue-toastification/dist/index.css";
import Toast from 'vue-toastification'

export default defineClientConfig({
  enhance({ app }) {
    //其他内容
    app.use(Toast, {
      position: 'top-right',
      timeout: 3000,
      closeOnClick: true,
      pauseOnFocusLoss: true,
      pauseOnHover: true,
      draggable: true,
      draggablePercent: 0.6,
      showCloseButtonOnHover: false,
      hideProgressBar: false,
      transition: 'Vue-Toastification__slideBlurred',
    })
  },
})

```

### 配置vite预打包

如果只是在`client.js`中注册组件，编译的时候==100%会报错（大坑）==\
就像这样

```bash title="error"
import Toast, { useToast } from "vue-toastification";
                ^^^^^^^^
SyntaxError: Named export 'useToast' not found. The requested module 'vue-toastification' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:        

import pkg from 'vue-toastification';
const { useToast } = pkg;
```

必须在`~/.vuepress/config.js`中配置vite预打包才能编译通过

```js title=".vuepress/config.js"
import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from 'vuepress'


export default defineUserConfig({
    //...
    bundler: viteBundler({
        viteOptions: {
            optimizeDeps: {
                include: ['vue-toastification'],   // 开发依赖预打包
            },
            ssr: {
                noExternal: ['vue-toastification'], // 对 SSR 也进行打包
            },
        },
    }),
    //...
})

```

这样就可以像在普通vue项目里一样使用vue-toastification了

## 使用示例

### 编写任意组件

比如

```vue title="example.vue"
<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()

const showToast = (type, message) => {
    toast[type](message)
}
</script>

<template>
    <div style="display: flex;flex-direction: column;">
    <span class="aaa" style="background-color: #4caf50;" @click="showToast('success', '这是一条成功消息')">
        点击显示成功消息
    </span>
    <br />
    <span class="aaa" style="background-color: #2196f3;" @click="showToast('info', '这是一条信息消息')">
        点击显示信息消息
    </span>
    <br />
    <span class="aaa" style="background-color: #ffc107ff;" @click="showToast('warning', '这是一条警告消息')">
        点击显示警告消息
    </span>
    <br />
    <span class="aaa" style="background-color: #ff5252;" @click="showToast('error', '这是一条错误消息')">
        点击显示错误消息
    </span>
    </div>
</template>

<style scoped>
    .aaa {
        cursor: pointer;
        color: #fff;
        padding: 5px;
        border-radius: 5px;
}
</style>
```

### 在任意页面使用

```markdown title="example.md"
<script setup>
import example from 'xxx/example.vue'
</script>

<example />
```

### 或注册为全局组件

```js title="~/.vuepress/client.js"
import example from 'xxx/example.vue'
import { defineClientConfig } from 'vuepress/client'

export default defineClientConfig({
  enhance({ app }) {
    app.use(example)
  },
})

```

## 相关链接

* [vue组件系列之通知组件](/blog/o7ymtzt1/)

## 参考文献

* [vite文档](https://vitejs.cn/vite3-cn/guide/)
* [vue-toastification文档](https://github.com/Maronato/vue-toastification)
* [vue-toastification快速开始页面](https://vue-toastification.maronato.dev/)

---

---
url: /blog/136qrurr/index.md
---
# 在 Vuepress Theme Hope 中展示站点信息
本教程将教你如何在 VuePress Theme Hope 博客中添加一个美观的站点信息展示组件，显示文章数量、标签数量、分类数量、~~评论数量~~以及网站运行时间。

## 效果预览

## 实现步骤

### 1：创建自定义插件

首先，我们需要创建一个 VuePress 插件，在构建时统计站点信息。

创建文件 `.vuepress/plugins/site-info.js`：

```javascript
import { path } from '@vuepress/utils'
import { writeFileSync } from 'fs'

/**
 * 站点统计插件
 * 在编译时统计文章数量、标签、分类等信息
 */
export const siteInfoPlugin = () => ({
  name: 'vuepress-plugin-site-info',

  onInitialized(app) {
    console.log('[site-info-plugin] Generating Site Info')
    // 收集所有页面信息
    const pages = app.pages
    const blogPages = pages.filter(page => {
      // 过滤出博客文章（排除首页和非文章页面）
      return page.filePathRelative?.startsWith('blog/') && 
             !page.frontmatter.home &&
             !page.frontmatter.layout
    })

    // 统计数据
    const stats = {
      postCount: blogPages.length,
      tags: new Set(),
      categories: new Set(),
    }

    // 遍历所有文章收集信息
    blogPages.forEach(page => {
      // 收集标签
      if (page.frontmatter.tags && Array.isArray(page.frontmatter.tags)) {
        page.frontmatter.tags.forEach(tag => stats.tags.add(tag))
      }

      // 收集分类 - 从文件路径中提取（blog/ 目录下的第一级子目录）
      if (page.filePathRelative) {
        // 移除 'blog/' 前缀，然后取第一个目录段作为分类
        const relativePath = page.filePathRelative.replace('blog/', '')
        const category = relativePath.split('/')[0]
        if (category && category !== relativePath) {
          // 只有在有子目录的情况下才认为是分类
          stats.categories.add(category)
        }
      }
    })

    // 转换为最终格式
    const statsData = {
      postCount: stats.postCount,
      tagCount: stats.tags.size,
      categoryCount: stats.categories.size,
      updatedAt: new Date().toISOString()
    }

    // 生成 JSON 文件到 public 目录
    const outputPath = path.resolve(app.dir.public(), 'site-info.json')
    writeFileSync(outputPath, JSON.stringify(statsData, null, 2))
    
    console.log('[site-info-plugin] Site Info Generated:\n', statsData)
  }
})
```

### 2：注册插件

在 `.vuepress/config.js` 中注册插件：

```javascript
import { siteInfoPlugin } from './plugins/site-info.js'

export default defineUserConfig({
  // ... 其他配置
  
  plugins: [
    // ... 其他插件
    siteInfoPlugin(),
  ],
})
```

### 3：创建站点信息组件

创建任意vue组件，如 `.vuepress/components/SiteInfo.vue`：

```vue :collapsed-lines
<template>
  <div class="site-info-card">
    <h3 class="site-info-title">📊 站点信息</h3>
    
    <div class="site-info-content">
      <!-- 文章数量 -->
      <div class="site-info-item">
        <span class="site-info-number">{{ stats.postCount ?? 0 }}</span>
        <span class="site-info-label">文章</span>
      </div>
      
      <!-- 标签数量 -->
      <div class="site-info-item">
        <span class="site-info-number">{{ stats.tagCount ?? 0 }}</span>
        <span class="site-info-label">标签</span>
      </div>
      
      <!-- 分类数量 -->
      <div class="site-info-item">
        <span class="site-info-number">{{ stats.categoryCount ?? 0 }}</span>
        <span class="site-info-label">分类</span>
      </div>
    </div>
    
    <!-- 网站运行时间 -->
    <div class="site-running-time">
      <span class="running-time-label">🎉 本站已运行：</span>
      <span class="running-time-value">{{ runningTime }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const siteCreatedDate = ref(new Date('2024-01-01')) // 修改为你的站点创建日期
const runningTime = ref('')
let timer = null

const stats = ref({
  postCount: 0,
  tagCount: 0,
  categoryCount: 0,
  updatedAt: ''
})

// 计算运行时间
const updateRunningTime = () => {
  const now = new Date()
  const created = siteCreatedDate.value
  const diff = now.getTime() - created.getTime()
  
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
  const minutes = Math.floor((diff / (1000 * 60)) % 60)
  const seconds = Math.floor((diff / 1000) % 60)
  
  runningTime.value = `${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`
}

onMounted(async () => {
  // 立即更新一次
  updateRunningTime()
  
  // 每秒更新一次运行时间
  timer = setInterval(updateRunningTime, 1000)
  
  try {
    // 加载站点统计信息
    const response = await fetch('/site-info.json')
    const data = await response.json()
    stats.value = data
  } catch (error) {
    console.error('加载站点信息失败:', error)
  }
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.site-info-card {
  padding: 20px;
  background: var(--body-bg-color);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.site-info-title {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  color: var(--text-color);
  text-align: center;
}

.site-info-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.site-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(125, 125, 125, 0.1);
  border-radius: 8px;
  min-width: 80px;
  transition: background-color 0.3s ease;
}

.site-info-item:hover {
  background: rgba(125, 125, 125, 0.15);
}

.site-info-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--theme-color);
}

.site-info-label {
  font-size: 0.875rem;
  color: var(--text-color-light);
}

.site-running-time {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  margin-top: 15px;
  background: rgba(125, 125, 125, 0.08);
  border-radius: 8px;
  font-size: 0.875rem;
}

.running-time-label {
  color: var(--text-color-light);
}

.running-time-value {
  color: var(--theme-color);
  font-weight: 600;
}

@media (max-width: 768px) {
  .site-info-content {
    gap: 10px;
  }
  
  .site-info-item {
    padding: 8px 12px;
    min-width: 70px;
  }
  
  .site-info-number {
    font-size: 1.25rem;
  }
}
</style>
```

### 4：在页面中使用

#### 在 Markdown 文件中直接使用

在你的 Markdown 文件（如 `README.md`）中直接使用组件：

```markdown
<!-- 其他内容 -->

<script setup lang='ts'>
import SiteInfo from '/.vuepress/theme/components/SiteInfo.vue'
</script>

<SiteInfo />

<!-- 其他内容 -->
```

#### 在首页布局中使用

在任意布局文件中引入：
此处以布局文件 `.vuepress/layouts/home.vue` 为例

```vue
<template>
  <div class="home-page">
    <header>
      <h1>我的博客</h1>
    </header>
    
    <SiteInfo />
    
    <main>
      <slot />
    </main>
  </div>
</template>

<script setup>
import SiteInfo from '../components/SiteInfo.vue'
</script>
```

## 说明

### 插插件何时执行？

插件在每次==构建或启动开发服务器==时执行，修改文章后==重新构建才会更新统计信息==

### 分类如何统计?

自动统计 `blog/` 目录下的第一级子目录（==与vuepress-theme-hope 默认分类规则一致==）

### 如何传递信息？

通过执行插件生成`./vuepress/public/site-info.json`储存站点统计信息，组件通过`fetch`获取数据并渲染

## 进阶配置

### 添加动画效果

为数字添加计数动画：

```vue
<script setup>
import { ref, computed } from 'vue'

const animatedNumber = (target) => {
  const current = ref(0)
  const step = () => {
    if (current.value < target) {
      current.value++
      requestAnimationFrame(step)
    }
  }
  step()
  return current
}
</script>
```

### 统计评论数

::: important
以下教程基于==Waline 评论系统==~~（因为本站使用 Waline 评论系统）~~，若不同请自行查找文档
:::

```vue :collapsed-lines=95
<template>
  <div class="site-info-card">
    <h3 class="site-info-title">📊 站点信息</h3>
    
    <div class="site-info-content">
      <!-- 文章数量 -->
      <div class="site-info-item">
        <span class="site-info-number">{{ stats.postCount ?? 0 }}</span>
        <span class="site-info-label">文章</span>
      </div>
      
      <!-- 标签数量 -->
      <div class="site-info-item">
        <span class="site-info-number">{{ stats.tagCount ?? 0 }}</span>
        <span class="site-info-label">标签</span>
      </div>
      
      <!-- 分类数量 -->
      <div class="site-info-item">
        <span class="site-info-number">{{ stats.categoryCount ?? 0 }}</span>
        <span class="site-info-label">分类</span>
      </div>

      <!-- 评论数量 --> // [!code focus]
      <div class="site-info-item"> // [!code focus]
        <span class="site-info-number">{{ commentCount ?? 0 }}</span> // [!code focus]
        <span class="site-info-label">评论</span> // [!code focus]
      </div> // [!code focus]
    </div>
    
    <!-- 网站运行时间 -->
    <div class="site-running-time">
      <span class="running-time-label">🎉 本站已运行：</span>
      <span class="running-time-value">{{ runningTime }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const commentCount = ref(0) // [!code focus]
const siteCreatedDate = ref(new Date('2024-01-01')) // 修改为你的站点创建日期
const runningTime = ref('')
let timer = null

const stats = ref({
  postCount: 0,
  tagCount: 0,
  categoryCount: 0,
  updatedAt: ''
})

// 计算运行时间
const updateRunningTime = () => {
  const now = new Date()
  const created = siteCreatedDate.value
  const diff = now.getTime() - created.getTime()
  
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
  const minutes = Math.floor((diff / (1000 * 60)) % 60)
  const seconds = Math.floor((diff / 1000) % 60)
  
  runningTime.value = `${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`
}

onMounted(async () => {
  // 立即更新一次
  updateRunningTime()
  
  // 每秒更新一次运行时间
  timer = setInterval(updateRunningTime, 1000)
  
  try {
    // 加载站点统计信息
    const response = await fetch('/site-info.json')
    const data = await response.json()
    stats.value = data
    const commentCountResponse = await fetch('https://your.waline.site/api/comment?type=count', { signal: controller.signal }) // [!code focus]
    const commentCountData = await commentCountResponse.json() // [!code focus]
    commentCount.value = commentCountData.data // [!code focus]
  } catch (error) {
    console.error('加载站点信息失败:', error)
  }
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.site-info-card {
  padding: 20px;
  background: var(--body-bg-color);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.site-info-title {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  color: var(--text-color);
  text-align: center;
}

.site-info-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.site-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(125, 125, 125, 0.1);
  border-radius: 8px;
  min-width: 80px;
  transition: background-color 0.3s ease;
}

.site-info-item:hover {
  background: rgba(125, 125, 125, 0.15);
}

.site-info-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--theme-color);
}

.site-info-label {
  font-size: 0.875rem;
  color: var(--text-color-light);
}

.site-running-time {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  margin-top: 15px;
  background: rgba(125, 125, 125, 0.08);
  border-radius: 8px;
  font-size: 0.875rem;
}

.running-time-label {
  color: var(--text-color-light);
}

.running-time-value {
  color: var(--theme-color);
  font-weight: 600;
}

@media (max-width: 768px) {
  .site-info-content {
    gap: 10px;
  }
  
  .site-info-item {
    padding: 8px 12px;
    min-width: 70px;
  }
  
  .site-info-number {
    font-size: 1.25rem;
  }
}
</style>
```

## 总结

通过以上步骤，你就可以在 VuePress Theme Hope 博客中添加一个功能完善的站点信息展示组件。这个组件不仅能够展示站点的基本统计信息，还能实时显示网站运行时间，提升用户体验。

如果你有任何问题或建议，欢迎在评论区留言！

---

---
url: /blog/3omso0b2/index.md
---
# vue组件系列之一言
> 在进行网页开发时，您是否觉得页面没有活力，您是否觉得缺少人文关怀？
> 于是，让页面得到些许生机的组件——“一言”应运而生

## 基础内容

### 组件内容

相信大家在本博客首页都看到了“motto”这个小组件这里再次放送（:yum:





::: info

本组件使用的api为`https://v1.hitokoto.cn`

:::

它的代码如下

```vue
<script setup lang="ts">
import { ref, onMounted } from "vue";

const phrase = ref('正在加载一言...')

const fetchPhrase = async () => {
  try {
    const response = await fetch('https://v1.hitokoto.cn?c=d&encode=json')
    const data = await response.json()
    phrase.value = data.hitokoto || '今日箴言'
  } catch (error) {
    console.error('一言获取失败:', error)
    phrase.value = '旅途的意义在于过程而非终点'
  }
}

async function copyText() {
  try {
    await navigator.clipboard.writeText(phrase.value);
    alert('已复制到剪切板')
  } catch (err) {
    console.error('复制失败:', err);
    const textArea = document.createElement('textarea');
    textArea.value = phrase.value;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    alert('复制失败')
  }
}

onMounted(() => {
  fetchPhrase()
})
</script>

<template>
  <span @click="copyText()">
    {{ phrase }}
  </span>
</template>
```

### 组件工作流程

1. 组件加载时，调用`fetchPhrase`从api函数获取一言
2. 一言获取成功后，将其赋值给`phrase`变量
3. 组件渲染时，将`phrase`变量显示在页面上
4. 点击句子时，调用`copyText`函数将句子复制到剪切板，并调用`alert`函数提示用户复制情况

## 使用方法

### 普通vue项目中

很简单，只需要在vue文件中引入组件

示例：

```vue
<template>
  <div>
    <Hitokoto />
  </div>
</template>

<script setup lang="ts">
import Hitokoto from '~/Hitokoto.vue'
</script>
```

### 在==vuepress-theme-plume==中使用

::: info

[官方文档](https://theme-plume.vuejs.press/)

:::

> 由于官方文档没有明确说明如何插入自定义组件（也可能是我没看到:kissing:），于是我参照官方给出的[Repo卡片示例](https://theme-plume.vuejs.press/guide/components/github-repo-card/)作本章节教程

1. 在`~/.vuepress/xxx`目录下创建`Hitokoto.vue`文件
   例如：
   ![示例](/images/3omso0b2/1.png)

2. 在`~/.vuepress/client.js`文件中添加组件并声明全局组件
   例如：

```js title="client.js"
import { defineClientConfig } from 'vuepress/client'
// import CustomComponent from './theme/components/Custom.vue'
import Hitokoto from './theme/components/hitokoto.vue'
// import './theme/styles/custom.css'

export default defineClientConfig({
  enhance({ app }) {
    // your custom components
    // app.component('CustomComponent', CustomComponent)
    app.component('Hitokoto', Hitokoto)
  },
})

```

3. 在md文件中直接使用

如：

```markdown
## 今日箴言

<Card 
    title="今日箴言（单击句子以复制）"          
    icon="material-symbols:voice-chat-rounded">
  <Hitokoto />
</Card>

```

::: info

其中，`<Hitokoto />`是我们自定义的组件，`<Card />`是[vuepress-theme-plume提供的组件](https://theme-plume.vuejs.press/guide/components/card/)
:::

本文到此结束，希望对您有所帮助

::: tip
本文讲到的在vuepress-theme-plume中使用自定义组件的方法，以后的文章中可能会用到，到时将不再赘述:stuck\_out\_tongue\_winking\_eye:
:::

---

---
url: /blog/c0rf2kpx/index.md
---
# 免费live2d模型资源
本站模型资源来自<https://github.com/oh-my-live2d/live2d-models>，您可以自行前往下载模型

## 资源列表

### Pio

::: details  效果预览
![Pio](/images/c0rf2kpx/Pio.png)
:::

* 配置

```json
{
  "path": "https://www.esyka.top/live2d/Pio/model.json",
  "scale": 0.4,
  "position": [0, 50],
  "stageStyle": {
    "height": 300
  }
}
```

### HK416-1-normal

::: details  效果预览
![HK416-1-normal](/images/c0rf2kpx/HK416-1-normal.png)
:::

* 配置

```json
{
  "path": "https://www.esyka.top/live2d/HK416-1-normal/model.json",
  "scale": 0.07,
  "position": [-60, 50],
  "stageStyle": {
    "width": 350
  }
}
```

### HK416-2-destroy

::: details  效果预览
![HK416-2-destroy](/images/c0rf2kpx/HK416-2-destroy.png)
:::

* 配置

```json
{
  "path": "https://www.esyka.top/live2d/HK416-2-destroy/model.json",
  "scale": 0.075,
  "position": [-10, 20],
  "stageStyle": {
    "height": 350
  }
}
```

### HK416-2-normal

::: details  效果预览
![HK416-2-normal](/images/c0rf2kpx/HK416-2-normal.png)
:::

* 配置

```json
{
  "path": "https://www.esyka.top/live2d/HK416-2-normal/model.json",
  "scale": 0.065,
  "position": [-40, 50],
  "stageStyle": {
    "height": 350
  }
}
```

## 资源征集

征集更多有效的模型资源和配置, 您如果有更好的模型资源可以随时在这篇文章下方进行留言.

## 免责声明

本站所有模型文件均来源于网络, 仅供参考和学习, 严禁用于任何商业盈利项目, 所有以盈利为目的而使用本站的模型资源的行为均与作者无关，若侵权请在评论区留言，作者将及时删除。

## 相关链接

* [OhMyLive2D模型资源文档](https://oml2d.hacxy.cn/guide/models.html)
* [vuepress添加看板娘教程](/blog/e1re80y4/)

---

---
url: /blog/e1re80y4/index.md
---
# vuepress添加看板娘(live2d)教程
::: info

本文使用的live2d插件为`Oml2d`\
[官方文档](https://oml2d.hacxy.cn/)

:::

## 安装::ri:install-fill::

### 安装插件

1. cd 到vuepress项目根目录

2. 添加依赖包

::: code-tabs

@tab ::material-icon-theme:npm::npm

```bash
npm install vuepress-plugin-oh-my-live2d@latest
```

@tab:active ::material-icon-theme:pnpm::pnpm

```bash
pnpm add vuepress-plugin-oh-my-live2d@latest
```

@tab ::material-icon-theme:yarn::yarn

```bash
yarn add vuepress-plugin-oh-my-live2d@latest
```

:::

### 添加models（可选）

::: warning

由于官方文档提供的live2d模型资源站点`https://model.oml2d.com/`==疑似跑路==，强烈建议您自行部署模型资源，或[使用本站的模型资源](/blog/c0rf2kpx/)

:::

1. 下载模型资源 [Oml2d模型资源仓库](https://github.com/oh-my-live2d/live2d-models)
2. 将`models`目录下的模型文件复制到`~/.vuepress/public/images/live2d`目录下
   示例：
   ![模型列表](/images/e1re80y4/1.png)
   ![复制文件](/images/e1re80y4/2.png)

部署您的vuepress站点后，您就可以通过`{siteUrl}/live2d/xxx/xxx.json`获取模型

## 使用::uil:setting::

### 在vuepress配置文件中启用并配置插件

```js title="config.js"
import { oml2dPlugin } from 'vuepress-plugin-oh-my-live2d';

export default defineUserConfig({
  // ... other configs
  plugins: [
    oml2dPlugin({
      // 在这里配置选项
      models: [
        {
          path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/Live2D/Senko_Normals/senko.model3.json',
          scale: 0.12,
          position: [-10, 50],
          stageStyle: {
            width: 350
          }
        }
      ]
    })

    //  ...other plugins
  ]
});
```

::: details 参考本站的配置示例

```js title="config.js"
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
import { oml2dPlugin } from 'vuepress-plugin-oh-my-live2d';

export default defineUserConfig({
  base: '/',
  lang: 'zh-CN',
  title: '逸燧博客',
  description: '海阔凭鱼跃，天高任鸟飞',
  plugins: [
    oml2dPlugin({
        models: [
            {
                "path": "/live2d/Pio/model.json",
                "scale": 0.4,
                "position": [0, 50],
                "stageStyle": {
                    "height": 300
                }
            },
            {
                "path": "/live2d/HK416-1-normal/model.json",
                "scale": 0.07,
                "position": [-60, 50],
                "stageStyle": {
                    "width": 350
                }
            },
            {
                "path": "/live2d/HK416-2-destroy/model.json",
                "scale": 0.075,
                "position": [-10, 20],
                "stageStyle": {
                    "height": 350
                }
            },
            {
                "path": "/live2d/HK416-2-normal/model.json",
                "scale": 0.065,
                "position": [-40, 50],
                "stageStyle": {
                    "height": 350
                }
            },
        ]
    }),
  ],
})

```

:::

### 更多配置选项

::: tip
请查看[官方文档](https://oml2d.hacxy.cn/api/interfaces/Options.html)
:::

::: details 让看板娘右侧显示的示例

```js title="config.js"
import { oml2dPlugin } from 'vuepress-plugin-oh-my-live2d';

export default defineUserConfig({
  // ... other configs
  plugins: [
    oml2dPlugin({
      dockedPosition: 'right',
      models: [
        {
          path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/Live2D/Senko_Normals/senko.model3.json',
          scale: 0.12,
          position: [-10, 50],
          stageStyle: {
            width: 350
          }
        }
      ]
    })

    //  ...other plugins
  ]
});
```

:::

不出意外的话，看板娘就可以正常显示了

## 相关链接

* [live2d模型资源](/blog/c0rf2kpx/)
* [Oml2d插件文档](https://oml2d.hacxy.cn/)

---

---
url: /blog/hha92skp/index.md
---
# 病毒（寄生）
## 病毒的==成分==

病毒主要由以下成分组成;

1. 蛋白质
2. 核酸

::: tip

部分病毒也含有==脂质膜==

:::

## 遗传物质

病毒的遗传物质为==DNA==或==RNA==

例子：

* T2噬菌体：DNA
* 烟草花叶病毒：RNA

## 分类

### 按照==遗传物质==分类

#### RNA病毒

大多数病毒

#### DNA病毒

* \==噬菌体==
* 天花病毒
* \==乙肝==病毒

### 按照==宿主==分类

* 动物病毒
* 植物病毒
* 细菌病毒

## 进入与增殖方式

### 进入方式

1. 类==胞吞==（对于有==包膜==的病毒，如新冠）
2. 注入核酸

### 增殖方式

::: steps

1. 吸附
2. 入侵
3. 合成
4. 组装
5. 释放

:::

::: tip

病毒只提供==自身遗传物质==（==有的还提供逆转录酶=={.important}）

:::

## 如何检测

1. 抗原——抗体杂交
2. 先提取RNA，然后==逆转录==为cDNA，经过PCR后==电泳检测==

---

---
url: /blog/neef6etg/index.md
---
# Edgeone Pages（腾讯云pages）允许资源跨域请求教程
## 前情提要

起因是我在写[live2d资源分享](/blog/c0rf2kpx/)时，发现在其他网页引用本站资源会出现跨域问题，导致资源无法正常加载。\
根据[腾讯云pages文档](https://pages.edgeone.ai/zh/document/middleware)，我们可以使用==中间件==来处理`headers`

## 解决方法

废话不多说，我们直接上代码

```js title="middleware.js"
export function middleware(context) {
    // 为所有请求添加 CORS 头
    return context.next({
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET, HEAD, POST, OPTIONS',
            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
        }
    })
}
```

然后把`middleware.js`文件放在项目根目录，上传即可

:::: tip

如果你使用的是`vuepress`或者`vuejs`或其他类似框架，就把`middleware.js`文件放在`public`目录下

如：

::: file-tree

* docs
  * .vuepress
    * public
      * ++ **middleware.js**
        :::

::::

---

---
url: /blog/o7ymtzt1/index.md
---
# vue组件系列之通知组件
> 在进行网页开发时，您是否还在为无法及时优雅地反馈而烦恼？\
> 优雅的vue消息通知组件为此而生

## 安装与使用

### 在普通vue项目中使用

:::: steps

1. 安装依赖

   在项目根目录执行
   ::: code-tabs

   @tab npm

   ```bash
   npm install --save vue-toastification
   ```

   @tab pnpm

   ```bash
   pnpm install --save vue-toastification
   ```

   @tab yarn

   ```bash
   yarn add vue-toastification
   ```

   :::

2. 注册组件

   ```js title="main.js"

   import { createApp } from "vue";
   import Toast from "vue-toastification";
   // Import the CSS or use your own!
   import "vue-toastification/dist/index.css";

   const app = createApp(...);

   //配置选项
   const options = {
       // You can set your default options here
   };

   app.use(Toast, options);

   ```

   ::: details 推荐配置

   ```js
   const options = {
       position: 'top-right',
       timeout: 3000,
       closeOnClick: true,
       pauseOnFocusLoss: true,
       pauseOnHover: true,
       draggable: true,
       draggablePercent: 0.6,
       showCloseButtonOnHover: false,
       hideProgressBar: false,
       transition: 'Vue-Toastification__slideBlurred',
       };
   ```

   :::

3. 在普通组件中使用

   ```vue title="App.vue"
   <script setup>
   import { useToast } from 'vue-toastification'
   const toast = useToast()

   const showToast = (message) => {
   toast.success(message)
   }

   </script>

   <template>
   <span style="cursor: pointer;" @click="showToast('这是一条成功消息')">
       显示成功消息
   </span>
   </template>
   ```

   尝试一下

   ::: demo vue title="显示消息" desc="点击显示消息"

   ```vue
   <script setup>
   import { useToast } from 'vue-toastification'
   const toast = useToast()

   const showToast = (type, message) => {
   toast[type](message)
   }

   </script>

   <template>
   <div style="display: flex;flex-direction: column;">
   <span class="aaa" style="background-color: #4caf50;" @click="showToast('success', '这是一条成功消息')">
       点击显示成功消息
   </span>
   <br />
   <span class="aaa" style="background-color: #2196f3;" @click="showToast('info', '这是一条信息消息')">
       点击显示信息消息
   </span>
   <br />
   <span class="aaa" style="background-color: #ffc107ff;" @click="showToast('warning', '这是一条警告消息')">
       点击显示警告消息
   </span>
   <br />
   <span class="aaa" style="background-color: #ff5252;" @click="showToast('error', '这是一条错误消息')">
       点击显示错误消息
   </span>
   </div>
   </template>

   <style scoped>
   .aaa {
       cursor: pointer;
       color: #fff;
       padding: 5px;
       border-radius: 5px;
   }
   </style>
   ```

   :::

::::

### 在vuepress-theme-hope中使用

请看文章[《在vuepress-theme-hope中使用vue-toastification（踩坑日记）》](/blog/0uayyiox/)

## 进阶配置

请查看[vue-toastification文档](https://github.com/Maronato/vue-toastification)

## 参考文献

* [vue-toastification文档](https://github.com/Maronato/vue-toastification)
* [vue-toastification快速开始页面](https://vue-toastification.maronato.dev/)

---

---
url: /blog/qtcmpwl9/index.md
---
# 免费图片api资源
::: important 倡议
为了保障图片api的可用性和持续性，我们提倡进行以下行为：

1. \==不滥用==api
2. \==不攻击==api服务器
3. 合理使用api
   :::

## 已收集api列表

### SiiWay ImgAPI

* 请求方式: `GET`

* 返图方式: 直接返图

* 地址：

  ```url
  https://imgapi.siiway.top/image
  ```

* [官方文档](https://imgapi.siiway.top/docs)

::: details 预览
![SiiWay ImgAPI](https://imgapi.siiway.top/image)
:::

### 樱花

* 请求方式: `GET`

* 返图方式: 直接返图

* 地址：

  ```url
  https://www.dmoe.cc/random.php
  ```

* [官方网站](https://www.dmoe.cc/)

::: details 预览
![预览](https://www.dmoe.cc/random.php)
:::

### 夏沫

* 请求方式: `GET`

* 返图方式: 直接返图

* 地址：

  ::: code-tabs

  @tab 二次元

  ```url
  https://cdn.seovx.com/d/?mom=302
  ```

  @tab 美图

  ```url
  https://cdn.seovx.com/?mom=302
  ```

  @tab 古风

  ```url
  https://cdn.seovx.com/ha/?mom=302
  ```

  :::

* [官方网站](https://cdn.seovx.com/)

::: details 预览
![二次元图片预览](https://cdn.seovx.com/d/?mom=302)
![美图图片预览](https://cdn.seovx.com/?mom=302)
![古风图片预览](https://cdn.seovx.com/ha/?mom=302)
:::

### 保罗

* 请求方式: `GET`

* 返图方式: 直接返图

* 地址：

  ```url
  https://api.paugram.com/wallpaper/?source=jsd
  ```

* [官方网站](https://api.paugram.com/help/wallpaper)

::: details 预览
![图片预览](https://api.paugram.com/wallpaper/?source=jsd)
:::

### 墨天逸

* 请求方式: `GET`

* 返图方式: 直接返图

* 地址：

  ::: code-tabs

  @tab 二次元

  ```url
  https://api.mtyqx.cn/api/random.php
  ```

  @tab 小姐姐

  ```url
  https://api.mtyqx.cn/xjjapi/random.php
  ```

  :::

* [官方网站](https://api.mtyqx.cn/)

::: details 预览
![二次元图片预览](https://api.mtyqx.cn/api/random.php)
![小姐姐图片预览](https://api.mtyqx.cn/xjjapi/random.php)
:::

### 岁月小筑

* 请求方式: `GET`

* 返图方式: 直接返图

* 地址：

  ```url
  https://img.xjh.me/random_img.php
  ```

* [官方网站](https://img.xjh.me/)

::: details 预览
![二次元图片预览](https://img.xjh.me/random_img.php)
:::

### 遇见（ACG美图）

* 请求方式: `GET`

* 返图方式: `image/json/text`==下面演示image返图方法==

* 地址：

  ::: code-tabs

  @tab 原神

  ```url
  https://api.yujn.cn/api/gzl_ACG.php?type=image&form=原神
  ```

  @tab pc

  ```url
  https://api.yujn.cn/api/gzl_ACG.php?type=image&form=pc
  ```

  @tab pe

  ```url
  https://api.yujn.cn/api/gzl_ACG.php?type=image&form=pe
  ```

  @tab 萌版

  ```url
  https://api.yujn.cn/api/gzl_ACG.php?type=image&form=萌版
  ```

  @tab 头像

  ```url
  https://api.yujn.cn/api/gzl_ACG.php?type=image&form=头像
  ```

  @tab 风景

  ```url
  https://api.yujn.cn/api/gzl_ACG.php?type=image&form=风景
  ```

  :::

* [官方网站](https://api.yujn.cn/?action=interface\&id=362)

::: details 预览（==多图预警==）
![图片预览](https://api.yujn.cn/api/gzl_ACG.php?type=image\&form=原神)
![图片预览](https://api.yujn.cn/api/gzl_ACG.php?type=image\&form=pc)
![图片预览](https://api.yujn.cn/api/gzl_ACG.php?type=image\&form=pe)
![图片预览](https://api.yujn.cn/api/gzl_ACG.php?type=image\&form=萌版)
![图片预览](https://api.yujn.cn/api/gzl_ACG.php?type=image\&form=头像)
![图片预览](https://api.yujn.cn/api/gzl_ACG.php?type=image\&form=风景)
:::

### UApi

* 请求方式: `GET`

* 返图方式: 直接返图

* 请求参数:
  * `category`: 图片类型, 可选值:
    * `acg`（二次元动漫，UapiPro服务器）
    * `landscape`（风景图，外部图床）
    * `anime`（混合动漫）
    * `pc_wallpaper`（电脑壁纸，外部图床）
    * `mobile_wallpaper`（手机壁纸，外部图床）
    * `general_anime`（动漫图，外部图床）
    * `ai_drawing`（AI绘画，外部图床）
    * `bq`（表情包/趣图，UapiPro服务器）
    * `furry`（福瑞，UapiPro服务器）

* 地址：

  ::: code-tabs

  @tab 二次元

  ```url
  https://uapis.cn/api/v1/random/image?category=acg
  ```

  @tab 风景

  ```url
  https://uapis.cn/api/v1/random/image?category=landscape
  ```

  @tab 混合动漫

  ```url
  https://uapis.cn/api/v1/random/image?category=anime
  ```

  @tab 电脑壁纸

  ```url
  https://uapis.cn/api/v1/random/image?category=pc_wallpaper
  ```

  @tab 手机壁纸

  ```url
  https://uapis.cn/api/v1/random/image?category=mobile_wallpaper
  ```

  @tab 动漫图

  ```url
  https://uapis.cn/api/v1/random/image?category=general_anime
  ```

  @tab AI绘画

  ```url
  https://uapis.cn/api/v1/random/image?category=ai_drawing
  ```

  @tab 表情包/趣图

  ```url
  https://uapis.cn/api/v1/random/image?category=bq
  ```

  @tab 福瑞

  ```url
  https://uapis.cn/api/v1/random/image?category=furry
  ```

  :::

* [官方网站](https://uapis.cn/docs/api-reference/get-random-image)

::: details 预览（==多图预警==）
![二次元图片预览](https://uapis.cn/api/v1/random/image?category=acg)
![风景图片预览](https://uapis.cn/api/v1/random/image?category=landscape)
![混合动漫图片预览](https://uapis.cn/api/v1/random/image?category=anime)
![电脑壁纸图片预览](https://uapis.cn/api/v1/random/image?category=pc_wallpaper)
![手机壁纸图片预览](https://uapis.cn/api/v1/random/image?category=mobile_wallpaper)
![动漫图图片预览](https://uapis.cn/api/v1/random/image?category=general_anime)
![AI绘画图片预览](https://uapis.cn/api/v1/random/image?category=ai_drawing)
![表情包/趣图图片预览](https://uapis.cn/api/v1/random/image?category=bq)
![福瑞图片预览](https://uapis.cn/api/v1/random/image?category=furry)
:::

### 浮沉

* 请求方式: `GET`

* 返图方式: 直接返图

* 地址：
  ::: code-tabs

  @tab 二次元

  ```url
  https://api.fuchenboke.cn/api/dongman.php
  ```

  @tab 风景

  ```url
  https://api.fuchenboke.cn/api/fengjing.php
  ```

  :::

* [官方网站](https://api.fuchenboke.cn/)

::: details 预览
![二次元图片预览](https://api.fuchenboke.cn/api/dongman.php)
![风景图片预览](https://api.fuchenboke.cn/api/fengjing.php)
:::

### 小小

* 请求方式: `GET`

* 返图方式: 直接返图

* 请求参数:
  * `type`: 图片类型, 可选值:
    * `acg`
    * `wallpaper`
  * `return`: 返回格式, 可选值:
    * `json`
    * `302`

* 地址：
  ::: code-tabs
  @tab 二次元

  ```url
  https://v2.xxapi.cn/api/random4kPic?type=acg&return=302
  ```

  @tab 壁纸

  ```url
  https://v2.xxapi.cn/api/random4kPic?type=wallpaper&return=302
  ```

  :::

* [官方网站](https://xxapi.cn/doc/random4kPic)

::: details 预览
![二次元图片图片预览](https://v2.xxapi.cn/api/random4kPic?type=acg\&return=302)
![壁纸图片图片预览](https://v2.xxapi.cn/api/random4kPic?type=wallpaper\&return=302)

:::

## 资源征集

征集更多有效的图片api资源和配置, 您如果有图片api资源可以随时在这篇文章下方进行留言.

## 免责声明

本站所有图片api均来源于网络, 仅供参考和学习, 严禁用于任何商业盈利项目, 所有以盈利为目的而使用本站收集的图片api资源的行为均与作者无关，若侵权请在评论区留言，作者将及时删除。

---

---
url: /friends/index.md
description: That's the story of you and me.（排名不分先后）
---
# 友情链接
## 添加友链

### 本站信息

**名称**

```text
Esyka's Blog
```

**描述**

```text
海阔凭鱼跃，天高任鸟飞
```

**链接**

```url
https://www.esyka.top
```

**图标**

```url
https://www.esyka.top/images/logo.png
```

### 添加要求

\==**请先将本站加入你的友链列表**==

> \[!important]
> 条件: 本人自行判断&#x20;
> 建议:&#x20;
>
> 1. 网站没有违反中国大陆法律法规的内容 *(少量网络协议内容除外)*&#x20;
> 2. 至少有 3~5 篇原创文章&#x20;
> 3. **我有权随时删除友链, 个人保留所有解释权**

### 如何添加

::: steps

1. 准备好您的站点信息，包括以下内容
   * 名称
   * 描述
   * 图标
   * 链接
2. 在下方评论区（支持Markdown）按照以下格式留言：

````markdown
#### 申请友链

站点信息:
- 名称: xxx
- 描述: xxx
- 图标: xxx
- 链接: xxx

我站的友情链接页面：
```url
https://xxx
```

````

3. 等待我审核通过，如果不出意外的话，您将在==本页面==和==首页==看到您的站点

:::

---

---
url: /sponsor/index.md
---
# 请杯咖啡
::: tip 作者的小心思

鄙人正在持续运营、维护多个公益项目，若您愿意，鄙人也想喝杯咖啡续续命

:::

## 赞助记录