10 KiB
Blowfish
BlowfishはHugoのために設計された強力で軽量なテーマです。Tailwind CSS を使用し、コンテンツを優先したクリーンでミニマルなデザインでが特徴です。
🌏 デモサイト
📑 ドキュメント
💎 グッズストア
🐛 バグレポート & issue
💡 質問 & 機能リクエスト
機能
- Tailwind CSS 3.0 で構築された、完璧なレスポンシブデザイン
- 複数の配色 (または、自分で完全にカスタマイズ可能)
- ダークモード (強制オン/オフ か 自動選択・ユーザー切り替え)
- 高度なカスタマイズが可能な設定
- Firebase 連携で動的データをサポート
- 閲覧数といいね機能
- 関連記事
- 複数のホームページレイアウト
- 複数人の著者
- シリーズ記事
- 日付と価値付けによる記事の並べ替え
- 記事を読むための Zen モード
- あらゆるコンテンツタイプ、分類、メニューに柔軟に対応
- ヘッダー/フッターメニュー
- 階層化されたメニューとサブナビゲーションメニュー
- スクロール可能な目次
- RTL 言語を含む多言語コンテンツのサポート
- サードパーティーウェブサイトの投稿へのリンク
- ギャラリー、タイムライン、GitHub カード、カルーセルなど、複数のショートコードに対応
- Buy Me a Coffee 連携
- Fuse.js を利用したクライアントサイドのサイト内検索
- Mermaid を使用したダイアグラムや視覚化
- Chart.js を使用したグラフ表示
- TypeIt 連携
- パフォーマンスを改善した YouTube 埋め込み
- KaTeX を使用した数式表現
- FontAwesome 6 の SVG アイコン
- Hugo Pipes を使用した画像の自動リサイズ
- アンカーリンク、目次、コードコピー、ボタン、バッジなど
- 記事内での HTML と絵文字のサポート 🎉
- ソーシャルメディアへの共有リンクを備えた SEO フレンドリーな設計
- Fathom Analytics と Google Analytics のサポート
- RSS フィード、ファビコン、コメント機能のサポート
- Tailwind の色定義とスタイルを使った高度なカスタマイズ
- Lighthouse で満点評価を獲得したパフォーマンスとアクセシビリティの最適化
- 充実したドキュメントと定期的なアップデート
ドキュメント
Blowfish には、テーマのあらゆる側面を網羅した詳細なドキュメントがあります。テーマの使い方や機能を詳しく知るために、必ずドキュメントを読んでください。
インストール
Blowfish は、git サブモジュール、Hugo モジュール、または完全な手動インストールなど、いくつかのインストール方法をサポートしています。
各方法の詳細な手順は、インストールドキュメントに記載されています。最も簡単なセットアップ方法については、ドキュメントを参照してください。以下にクイックスタートガイドを示します。git を使用している場合はサブモジュール、Hugo テーマのインストールに慣れている場合は Hugo モジュールを使用するのがおすすめです。
Blowfish Tools を使ったクイックスタート
注意: Node.js、Git、Go、Hugo がインストールされていること、そして先に進む前に新しい Hugo プロジェクトが作成されていることを確認してください。
Blowfish を使い始めるのに役立つ新しい CLI ツールをリリースしました。このツールは、新しい Hugo プロジェクトを作成し、テーマをインストールし、テーマ設定ファイルをセットアップします。まだベータ版なので、問題を見つけたら報告してください。
npm(または他のパッケージマネージャー)を使って CLI ツールをグローバルにインストールします:
npm i -g blowfish-tools
blowfish-tools
コマンドを実行すると、対話形式でプロジェクトの作成と設定をガイドするツールが起動します。
blowfish-tools
blowfish-tools new
コマンドを実行すると、新しい Hugo プロジェクトを作成し、テーマを一度にインストールすることもできます。詳細については、CLI のヘルプを参照してください。
blowfish-tools new mynewsite
gitサブモジュールを使ったクイックスタート
注意: Git、Go、Hugo がインストールされていること、そして先に進む前に新しい Hugo プロジェクトが作成されていることを確認してください。
-
プロジェクトディレクトリで、gitを初期化します。
git init
-
Blowfishをgitサブモジュールとして設定します。
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
-
ウェブサイトのルートフォルダで、Hugoによって生成された
config.toml
ファイルを削除します。テーマから*.toml
設定ファイルをコピーして、config/_default/
フォルダに保存します。これらのテーマ設定ファイルは、Hugoキャッシュディレクトリにあります。または、GitHubからコピーをダウンロードできます。
-
Getting Started の手順に従って、ウェブサイトを設定します。
Quick start using Hugo
Note: Ensure you have Go and Hugo installed, and that you have created a new Hugo project before proceeding.
-
From your project directory, initialise Hugo Modules:
hugo mod init github.com/<username>/<repo-name>
-
Create
config/_default/module.toml
and add the following:[[imports]] path = "github.com/nunocoracao/blowfish/v2"
-
Start your server using
hugo server
and the theme will be downloaded automatically. -
In the root folder of your website, delete the
hugo.toml
file that was generated by Hugo. Copy the*.toml
config files from the theme into yourconfig/_default/
folder.Note: Do not overwrite the
module.toml
file you created above!You will find these theme config files in the Hugo cache directory, or download a copy from GitHub.
-
Follow the Getting Started instructions to configure your website.
Installing theme updates
As new releases are posted, you can update the theme using Hugo. Simply run hugo mod get -u
from your project directory and the theme will automatically update to the latest release.
Detailed update instructions are available in the docs.
Contributing
Blowfish is expected to evolve over time. I intend to keep adding features and making changes as required.
Feel free to get in touch with any issues or suggestions for new features you'd like to see.
- 🐛 Bug reports & issues: Use GitHub Issues
- 💡 Ideas for new features: Open a discussion on GitHub Discussions
- 🙋♀️ General questions: Head to GitHub Discussions
If you're able to fix a bug or implement a new feature, I welcome PRs for this purpose. Learn more in the contributing guidelines.