Third Party Integration

Local Search (Based on fuse.js) ​

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 ​

site.config.ts
ts
import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  search: {
    enable: true,
    // Set provider to 'fuse'
    provider: 'fuse',
  },
})
  • Add fuse generation script in your package.json
package.json
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 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 ​

Provided by the valaxy-addon-meting addon, based on APlayer and MetingJS.

Migrated to an addon

The legacy core aplayer: true frontmatter switch was removed in v1.0. The music player now lives in the valaxy-addon-meting addon — add it to your config to use it.

Install and enable the addon:

ts
// valaxy.config.ts
import { defineConfig } from 'valaxy'
import { addonMeting } from 'valaxy-addon-meting'

export default defineConfig({
  addons: [
    addonMeting({
      // set `global: true` for a fixed player shown on every page
      global: false,
    }),
  ],
})

Then drop a <meting-js> element anywhere in an article (e.g. a song from NetEase Cloud Music):

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

Tip: the aplayer: true frontmatter is still honored by the addon to toggle the global fixed player on a per-page basis. See the addon README for all options.

Here is a demo:

More info see Option | MetingJS

Google Statistics ​

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
ts
// setup/main.ts
import { defineAppSetup } from 'valaxy'
import { install as installGtag } from './gtag'

export default defineAppSetup((ctx) => {
  installGtag(ctx)
})
  • Create setup/gtag.ts
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.

To Be Continued.

Contributors