VuePressテーマupdateメモ

# 概要

テーマのアップデートで気になっていたバグが解消されていたらしいのでその時の作業メモ。

ただの備忘録です。

# 経緯

ブログのUIで気になったところが直っているか、テーマ本家を確認
どうやら修正されていたらしいのでテーマをアップデートすることに
今までオーバーライドせずに手で修正していた部分がテーマアップデートで元に戻りそう
一応修正部分は控えてあったので、テーマ修正部分以外は差し替えて対応することにした

# 手順確認

現在の作業環境でいきなりテストするのは怖かったので、新規コンテナを立ち上げつつ、手順を確認することにした。

nodeイメージから新規コンテナを作成
作業ディレクトリを作成しつつ、themeのinit処理
正常にyarn devおよびyarn buildコマンドが叩けるか確認
git cloneを行い、変更モジュールを引っ張ってくる
細かい修正を行いデプロイ
確認後、今まで使用していたコンテナで動作確認

# コンテナ立ち上げから

以前書いた記事を参照。

VuePress環境構築メモ

以下コマンドでコンテナをrun。

$ docker run -it -v [local/path]:[container/path]:delegated -p 8080:8080 --workdir=[container/path] --name container_name node /bin/bash

以下コンテナ内コマンド。themeアップデートのためinitで新たにテスト用ディレクトリを生成。

# yarn global add @vuepress-reco/theme-cli
# theme-cli init test

# cd test
# yarn & npm install

1
2
3
4
5

以前のメモにはyarn installとのみ書いてあったのだけれど、どこかで変わったのでしょうか...

そして動作確認。

# yarn dev //localhostでのテストモード
# yarn build //本番用publicディレクトリの作成

1
2

ここまで確認できたら本番用の中身でyarn devしてみます。

# ここから追記

本番用のgitリポジトリをクローンし、theme部分を挿げ替え。

# git clone [vuepress管理リポジトリ]
# cd [vuepress管理リポジトリ]
# cp -rp [updateしたthemeディレクトリ内モジュール] .

1
2
3

今回、今まで/docs/.vuepress/だったものが、/.vuepress/と、トップレベルに移動されていました。

それに伴って今まであったファイルも後者の場所へ移動します。

わかりづらいので、トップディレクトリを/workspace/とします。

# pwd
  /workspace
# mv ./.vuepress ./.vuepress.bk //一応バックアップ
# cp -rp ./docs/.vuepress .

1
2
3
4

これで動作確認を行い、問題なければ微調整に進みます。

# 細かい修正

以前手で行った修正は以下の項目です。

theme内カラーの上書き
- .vuepress/styles/palette.styl　ファイル作成
ページジャンプ時のガイド・アラート言語変更
- node_modules/@vuepress-xxx/vuepress-plugin-pagation/bin/Pagation.vue
フッターのテーマリンクの削除
- node_modules/vuepress-theme-xxx/components/Footer.vue

# theme内カラーの上書き

以前記事に書いた内容を実施。

WordPress→VuePressにブログを移行【2】

ただし今回、ページタイトル部分、記事タイトル部分がテーマカラーと分離したようで、以前は水色だった記事タイトルがマウスを当てた時のみのアクセントカラーに変更になりました。

黒はあまり使いたくないので検討中...

# ページジャンプ時のガイド・アラート言語変更

記事一覧ページ下部に、指定ページへジャンプするボタンがあります。

前はJump toと書かれている箇所が中国語だったのですが、アップデートでlocale指定の言語に対応するよう修正されたようです。^[1]

しかし、存在しないページ番号を指定した時に表示されるポップアップ警告文が中国語のまま...なので手で修正します。

以下のファイルを修正します。（115行目付近）

修正前

    jumpPage: function (id) {
      const numId = parseInt(id)

      if (numId <= this.pages && numId > 0) {
        this.emit(numId)
        return
      }
      alert(`请输入大于0，并且小于${this.pages}的页码！`)
    },

1
2
3
4
5
6
7
8
9

修正後

    jumpPage: function (id) {
      const numId = parseInt(id)

      if (numId <= this.pages && numId > 0) {
        this.emit(numId)
        return
      }
      alert(`1から${this.pages}までの数値を入力してください。`)
    },

1
2
3
4
5
6
7
8
9

# フッターのテーマリンクの削除

これはどうにも気が引けますが、テーマのアイコンとリンクがFooterに貼ってあるので、修正しちゃいます。

以下のファイルを編集します。

node_modules/vuepress-theme-xxx/components/Footer.vue

修正前

<span>
  <i class="iconfont reco-theme"></i>
  <a target="blank" href="https://vuepress-theme-reco.recoluan.com">{{`vuepress-theme-reco@${version}`}}</a>
  </span>

1
2
3
4

修正後

<!-- オリジナル　テーマへのリンク -->
<!--<span>
    <i class="iconfont reco-theme"></i>
    <a target="blank" href="https://vuepress-theme-reco.recoluan.com">{{`vuepress-theme-reco@${version}`}}</a>
    </span> -->

1
2
3
4
5

.vueファイルはでコメントアウト。

# 備忘メモ

実は一点解消されていないバグ？があった。

画像タップでのズームには、このテーマはオフィシャルのmedium-zoomというプラグインを使用しているのだけれど、タップしてズームすると、たまに画像がすぐに元のサイズに戻されてしまう。

テーマの影響なのか本家の影響なのかはっきりしていないけど、themeの使用例で紹介されているサイトにアクセスしてみたところ、同様のバグを確認したので、とりあえず自分だけ、ではないらしい。

プラグインカスタマイズに倣ってdisableにしてみたものの、LocalHostでテストする限り無効になっていない。

themeが内部でインポートしている側を潰さないといけないのかな。

とりあえずそのままにしているので、画像はタッブしないで、記事画面ごとズームした方が良さそうです。

すみません、とほほ。

実は作者の方に、オーバーライドについてメールで問い合わせていたので、その後のアップデートで対応してくれたのかもしれません。（嬉） ↩︎

KENTOLAB

Choose mode