Miksin's note site
Study notes focused on coding
Miksin's note site
Study notes focused on coding
この記事では、ウェブサイトのSEOとアクセシビリティを向上させるために、効果的なrobots.txt
ファイルの設定方法と、テキストのないボタンにaria-label
属性を追加する方法を紹介します。
この記事では、WSL環境でVite、Svelte、Tailwind CSS、およびdaisyUIを使用してプロジェクトをセットアップし、VSCode開発環境を構成する方法を紹介します。関連する拡張機能のインストールやPrettierフォーマッターの設定も含まれます。
この記事では、VitePressで国際化サポートを設定し、サイドバーを自動生成する方法を紹介します。まず、多言語フォルダとファイルを設定し、次に config.mts
で言語オプションを設定します。次に、vitepress-sidebar
プラグインをインストールして設定し、CSSを修正してサブアイテムのインデントを実現します。
この記事では、VitePressでGoogleフォントを使用する方法を紹介します。フォントの選択、埋め込みコードの取得、VitePressのheadとCSSを設定して、言語設定に基づいて異なる主要フォントを設定する方法を含みます。
この記事では、CloudFlare R2をブログ画像ホスティングサービスとして使用する方法を紹介します。画像をWebP形式に変換する手順、バケットの作成、カスタムドメインの設定、rcloneを使用した画像のアップロード、関連ツールのインストールおよび設定ガイドを含みます。
この記事では、VitePressでGiscusコメントシステムを有効にして設定する方法を紹介します。手順には、GitHubでDiscussions機能を有効にすること、giscus GitHub Appをインストールすること、giscus.appで設定を行うこと、Giscus Vueコンポーネントをインストールすること、GiscusComment.vueコンポーネントを設定すること、そして自動インターフェース言語切り替えを実現するためにVitePressテーマに追加することが含まれます。
この記事では、VitePressの開発プロセス中に遭遇した2つの主な問題とその解決策を紹介します。まず、VSCodeがインストールされたvueパッケージを見つけられなかった問題は、npmに切り替えることで解決しました。次に、README.md
に多数のTypeScriptエラーメッセージが表示される問題は、tsconfig.json
のinclude
範囲を調整することで解決しました。
この記事では、Windows 11環境でWSL2を使用してDockerをインストールし、開発用にVSCodeでDev Containersを設定し、VitePressプロジェクトを生成および設定し、最終的にプロジェクトをCloudFlare Pagesにデプロイする方法を説明します。