facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(サイドバー)
 
(同じ利用者による、間の21版が非表示)
行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](../../img/hoge.png)
+
 
+
画像ファイル配下へ置く。
+
 
+
docs/.vuepress/public/img/hoge.png
+
 
+
==サイドバー==
+
docs/.vuepress/config.js
+
<pre>
+
module.exports = {
+
    title: 'メモ',
+
    themeConfig: {
+
        sidebar: [
+
          '/',
+
          '/hoge',
+
//      ['/hoge', 'ほげほげです'], // タイトルを付けたい場合
+
        ]
+
    }
+
}
+
</pre>
+
無いページが追加されてるとサイドバー全体が表示されなくなる。
+
 
+
参考:https://qiita.com/kan_dai/items/d7384abd8f6b2ff8c6c6
+
 
+
公式参考:https://vuepress.vuejs.org/theme/default-theme-config.html#sidebar
+
 
+
===ディープリンクを追加する場合===
+
<pre>
+
    sidebar: [
+
      '/hogehoge',
+
  {
+
          title: 'Android',  // required
+
          path: "/self_first",
+
          sidebarDepth: 1,    // optional, defaults to 1
+
          children: [
+
              {
+
                  title: "hoge",
+
                  path:"/self_first",
+
                  children: [
+
                      "/self_first",
+
                      "/self_first",
+
                  ]
+
              },
+
          ]
+
  },
+
</pre>
+
 
+
==グローバルナビ==
+
themeConfigのnavの下に追加
+
 
+
docs/.vuepress/config.js
+
<pre>
+
module.exports = {
+
  themeConfig: {
+
    nav: [
+
        { text: 'GooglePlay', link: `https://play.google.com/store/apps/details?id=com.example.project` },
+
        { text: 'AppStore', link: `https://itunes.apple.com/jp/app//id14547sample?mt=8` },
+
    ],
+
</pre>
+
 
+
==ロゴ画像==
+
docs/.vuepress/config.js
+
<pre>
+
module.exports = {
+
    themeConfig: {
+
        logo: '/img/logo.png',
+
</pre>
+
themeConfigの下にlogoを入れる
+
 
+
docs/.vuepress/public/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ができてた。
+
 
+
==vuepressでsitemap.xml作成==
+
$ npm install -D vuepress-plugin-sitemap
+
 
+
docs/.vuepress/config.js
+
<pre>
+
module.exports = {
+
  plugins: [
+
    [
+
      "sitemap",
+
      {
+
        hostname: "https://hogehoge.example.com/",
+
        changefreq: "weekly"
+
      }
+
    ]
+
  ]
+
};
+
</pre>
+
 
+
参考:https://hene.dev/blog/2019/05/02/sitemap/#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83
+
 
+
docs/.vuepress/public/robots.txt
+
<pre>
+
User-agent: *
+
Sitemap: https://hogehoge.example.com/sitemap.xml
+
</pre>
+
 
+
===sitemap.xmlビルド===
+
$ npm run build
+
docs/.vuepress/dist/sitemap.xml にファイルができてることを確認
+
 
+
==GoogleAnalytics==
+
$ yarn add -D @vuepress/plugin-google-analytics
+
 
+
docs/.vuepress/config.js
+
<pre>
+
module.exports = {
+
  plugins: [
+
    ['@vuepress/google-analytics', {
+
      ga: 'UA-123hoge-hoge'
+
    }]
+
]
+
}
+
</pre>
+
参考:https://vuepress.vuejs.org/plugin/official/plugin-google-analytics.html#install
+
 
+
==firebaseでvuepressを公開==
+
[[gcp/Firebase/Hosting]] [ショートカット]
+
 
+
publicを"docs/.vuepress/dist"とする
+
 
+
vi firebase.json
+
<pre>
+
{
+
  "hosting": {
+
    "public": "docs/.vuepress/dist",
+
    "ignore": [
+
      "firebase.json",
+
      "**/.*",
+
      "**/node_modules/**"
+
    ]
+
  }
+
}
+
</pre>
+
 
+
以下のようにして公開できる
+
$ npm run build
+
$ firebase deploy
+
 
+
もしくは
+
 
+
vi package.json
+
<pre>
+
{
+
  "scripts": {
+
    "dev": "vuepress dev docs",
+
    "build": "vuepress build docs",
+
    "predeploy": "npm install && vuepress build docs",
+
    "deploy": "firebase deploy",
+
    "postdeploy": "./postdeploy.sh"
+
  },
+
</pre>
+
上記記述してから
+
$ npm run deploy
+
 
+
postdeploy.sh はdeploy後に実行したい通知などあればここに記述するなければpostdeployは削除で良い。
+
 
+
==参考==
+
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/引越し