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 ​

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:

md
---
aplayer: true
---

Add the component to the article:

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

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