「ouuan」を4時間も調べて、その時この文章を見ていると、まだ面白がっていて、どうしてこんなに時間がかかったのか不思議だった。最後に時間を調べると3時間だった。
これは2022年の年初に書いた最初の記事で、扱うべきことは単純なもので、タイトル通り完全に同じ内容(当時としてはまだ若かった私)だと考えて、作业をそのままコピーしてブックマークに入れて、しばらく放置していました。ようやくこの件を思い出したのです。
hugo
に移行する際、プラグインが少なすぎて、コードをコピーできず、多くのメモを印象派からブログに移行する際に、コードをコピーする作業が煩雑になり、私の水面下ブログのモチベーションを著しく低下させてしまいました。
序章
まず、原作者の稿をじっくりと見直し、通読し、作者紹介も確認します。うわー、すごい大佬だ!清華大学で学んでいる学部生で、昔からコンピュータに触れているんだ。なるほど、クールなやつだ。まずはこのブログを確認し、自分が何をすべきか全く覚えていない。ついでに作者のGitHubリポジトリをチェックする。この修正された「even」テーマは今のよりずっと見栄えが良く、新しい機能もたくさんある。早速取り掛かり、関連コードをマージしよう。
新機能:記事の履歴表示、関連提出記録の確認
効果はなかなか良く、記事末尾にスクロールすることで体験できます。
マージ前に作者の元のリポジトリの履歴を確認していなかったので、簡単なマージで済むと思っていましたが、最終的に大量のコードをマージし、その中に衝突やN回の巻き戻しが発生し、無脑覆盖(強制上書き)を行いました。それはすべてフロントエンドとレンダリングのテンプレートコードであり、私が使用するものに合わせました。
リポジトリ:https://github.com/TianlongXiang/hugo-theme-even
中国語の罠です。git
でこのパラメータを調整しないと、生成される履歴リンクが現在の記事のcommit hash
を取得できず、履歴リンクの生成に失敗します。完全な記事履歴を生成する際も、自動統合スクリプトを修正する必要があります。必ず現在のリポジトリ全体の履歴をプルしてください。
name: Build Github
run: git config --global core.quotePath false && hugo -b "https://www.xiangtianlong.com/" -d "github_public" && ls
スタイル調整
- サイトコンテンツの幅を調整します。以前のデザインはモバイルとPCの両方に対応していましたが、実際にスマートフォンでの閲覧はほとんどなく、私はPCで確認しています。
- 目次バーを自動伸縮するように変更します。
本文
ouuan
のコード記録を参考に半時間以上見てみても、コピーボタンの追加方法がよく分からなかった。
時光穿梭,一月之后,又想到这事
正文
今回この課題が理解できなかったため、別の課題をコピーし、必ずしも理解できるものにしました。検索で見つけた結果は、意外にもhugo
公式フォーラムにコードのコピーボタンを追加する方法についての投稿がありました。そこを拝見すると、論理が明確でわかりました。混乱していた状況でしたが、戻ってサイトを見るとeven
レンダリング生成したコードブロックのスタイルと資料の説明が異なり、この部分は少し複雑です。簡単に記録しておきます。
基本的にはフロントエンド開発は理解していないため、わからない箇所はブラウザの「要素を検査」ツールを使ってコードを分析し、右側のスタイル情報に頼って徐々に論理を理解していきました。「JavaScript」についてはコンソールでログを出力しました。最初は多くのことがわからず、落ち着いて、少しずつ論理を整理・分割していき、必ずや解決策が見つかります。
<pre>
ノードが複数存在し、ここでは個々のコードブロックを指します。テーマが自動的に行番号を表示しており、その結果コピーボタンが2つ表示される- テーマの組み込みされたコードハイライト機能を無効化したいのですが、このテーマの設定はよくわかりません。
hugo
公式ドキュメントで資料を参照し、半ば理解しながら、コードハイライトを制御できる「markup」設定があることを知りました。- 設定ファイルを調整してもなかなかうまくいかず、レンダリング結果と期待値が異なっていた
- このような設定の「pygmentsOptions」を発見し、さらに資料を調べて設定を調整しました。まず行番号を削除する
- カスタムCSSスタイルシートとカスタムJavaScriptスクリプトを設定しました。
- 結局これだけの作業をしたので、この文を見つけたときには、なぜこんなに時間がかかったのか笑ってしまいました。実際には3時間でした。最後に時間をを見ると:3時間。