Third Party
搜索
Search
本地搜索（基于 fuse.js）
Local Search (Based on fuse.js)
Valaxy 内置了基于 fuse.js 的离线搜索（须预先通过 valaxy fuse 构建生成本地缓存）。
valaxy fuse默认将fuse生成在public目录下，并在.gitignore中添加public/valaxy-fuse-list.json忽略。 在执行valaxy build之前，会自动执行valaxy fuse。
如果你想要使用全文搜索，可参考 Options | fuse.js 进行设置。 譬如：
export default defineSiteConfig({
search: {
enable: true,
type: 'fuse',
},
fuse: {
options: {
keys: ['title', 'tags', 'categories', 'excerpt', 'content'],
/**
* @default 0.6
* @see https://www.fusejs.io/api/options.html#threshold
* 设置匹配阈值，越低越精确
*/
// threshold: 0.6,
/**
* @default false
* @see https://www.fusejs.io/api/options.html#ignoreLocation
* 忽略位置
* 这对于搜索文档全文内容有用，若无需全文搜索，则无需设置此项
*/
ignoreLocation: true,
},
},
})Valaxy has built-in local search based on fuse.js. The local cache should be generated in advance via valaxy fuse.
valaxy fusegeneratesfusein thepublicdirectory by default. When executingvalaxy build,valaxy fusewill be executed automatically.
使用
Setup
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
search: {
enable: true,
// 设置类型为 Fuse
type: 'fuse',
},
})- 在你的
package.json中添加 fuse 生成脚本
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
search: {
enable: true,
// Set type to 'fuse'
type: 'fuse',
},
})- Add fuse generation script in your
package.json
{
"name": "yun-demo",
"valaxy": {
"theme": "yun"
},
"scripts": {
"build": "npm run build:ssg",
"build:ssg": "valaxy build --ssg",
"fuse": "valaxy fuse",
"rss": "valaxy rss"
},
"dependencies": {
"valaxy": "latest",
"valaxy-theme-yun": "latest"
}
}Algolia 搜索
Algolia DocSearch
Algolia 是一个在线第三方搜索服务，您需要自行申请相关 ID 和 Secret。
DocSearch 申请通常只接受技术文档。
Valaxy 提供了一个快速集成插件 valaxy-addon-algolia（目前仅支持 DocSearch）。
Algolia is an online third-party search service. You need to apply for the ID and Secret by yourself.
DocSearch Only technical document applications are accepted generally.
Valaxy provides a quick integration plug-in: valaxy-addon-algolia (Currently only DocSearch is supported).
音乐播放器
Music Player
For example, add a song from Netease Cloud in a article:
Enable it in the FrontMatter of the article:
---
aplayer: true
---在文中引入：
Add the component to the article:
<meting-js
id="22736708"
server="netease"
type="song"
theme="#C20C0C">
</meting-js>效果如下：
Here is a demo:
More info see Option | MetingJS
谷歌统计
Google Statistics
你可以通过直接使用 Vue 插件的方式引入谷歌统计。
譬如：
- 安装依赖：
pnpm add vue-gtag-next - 新建
setup/main.ts:
// setup/main.ts
import { defineAppSetup } from 'valaxy'
import { install as installGtag } from './gtag'
export default defineAppSetup((ctx) => {
installGtag(ctx)
})- 新建
setup/gtag.ts:
import VueGtag, { trackRouter } from 'vue-gtag-next'
import type { UserModule } from 'valaxy'
export const install: UserModule = ({ isClient, app, router }) => {
if (isClient) {
app.use(VueGtag, {
property: { id: 'G-1LL0D86CY9' },
})
trackRouter(router)
}
}You can add Google Statistics by using Vue plug-in directly.
For example:
- Install the dependency:
pnpm add vue-gtag-next - Create
setup/main.ts
// setup/main.ts
import { defineAppSetup } from 'valaxy'
import { install as installGtag } from './gtag'
export default defineAppSetup((ctx) => {
installGtag(ctx)
})- Create
setup/gtag.ts
import VueGtag, { trackRouter } from 'vue-gtag-next'
import type { UserModule } from 'valaxy'
export const install: UserModule = ({ isClient, app, router }) => {
if (isClient) {
app.use(VueGtag, {
property: { id: 'G-1LL0D86CY9' },
})
trackRouter(router)
}
}More info see vue-gtag-next.
To Be Continued.