Body & Hero Classes

Body & Hero Classes

photography journal

The Quark theme has the ability to allow pages to override some of the default options by letting the user set body_classes for any page. The theme will merge the combination of the defaults with any body_classes set. This allows you to easily add hero classes to give your blog post some bling.

Quarkテーマでは、ユーザーが任意のページでbody_classesを設定できるようにすることで、デフォルト設定の一部を上書きすることが可能です。テーマ側は、デフォルト設定と設定されたbody_classesを組み合わせて適用します。これにより、ヒーロー用クラスを簡単に追加して、ブログ記事に華やかさを加えることができます。[機械翻訳]

Body Classes ボディクラス

body_classes: "header-dark header-transparent"

On a particular page will ensure that page has those options enabled (assuming they are false by default).

特定のページでは、そのページでそれらのオプションが有効になっていることを確認します(デフォルトでは無効になっていると仮定します)。[機械翻訳]

Hero Options ヒーローオプション

The hero template allows some options to be set in the page frontmatter. This is used by the modular hero as well as the blog and item templates to provide a more dynamic header.

「hero」テンプレートでは、ページのフロントマターでいくつかのオプションを設定できます。これは、モジュール式の「hero」テンプレートだけでなく、ブログやアイテムのテンプレートでも使用され、より動的なヘッダーを実現します。[機械翻訳]

hero_classes: text-light title-h1h2 parallax overlay-dark-gradient hero-large
hero_image: road.jpg
hero_align: center

The hero_classes option allows a variety of hero classes to be set dynamically these include:

hero_classes オプションを使用すると、さまざまなヒーロークラスを動的に設定できます。これには以下が含まれます: [機械翻訳]

  • text-light | text-dark - Controls if the text should be light or dark depending on the content
  • title-h1h2 - Enforced a close matched h1/h2 title pairing
  • parallax - Enables a CSS-powered parallax effect
  • overlay-dark-gradient - Displays a transparent gradient which further darkens the underlying image
  • overlay-light-gradient - Displays a transparent gradient which further lightens the underlying image
  • overlay-dark - Displays a solid transparent overlay which further darkens the underlying image
  • overlay-light - Displays a solid transparent overlay which further darkens the underlying image
  • hero-fullscreen | hero-large | hero-medium | hero-small | hero-tiny - Size of the hero block

The hero_image should point to an image file in the current page folder.

  • text-light | text-dark - コンテンツに応じてテキストの色を明るい色にするか暗い色にするかを制御します
  • title-h1h2 - h1とh2の見出しを厳密にペアで設定します
  • parallax - CSSによるパララックス効果を有効にします
  • overlay-dark-gradient - 背景の画像をさらに暗く見せる透明なグラデーションを表示します
  • overlay-light-gradient - 背景の画像をさらに明るく見せる透明なグラデーションを表示します
  • overlay-dark - 背景の画像をさらに暗く見せる、不透明な透明オーバーレイを表示します
  • overlay-light - 背景の画像をさらに明るく見せる、不透明な透明オーバーレイを表示します
  • hero-fullscreen | hero-large | hero-medium | hero-small | hero-tiny - ヒーローブロックのサイズ

hero_image は、現在のページフォルダ内にある画像ファイルへのパスを指定する必要があります。[機械翻訳]

前の記事 次の記事