Javascript/vue/vuepress
目次
vuepressとは
Markdownのドキュメントジェネレーター
vuepressインストール
npm init npm install -D vuepress mkdir docs
参考：https://qiita.com/kan_dai/items/d7384abd8f6b2ff8c6c6
helloworld
echo "# Hello World" > docs/README.md echo "# Hello hoge" > docs/hoge.md
localhost:8080/hoge でアクセス
ビルド設定準備
package.json を以下のように編集
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
ビルド(開発用)
$ npm run dev
ttp://localhost:8080/
ビルド(リリース用)
$ npm run build
サイトデザインなど変更
設定ファイル
docs/.vuepress/config.js
リンクの仕方
- [タイトル1](setup/README.md)
サイドバー
docs/.vuepress/config.js
module.exports = {
title: 'メモ',
themeConfig: {
sidebar: [
'/',
'/hoge',
// ['/page-b', 'Explicit link text'],
]
}
}
無いページが追加されてるとサイドバー全体が表示されなくなる。
参考：https://qiita.com/kan_dai/items/d7384abd8f6b2ff8c6c6
公式参考：https://vuepress.vuejs.org/theme/default-theme-config.html#sidebar
カスタム変数用意
.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が使える。https://www.algolia.com/users/sign_in
algoliaとはSaaSの全文検索エンジンサービスで広告を表示すれば無料で使える。
自身のサイトがドキュメントサイトで、Algoliaコミュニティに登録すれば、無料で24時間毎にクロールしてくれる。
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
regionはeuropeに強制でなる模様。
参考：https://kitigai.hatenablog.com/entry/2019/04/04/133432
やり方
docs/.vuepress/config.js
module.exports = {
themeConfig: {
algolia: {
apiKey: '<API_KEY>',
indexName: '<INDEX_NAME>'
}
}
}
- 既にmodule.exports/themeConfig構成がある場合は、そこに混ぜないと、上書きしてしまうので注意。
- しばらくすると検索に全文検索結果が出てくるはず。
検索結果件数
algolia: {
apiKey: '<API_KEY>',
appId: '<API_ID>',
indexName: '<INDEX_NAME>',
algoliaOptions: {
hitsPerPage: 10,
},
}
hitsPerPageを10にすると10件に増える。(デフォは5件)
apiKeyはanalyticsのapikeyじゃなくて、初回メールきたapiKeyを使う。後日管理画面には記載されないっぽい。(管理画面にはanalyticsのapiKeyしかない）
参考：https://stackoverflow.com/questions/52019383/vuepress-algolia-increase-results
15日試用期間
- 最大5,000,000レコード - 最大2500万オペレーション - 無制限の同義語 - 最大10,000のクエリルール - 開発チームによるサポート
COMMUNITYプラン(無料版)の制約
1秒あたりのクエリ 30query/sec 1レコードの最大サイズ 10KB 最大レコード数 1万レコード 最大オペレーション数 10万オペレーション/month
https://qiita.com/mido_app/items/919839aaf33382d9bc89
algoliaで同一サイトでアカウントを別にしたいとき
旧アカウントに紐付いてたcacheを削除して、問い合わせして 新しいアカウント側でリンクを踏んで(https://www.algolia.com/users/sign_in)dosearchのcacheができてた。
firebaseでvuepressを公開
gcp/Firebase/Hosting [ｼｮｰﾄｶｯﾄ]
publicを"docs/.vuepress/dist"とする
vi firebase.json
{
"hosting": {
"public": "docs/.vuepress/dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
