思ったより簡単なことだが、コードコピーボタンを追加する。

4時間もかけて、この文を見て笑ったけど、まさかこんなに時間がかかるなんて。最後に見たら3時間だった。

二〇二二年最初の原稿、と言っても大したことのない内容で、タイトル通り(当時の私はまだ若かった)、作业をそのままコピーして保存し、ずいぶんと待った後、ようやく思い出しました。

移行時にプラグインが少なくて、コードのコピー&ペーストができず、多くのノートを印象ノートからブログに移行する際に、その操作が煩雑になり、ブログ更新のモチベーションを著しく損ねていました。

前章

まずは原著者の稿を丁寧に見て、一度通読してから紹介を見てみよう。清華大学の学部在学生で、早い段階からコンピュータに触れているとは、すごいな。まずこのブログを見てみるか。何をしていいのか全く思い出せない。ついでに、作者の__INLINE_CODE_0__仓库,这个修改后的__INLINE_CODE_1__テーマの方が今のよりずっと魅力的だし、新機能も多いから、やってみよう。まずは関連コードをマージしよう。

1 1

新機能:記事履歴の確認、関連提出記録の閲覧

なかなか良い効果だ、文の最後に持っていくと体験できる。

作業前に作者のオリジナルリポジトリの履歴をよく見ていなかった、単純なマージで済むだろうと思っていた。結局、大量のコードをマージしてしまい、途中何度もコンフリクトが発生し、無駄に上書きしてしまった。全てはフロントエンドとレンダリングのテンプレートコードで、自分の希望に合わせて変更した。

倉庫住所: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で見ています。
  • 目次バーは自動伸縮に対応しています。

正文

参考__INLINE_CODE_0__のコードを半時間以上見ていても、コピーボタンを追加する方法がよく分かりませんでした。

時が流れ、一月後、またこのことを思い出した。

この課題が理解できないので、別の課題を写し転がせば、なんとかなるだろう。検索結果は意外だった,hugoBOLD_2evenレンダリングされたコードブロックのスタイルが資料の説明と異なり、このあたりは少し面倒なので、簡単に記録しておく。

フロントエンド開発の基礎があまり分からないので、理解できない箇所はブラウザを開いて INLINE_CODE_0,对着代码分析、靠着右边的样式器信息,慢慢也分析懂了逻辑;__INLINE_CODE_1__を参考にし、コンソールでログを確認しました。分からないことはたくさんありますが、落ち着いて論理を整理・分解していけば、必ず道は開けます。

  1. ノードが複数ある場合、ここでいうのは単一のコードブロックを指し、テーマ自体が行番号を出力しているため、コピーボタンが2つ表示される。
  2. コードハイライトの自動レンダリングが欲しいのだが、テーマ設定に詳しくない。
  3. コードハイライトの制御設定。
  4. 設定ファイルを調整しても、なかなかうまくいかず、レンダリング結果が期待と異なっている。
  5. これらの設定を見つけたので、資料をさらに調べ、設定を調整します。まずは行番号を削除します。
  6. カスタムのcss样式表,配置自定义的jsスクリプトの設定
  7. 色々あったので、ふと最近見た配色図が良さそうだなと思い、ボタンのスタイルを修正してみることに。中国風の天青色でやってみる。

四時間かけてやったのに、この文を見て笑ってしまった。まさかこんなに時間がかかるなんて。最後に見たら三時間だった。

参照リンク

Licensed under CC BY-NC-SA 4.0
最終更新 2025年05月28日 09:47
金融ITプログラマーのいじくり回しと日常のつぶやき
Hugo で構築されています。
テーマ StackJimmy によって設計されています。