facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(画像追加)
 
(同じ利用者による、間の45版が非表示)
行1: 行1:
==vuepressとは==
+
[[javascript/vue/vuepress/基本]]
Markdownのドキュメントジェネレーター
+
  
==vuepressインストール==
+
[[javascript/vue/vuepress/全文検索API]]
<pre>
+
npm init
+
npm install -D vuepress
+
mkdir docs
+
</pre>
+
参考:https://qiita.com/kan_dai/items/d7384abd8f6b2ff8c6c6
+
  
==helloworld==
+
[[javascript/vue/vuepress/sitemap]]
echo "# Hello World" > docs/README.md
+
echo "# Hello hoge" > docs/hoge.md
+
localhost:8080/hoge でアクセス
+
  
==ビルド設定準備==
+
[[javascript/vue/vuepress/firebase公開]]
package.json を以下のように編集
+
<pre>
+
"scripts": {
+
    "test": "echo \"Error: no test specified\" && exit 1",
+
    "dev": "vuepress dev docs",
+
    "build": "vuepress build docs"
+
}
+
</pre>
+
  
==ビルド(開発用)==
+
[[javascript/vue/vuepress/GoogleAnalytics]]
$ npm run dev
+
ttp://localhost:8080/
+
  
==ビルド(リリース用)==
+
[[javascript/vue/vuepress/引越し]]
$ npm run build
+
 
+
==サイトデザインなど変更==
+
設定ファイル
+
 
+
docs/.vuepress/config.js
+
 
+
==リンクの仕方==
+
  - [タイトル1](setup/README.md)
+
 
+
==画像追加==
+
![image](../../images/hoge.png)
+
 
+
==サイドバー==
+
docs/.vuepress/config.js
+
<pre>
+
module.exports = {
+
    title: 'メモ',
+
    themeConfig: {
+
        sidebar: [
+
          '/',
+
          '/hoge',
+
    //      ['/page-b', 'Explicit link text'],
+
        ]
+
    }
+
}
+
</pre>
+
無いページが追加されてるとサイドバー全体が表示されなくなる。
+
 
+
参考:https://qiita.com/kan_dai/items/d7384abd8f6b2ff8c6c6
+
 
+
公式参考:https://vuepress.vuejs.org/theme/default-theme-config.html#sidebar
+
 
+
==ロゴ画像==
+
docs/.vuepress/config.js
+
<pre>
+
module.exports = {
+
    themeConfig: {
+
        logo: '/img/logo.png',
+
</pre>
+
 
+
docs/.vuepress/dist/img/logo.png
+
 
+
==カスタム変数用意==
+
.vuepress/scripts/string.js
+
<pre>
+
const string = {
+
    example: {
+
        mail: "hoge@example.com"
+
    }
+
}
+
export default {
+
    computed: {
+
        $string () {
+
            return string
+
        }
+
    }
+
}
+
</pre>
+
.vuepress/enhanceApp.js
+
<pre>
+
import strings from "./scripts/string"
+
export default ({
+
      Vue,
+
      options,
+
      router,
+
      siteData
+
}) => {
+
      Vue.mixin(strings);
+
}
+
</pre>
+
 
+
 
+
example1.md
+
<pre>
+
ver:{{$string.example.mail}}'
+
</pre>
+
 
+
==全文検索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
+
<pre>
+
module.exports = {
+
  themeConfig: {
+
    algolia: {
+
      apiKey: '<API_KEY>',
+
      indexName: '<INDEX_NAME>'
+
    }
+
  }
+
}
+
</pre>
+
#既に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
+
<pre>
+
{
+
  "hosting": {
+
    "public": "docs/.vuepress/dist",
+
    "ignore": [
+
      "firebase.json",
+
      "**/.*",
+
      "**/node_modules/**"
+
    ]
+
  }
+
}
+
</pre>
+
 
+
==参考==
+
https://qiita.com/dojineko/items/aae7e6d13479e08d49fd
+

2021年4月8日 (木) 18:13時点における最新版

javascript/vue/vuepress/基本

javascript/vue/vuepress/全文検索API

javascript/vue/vuepress/sitemap

javascript/vue/vuepress/firebase公開

javascript/vue/vuepress/GoogleAnalytics

javascript/vue/vuepress/引越し