ヒューゴのテーマクイント
v1.1.0
Quint は、明瞭さと読みやすさを強調し、清潔で風通しの良い雰囲気を呼び起こすように設計されたミニマリストの Hugo テーマです。エレガントな組み込み画像バナーと軽量設計が特徴で、コンテンツのセンターステージの表示に最適です。
デモ サイト リポジトリを確認してください。これは、新しいサイトのスターター テンプレートとしても使用できます。 (くっそ...Netlify にワンクリックでデプロイするボタンがあります。)
ライブデモはこちらから。
ミニマリストデザイン: 気を散らす要素を最小限に抑え、コンテンツの読みやすさに重点を置いています。
ダーク モードとライト モード: 視聴者のブラウザ/デバイス設定を尊重する自動テーマ切り替え。
レスポンシブ レイアウト: モバイル デバイスとデスクトップ デバイスの両方で見栄えがよくなります。
付属の画像バナー: サイトの雰囲気を決める美しいミニマリストの画像バナーが同梱されています。それらを置き換えたり、いつでも独自のものを追加したりできます。
サイト検索: Lunr.js を使用した静的サイトの組み込み検索。
ソーシャル アイコン: フッター内のソーシャル メディアへの構成可能なリンク。
Quint を使い始めるには、マシンに Hugo がインストールされている必要があります。 Hugo のインストールの詳細については、Hugo の公式ドキュメントを参照してください。
Hugo を使用して新しいサイトを作成するためのステップバイステップ ガイドについては、「クイック スタート」を参照してください。
Hugo がインストールされたら、サイトのテーマ ディレクトリに Quint を追加します。サイトのルートから次を実行します。
git サブモジュール追加 https://github.com/victoriadrake/hugo-theme-quint.git Strategies/quint
Hugo サイトの構成ファイル ( hugo.toml 、 hugo.yaml 、またはhugo.jsonのいずれか) を開き、 quint使用するようにthemeパラメーターを更新します。
hugo.tomlの場合:テーマ＝「クイント」
hugo.yamlの場合:テーマ：「クイント」
Quint は箱から出してすぐに素晴らしい見た目になります。必要に応じて、設定値をyoursite/themes/quint/hugo.tomlからサイトの設定 ( yoursite/hugo.toml ) にコピーして、Quint をさらにカスタマイズします。
Hugo を実行してサイトを生成し、サーバーを起動します。サイトのルートから次を実行します。
ヒューゴサーバー
Web ブラウザでhttp://localhost:1313に移動し、Quint テーマで動作しているサイトを確認します。
Quint の最新バージョンをダウンロードするには、次のコマンドを実行します。
git サブモジュールの更新 --remote テーマ/quint
Quint は簡単にカスタマイズできるように設計されています。
Hugo 構成で名前を付けることで、独自のカスタム CSS ファイルを簡単に追加できます。
[params]css = ["css/custom.css"] # カスタム CSS オーバーライド。yoursite/static/ に保存されます。
プロジェクト ディレクトリ内の同じ名前のファイルを使用して、任意のレイアウトをオーバーライドできます。たとえば、ファイルyoursite/layouts/partials/contact.htmlはyoursite/themes/quint/layouts/partials/contact.htmlをオーバーライドします。
yoursite/themes/quint/layouts/index.htmlファイルをオーバーライドして、ホーム ページのセクションを追加または削除します。このファイルのコピーをプロジェクト ディレクトリ ( yoursite/layouts/index.html ) に作成し、必要なpartialを削除または追加するだけです。
ページまたは投稿の前付でimageが指定されていない場合、Quint はディレクトリthemes/quint/static/imagesからランダムな画像を選択して、美しい画像バナーを表示します。
これは、画像ファイル名に対応する 1 ～ 10 の乱数を選択することによって実現されます。このコレクションに追加したり、任意の画像を置き換えたりできます。持っている画像の数に合わせて最大乱数を更新するだけです。
[params]numImages = 12 # バナー用に選択するランダムな画像の数 (themes/quint/static/images 内)
Quint への貢献は大歓迎です!テーマの機能やドキュメントを改善するために、GitHub 上で問題やプル リクエストを自由に送信してください。
始めるためのアイデアが必要ですか?追加してほしい機能の簡単なリストは次のとおりです。
コードブロックのコピーボタン
Hugo の Chroma 構文ハイライト
パイプライン化、フィンガープリンティング、バンドル化、縮小化を備えた Hugo のアセット ジェネレーター
多言語サポート
ブレッドクラムナビゲーション
このテーマは MIT ライセンスに基づいてリリースされています。詳細については、LICENSE ファイルを参照してください。
Quint は優れたオープンソース フォントを使用しています。
deviceframes.com から作成されたデバイスのモックアップ。
