「Javascript/vue/vuepress」の版間の差分
(→画像追加) |
|||
| 行15: | 行15: | ||
localhost:8080/hoge でアクセス | localhost:8080/hoge でアクセス | ||
| − | == | + | ==ビルドについて== |
| + | ===設定準備=== | ||
package.json を以下のように編集 | package.json を以下のように編集 | ||
<pre> | <pre> | ||
| 行25: | 行26: | ||
</pre> | </pre> | ||
| − | ==ビルド(開発用)== | + | ==ビルド(開発用)=== |
$ npm run dev | $ npm run dev | ||
ttp://localhost:8080/ | ttp://localhost:8080/ | ||
| − | ==ビルド(リリース用)== | + | ===ビルド(リリース用)=== |
$ npm run build | $ npm run build | ||
| + | |||
| + | ==="sh: vuepress: command not found"エラーが出るとき | ||
| + | npm install -D vuepress | ||
| + | 上記を実行 | ||
==サイトデザインなど変更== | ==サイトデザインなど変更== | ||
2021年3月1日 (月) 21:45時点における版
目次
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
==="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
module.exports = {
title: 'メモ',
themeConfig: {
sidebar: [
'/',
'/hoge',
// ['/hoge', 'ほげほげです'], // タイトルを付けたい場合
]
}
}
無いページが追加されてるとサイドバー全体が表示されなくなる。
参考：https://qiita.com/kan_dai/items/d7384abd8f6b2ff8c6c6
公式参考：https://vuepress.vuejs.org/theme/default-theme-config.html#sidebar
ディープリンクを追加する場合
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",
]
},
]
},
グローバルナビ
themeConfigのnavの下に追加
docs/.vuepress/config.js
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" },
],
ロゴ画像
docs/.vuepress/config.js
module.exports = {
themeConfig: {
logo: '/img/logo.png',
themeConfigの下にlogoを入れる
docs/.vuepress/public/img/logo.png
カスタム変数用意
.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}}'
トップページ作成
README.md
---
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.
---
参考：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
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ができてた。
vuepressでsitemap.xml作成
$ npm install -D vuepress-plugin-sitemap
docs/.vuepress/config.js
module.exports = {
plugins: [
[
"sitemap",
{
hostname: "https://hogehoge.example.com/",
changefreq: "weekly"
}
]
]
};
参考：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
User-agent: * Sitemap: https://hogehoge.example.com/sitemap.xml
sitemap.xmlビルド
$ npm run build
docs/.vuepress/dist/sitemap.xml にファイルができてることを確認
GoogleAnalytics
$ yarn add -D @vuepress/plugin-google-analytics
docs/.vuepress/config.js
module.exports = {
plugins: [
['@vuepress/google-analytics', {
ga: 'UA-123hoge-hoge'
}]
]
}
参考：https://vuepress.vuejs.org/plugin/official/plugin-google-analytics.html#install
firebaseでvuepressを公開
gcp/Firebase/Hosting [ｼｮｰﾄｶｯﾄ]
publicを"docs/.vuepress/dist"とする
vi firebase.json
{
"hosting": {
"public": "docs/.vuepress/dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
以下のようにして公開できる
$ npm run build $ firebase deploy
もしくは
vi package.json
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"predeploy": "npm install && vuepress build docs",
"deploy": "firebase deploy",
"postdeploy": "./postdeploy.sh"
},
上記記述してから
$ npm run deploy
postdeploy.sh はdeploy後に実行したい通知などあればここに記述するなければpostdeployは削除で良い。
