|
|
(同じ利用者による、間の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
| + | |