valaxy/docs/pages/guide/third-party/index.md

title	title_zh	categories	end	top	aplayer
Third Party	第三方集成	third	false	99	true

搜索

Search

本地搜索（基于 fuse.js）

Local Search (Based on fuse.js)

::: zh-CN 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,
    },
  },
})

:::

::: en Valaxy has built-in local search based on fuse.js. The local cache should be generated in advance via valaxy fuse.

valaxy fuse generates fuse in the public directory by default. When executing valaxy build, valaxy fuse will be executed automatically. :::

使用

Setup

::: zh-CN

import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  search: {
    enable: true,
    // 设置类型为 Fuse
    type: 'fuse',
  },
})

• 在你的 package.json 中添加 fuse 生成脚本 :::

::: en

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

::: zh-CN Algolia 是一个在线第三方搜索服务，您需要自行申请相关 ID 和 Secret。

DocSearch 申请通常只接受技术文档。

Valaxy 提供了一个快速集成插件 valaxy-addon-algolia（目前仅支持 DocSearch）。 :::

::: en 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

::: zh-CN

基于 Aplayer 与 MetingJS 实现

譬如在文章中引入网易云某首歌曲（ID 为歌曲 ID）：

在文章头部添加： :::

::: en

Implementd based on Aplayer and MetingJS

For example, add a song from Netease Cloud in an article:

Enable it in the FrontMatter of the article: :::

---
aplayer: true
---

::: zh-CN 在文中引入： :::

::: en Add the component to the article: :::

<meting-js
 id="22736708"
 server="netease"
 type="song"
 theme="#C20C0C">
</meting-js>

::: zh-CN 效果如下： :::

::: en Here is a demo: :::

More info see Option | MetingJS

谷歌统计

Google Statistics

::: zh-CN

可参见 扩展 Client 上下文｜自定义扩展

你可以通过直接使用 Vue 插件的方式引入谷歌统计。

譬如：

• 安装依赖：pnpm add vue-gtag-next
• 新建 setup/main.ts:

import { defineAppSetup } from 'valaxy'
import { install as installGtag } from './gtag'

export default defineAppSetup((ctx) => {
  installGtag(ctx)
})

• 新建 setup/gtag.ts:

import type { UserModule } from 'valaxy'
import VueGtag, { trackRouter } from 'vue-gtag-next'

export const install: UserModule = ({ isClient, app, router }) => {
  if (isClient) {
    app.use(VueGtag, {
      property: { id: 'G-1LL0D86CY9' },
    })

    trackRouter(router)
  }
}

:::

::: en

Refer to Custom Extensions | Extending Client Context

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 type { UserModule } from 'valaxy'
import VueGtag, { trackRouter } from 'vue-gtag-next'

export const install: UserModule = ({ isClient, app, router }) => {
  if (isClient) {
    app.use(VueGtag, {
      property: { id: 'G-1LL0D86CY9' },
    })

    trackRouter(router)
  }
}

:::

More info see vue-gtag-next.