facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(headにscript追加)
 
(同じ利用者による、間の4版が非表示)
行189: 行189:
 
参考:https://www.nxworld.net/services-resource/hello-vuepress.html
 
参考:https://www.nxworld.net/services-resource/hello-vuepress.html
  
==vuepressでsitemap.xml作成==
+
==headにscript追加==
$ npm install -D vuepress-plugin-sitemap
+
config.js
 
+
docs/.vuepress/config.js
+
 
<pre>
 
<pre>
module.exports = {
+
head: [
  plugins: [
+
     ['script',{}, `
     [
+
            console.log('helloworld');
      "sitemap",
+
    `],
      {
+
    ['script', { src: 'https://code.jquery.com/jquery-3.6.0.min.js' }]
        hostname: "https://hogehoge.example.com/",
+
]
        changefreq: "weekly"
+
      }
+
    ]
+
  ]
+
};
+
 
</pre>
 
</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
 
https://qiita.com/dojineko/items/aae7e6d13479e08d49fd

2021年4月8日 (木) 17:56時点における最新版

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タグで表示される

![image](../../img/hoge.png)

画像ファイル配下へ置く。

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

ディープリンクを追加する場合

appの下にprivacyとhelpがある構成

sidebar: [
      {
          title: 'アプリ',   // required
          path: "/app",
          sidebarDepth: 1,    // optional, defaults to 1
          children: [
              '/privacy',
              '/help',
          ]
      },

ディープリンクを追加する場合、その2

appの下にproject1があり、その下にprivacyとhelpがある構成

sidebar: [
  {
          title: 'アプリ',   // required
          path: "/app",
          sidebarDepth: 1,    // optional, defaults to 1
          children: [
              {
                  title: "プロジェクト1",
                  path:"/project1",
                  children: [
                      "/privacy",
                      "/help",
                  ]
              },
          ]
  },

グローバルナビ

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

headにscript追加

config.js

head: [
    ['script',{}, `
            console.log('helloworld');
    `],
    ['script', { src: 'https://code.jquery.com/jquery-3.6.0.min.js' }]
]

参考

https://qiita.com/dojineko/items/aae7e6d13479e08d49fd