一言指的是一句话,可以是动漫中的台词,也可以是网络上的各种小段子。或是感动,或是开心,有或是单纯的回忆...
插件直接可以安装使用,通常不需要过多繁琐配置:
pnpm add valaxy-addon-hitokoto
import { defineValaxyConfig } from 'valaxy'
import { addonHitokoto } from 'valaxy-addon-hitokoto'
export default defineValaxyConfig({
addons: [
addonHitokoto(),
],
})
如果您想获取指定类型的句子,或者是特定长度的句子,可以参考以下配置示例:
import { defineValaxyConfig } from 'valaxy'
import { HitokotoType, addonHitokoto } from 'valaxy-addon-hitokoto'
export default defineValaxyConfig({
addons: [
addonHitokoto({
args: [HitokotoType.Animation, HitokotoType.Comic], // 句子类型
minLength: 0, // 最短句子长度
maxLength: 30 // 最长句子长度
}),
],
})
Tip
关于 HitokotoType
类别的更多信息,请参见 HitokotoType
以下是简洁快捷的使用例子:
<script setup lang="ts">
import { useAddonHitokoto } from 'valaxy-addon-hitokoto'
const { hitokoto } = useAddonHitokoto()
</script>
<template>
<span>一言: {{ hitokoto.hitokoto }}</span>
<span>来自: {{ hitokoto.from }}</span>
</template>
如果您想在网站上定时自动刷新获取一言句子,可以参考如下例子。每六秒调用 fetchHitokoto
实现刷新:
<script setup lang="ts">
import { useIntervalFn } from '@vueuse/core'
import { useAddonHitokoto } from 'valaxy-addon-hitokoto'
const { hitokoto, fetchHitokoto } = useAddonHitokoto()
useIntervalFn(() => {
fetchHitokoto()
}, 6000)
</script>
<template>
<span>一言: {{ hitokoto.hitokoto }}</span>
<span>来自: {{ hitokoto.from }}</span>
</template>
如果您希望在点击某个按钮时手动刷新 hitokoto 句子,可以参考如下例子:
<script setup lang="ts">
import { ref } from 'vue'
import { HitokotoType, useAddonHitokoto } from 'valaxy-addon-hitokoto'
const { hitokoto, fetchHitokoto } = useAddonHitokoto()
const isLoading = ref(false)
async function manualRefresh() {
isLoading.value = true
await fetchHitokoto()
isLoading.value = false
}
</script>
<template>
<span>一言: {{ hitokoto.hitokoto }}</span>
<span>来自: {{ hitokoto.from }}</span>
<button :disabled="isLoading" @click="manualRefresh">
{{ isLoading ? '刷新中...' : '手动刷新' }}
</button>
</template>
Important
为降低运算服务器的负载,hitokoto 国际站目前由于持续的流量、负载和攻击问题,启用了缓存机制,缓存时间为2秒。这意味着在同一地区、同一路线且使用相同参数的访问者在短时间内将获得相同的句子, 更多信息请参阅 一言开发者中心
如果您有多个页面,想在不同页面设置不同的配置,可以在 useAddonHitokoto
中传入您想要设置的配置:
<script setup lang="ts">
import { ref } from 'vue'
import { HitokotoType, useAddonHitokoto } from 'valaxy-addon-hitokoto'
const { hitokoto } = useAddonHitokoto({ args: [HitokotoType.Animation, HitokotoType.Comic] })
</script>
<template>
<span>一言: {{ hitokoto.hitokoto }}</span>
<span>来自: {{ hitokoto.from }}</span>
</template>
你也可以在 fetchHitokoto
函数中动态添加配置,以实现不同类型句子的切换:
<script setup lang="ts">
import { ref } from 'vue'
import { HitokotoType, useAddonHitokoto } from 'valaxy-addon-hitokoto'
const { hitokoto, fetchHitokoto } = useAddonHitokoto()
const isLoading = ref(false)
async function switchHitokotoType(newTypes: HitokotoType[]) {
isLoading.value = true
await fetchHitokoto({ args: newTypes })
isLoading.value = false
}
</script>
<template>
<span>Hitokoto: {{ hitokoto.hitokoto }}</span>
<span>From: {{ hitokoto.from }}</span>
<button :disabled="isLoading" @click="switchHitokotoType([HitokotoType.Game, HitokotoType.Literature])">
{{ isLoading ? '切换中...' : '切换到游戏或文学' }}
</button>
<button :disabled="isLoading" @click="switchHitokotoType([HitokotoType.Movie, HitokotoType.Poetry])">
{{ isLoading ? '切换中...' : '切换到影视或诗词' }}
</button>
</template>
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
api | string |
--- | 'intl' 为海外线路,默认为国际线路。填入其他为自定义 API, 返回 JSON 则为一言 API,数组类型取第一个元素,字符串类型直接取值 |
args | string |
HitokotoType[] |
获取指定句子类型, 类型详见 HitokotoType |
minLength | number |
0 |
API 获取的最短句子长度 |
maxLength | number |
30 |
API 获取的最长句子长度 |
Note
关于自定义 API,这里有一个示例:将 api
填入 https://el-bot-api.elpsy.cn/api/words/young
,由于返回值是一个数组,因此取其中的一个元素作为一句话
自行部署: https://developer.hitokoto.cn/sentence/deploy.html
语句库: https://github.com/hitokoto-osc/sentences-bundle
请求地址:
地址 | 协议 | 方法 | QPS 限制 | 线路 |
---|---|---|---|---|
v1.hitokoto.cn |
HTTPS | Any | 2 | 全球 |
international.v1.hitokoto.cn |
HTTPS | Any | 20(含缓存*) | 海外 |