Javascript/vue/vuepress/基本 - 変更履歴

Admin: /* headにscript追加 */

2021-04-08T08:56:01Z

‎headにscript追加

Admin: /* トップページ作成 */

2021-04-08T08:55:01Z

‎トップページ作成

Admin: /* GoogleAnalytics */

2021-04-08T08:53:06Z

‎GoogleAnalytics

Admin: /* firebaseでvuepressを公開 */

2021-04-08T08:52:28Z

‎firebaseでvuepressを公開

Admin: /* vuepressでsitemap.xml作成 */

2021-04-08T08:51:40Z

‎vuepressでsitemap.xml作成

2021年4月8日 (木) 08:50にAdminによる

2021-04-08T08:50:47Z

Admin: ページの作成:「==vuepressとは== Markdownのドキュメントジェネレーター ==vuepressインストール==

 npm init npm install -D vuepress mkdir docs

参考：ht...」

2021-04-08T08:49:46Z

ページの作成:「==vuepressとは== Markdownのドキュメントジェネレーター ==vuepressインストール== <pre> npm init npm install -D vuepress mkdir docs </pre> 参考：ht...」

新規ページ

==vuepressとは==
Markdownのドキュメントジェネレーター

==vuepressインストール==
<pre>
npm init
npm install -D vuepress
mkdir docs
</pre>
参考：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 を以下のように編集
<pre>
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
</pre>

===ビルド(開発用)===
$ 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タグで表示される

![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

===ディープリンクを追加する場合===
appの下にprivacyとhelpがある構成
<pre>
sidebar: [
{
title: 'アプリ', // required
path: "/app",
sidebarDepth: 1, // optional, defaults to 1
children: [
'/privacy',
'/help',
]
},
</pre>

===ディープリンクを追加する場合、その２===
appの下にproject1があり、その下にprivacyとhelpがある構成
<pre>
sidebar: [
{
title: 'アプリ', // required
path: "/app",
sidebarDepth: 1, // optional, defaults to 1
children: [
{
title: "プロジェクト1",
path:"/project1",
children: [
"/privacy",
"/help",
]
},
]
},
</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

@@ 行196: / 行196: @@
              console.log('helloworld');
      `],
-     ['script', { src: 'https://code.jquery.com/jquery-3.4.1.min.js' }]
+     ['script', { src: 'https://code.jquery.com/jquery-3.6.0.min.js' }]
+]
 </pre>

@@ 行188: / 行188: @@
 </pre>
 参考：https://www.nxworld.net/services-resource/hello-vuepress.html
 ==参考==
 https://qiita.com/dojineko/items/aae7e6d13479e08d49fd