|
|
| (同じ利用者による、間の9版が非表示) |
| 行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
| + | |
| − | | + | |
| − | ==="sh: vuepress: command not found"エラーが出るとき===
| + | |
| − | npm install -D vuepress
| + | |
| − | 上記を実行
| + | |
| − | | + | |
| − | ==サイトデザインなど変更==
| + | |
| − | 設定ファイル
| + | |
| − | | + | |
| − | docs/.vuepress/config.js
| + | |
| − | | + | |
| − | ==リンクの仕方==
| + | |
| − | - [タイトル1](setup/README.md)
| + | |
| − | | + | |
| − | ==画像追加==
| + | |
| − | imgタグで表示される
| + | |
| − | | + | |
| − | 
| + | |
| − | | + | |
| − | 画像ファイル配下へ置く。
| + | |
| − | | + | |
| − | 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
| + | |
| − | | + | |
| − | ===ディープリンクを追加する場合===
| + | |
| − | appの下にprivacyとhelpがある構成
| + | |
| − | sidebar: [
| + | |
| − | '/app',
| + | |
| − | {
| + | |
| − | title: 'App', // required
| + | |
| − | path: "/app",
| + | |
| − | sidebarDepth: 1, // optional, defaults to 1
| + | |
| − | children: [
| + | |
| − | '/privacy',
| + | |
| − | '/help',
| + | |
| − | ]
| + | |
| − | },
| + | |
| − | | + | |
| − | ===ディープリンクを追加する場合===
| + | |
| − | appの下にhogeがあり、その下にself_firstとself_firstがある構成
| + | |
| − | <pre>
| + | |
| − | sidebar: [
| + | |
| − | {
| + | |
| − | title: 'App', // required
| + | |
| − | path: "/app",
| + | |
| − | 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>
| + | |
| − | | + | |
| − | ==トップページ作成==
| + | |
| − | README.md
| + | |
| − | <pre>
| + | |
| − | ---
| + | |
| − | home: true
| + | |
| − | heroImage: /img/logo.png
| + | |
| − | actionText: About world
| + | |
| − | actionLink: /about/
| + | |
| − | features:
| + | |
| − | - title: title1
| + | |
| − | details: hogehoge. hogehoge. hogehoge.
| + | |
| − | - title: title2
| + | |
| − | details: hogehoge. hogehoge. hogehoge.
| + | |
| − | - title: title3
| + | |
| − | details: hogehoge. hogehoge. hogehoge.
| + | |
| − | footer: © hoge1.
| + | |
| − | ---
| + | |
| − | </pre>
| + | |
| − | 参考：https://www.nxworld.net/services-resource/hello-vuepress.html
| + | |
| − | | + | |
| − | ==全文検索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
| + | |
