facebook twitter hatena line google mixi email

「Javascript/vue/vuepress」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(やり方)
(全文検索API)
行42: 行42:
  
 
==全文検索API==
 
==全文検索API==
 +
Algoliaが使える。
 +
 +
algoliaとはSaaSの全文検索エンジンサービスで広告を表示すれば無料で使える。
 +
 
Algolia DocSearch申請
 
Algolia DocSearch申請
 
  https://community.algolia.com/docsearch/#join-docsearch-program
 
  https://community.algolia.com/docsearch/#join-docsearch-program

2019年7月10日 (水) 12:28時点における版

vuepressとは

Markdownのドキュメントジェネレーター

サイトデザインなど変更

設定ファイル

.vuepress/config.js

カスタム変数用意

.vuepress/scripts/string.js

const string = {
    example: {
        mail: "hoge@example.com"
    }
}
export default {
    computed: {
        $string () {
            return string
        }
    }
}

.vuepress/enhanceApp.js

import strings from "./scripts/string"
export default ({
      Vue,
      options,
      router,
      siteData
}) => {
      Vue.mixin(strings);
}


example1.md

ver:{{$string.example.mail}}'

全文検索API

Algoliaが使える。

algoliaとはSaaSの全文検索エンジンサービスで広告を表示すれば無料で使える。

Algolia DocSearch申請

https://community.algolia.com/docsearch/#join-docsearch-program

こんな感じの結果が1日で来る

apiKey: 'bb637hogehogegehohogehogegehohogehogegehoge',
indexName: 'gehogehoge',
https://github.com/algolia/docsearch-configs/blob/master/configs/hogehoge.json


参考:https://kitigai.hatenablog.com/entry/2019/04/04/133432

やり方

.vuepress/config.js

module.exports = {
  themeConfig: {
    algolia: {
      apiKey: '<API_KEY>',
      indexName: '<INDEX_NAME>'
    }
  }
}
  1. 既にmodule.exports/themeConfig構成がある場合は、そこに混ぜないと、上書きしてしまうので注意。
  2. しばらくすると検索に全文検索結果が出てくるはず。

参考

https://qiita.com/dojineko/items/aae7e6d13479e08d49fd