Hugo Dark Theme Site Generator https://after-dark.habd.as
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

skin-styles.id.md 4.9KB

+++ title = “Skin Styles” description = “Pilih satu dari delapan skin style yang dapat disesuaikan.” categories = [“customizing”] tags = [“color”, “style”, “branding”] feature = [“code highlighter”, “snippets”, “related content”] alias = [ “/feature/display-variants/” ] copyright owner = “Josh Habdas” date = “2019” license = “agpl-3.0-or-later” +++

After Dark menggunakan {{< external href=“https://hackcss.egoist.moe” text=“hackcss” />}} untuk menyediakan empat palet warna dan dua mode tampilan. Beralih diantara mereka dari {{< external href=“https://gohugo.io/getting-started/configuration/” text=“site configuration” />}} anda untuk 8 kemungkinan kombinasi:

<tr>
  <th rowspan="2">Palette</th>
  <th colspan="2">Mode</th>
</tr>
<tr>
  <th>Hack</th>
  <th>Standard</th>
</tr>

<tr>
  <td>Dark</td>
  <td><i>None required.</i></td>
  <td class="highlight">
    <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>

mode = "standard"

  </td>
</tr>
<tr>
  <td style="background-color:#181818;color:#ccc">Dark Grey</td>
  <td class="highlight">
    <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>

palette = "dark-grey"

  </td>
  <td class="highlight">
    <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>

mode = "standard" palette = "dark-grey"

  </td>
</tr>
<tr>
  <td style="background-color:#073642;color:#78909c">Solarized Dark</td>
  <td class="highlight">
    <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>

palette = "solarized-dark"

  </td>
  <td class="highlight">
    <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>

mode = "standard" palette = "solarized-dark"

  </td>
</tr>
<tr>
  <td style="background-color:#fff;color:#000">Light</td>
  <td class="highlight">
    <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>

palette = "light"

  </td>
  <td class="highlight">
    <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>

mode = "standard" palette = "light"

  </td>
</tr>

Skin default menggunakan palet warnadark dengan mode tampilan hack. Tidak diperlukan konfigurasi untuk menggunakan skin default.

Pilih skin style dari konfigurasi situs anda. Sebagai contoh , untuk mengatur warna abu-abu gelap tanpa gaya perawatan markdown perbarui konfigurasi anda seperti:

{{< hackcss-card header=“config.toml” >}} {{< highlight toml “linenos=inline” >}} baseurl = “https://letterboxd.com/” languageCode = “en-US” title = “A Scanner Darkly”

[params] description = “Seorang polisi yang menyamar di masa depan yang tidak terlalu jauh terlibat dengan narkoba baru yang berbahaya dan sebagai akibatnya dia mulai kehilangan identitasnya.” images = [“https://a.ltrbxd.com/resized/sm/upload/e3/kt/un/fi/nZuqo9yQpEo447sH0w0MFBgdT6J-1200-1200-675-675-crop-000000.jpg”]

[params.hackcss] mode = “standard” palette = “dark-grey” {{< /highlight >}} {{< /hackcss-card >}}

Nonaktifkan skin styles dengan mengatur benderadisabled:

[params.hackcss]
  disabled = true # disable skin styles entirely

Saat mengganti warna, tinjau Custom Styles, Trim Color dan Error Page, buat penyesuaian yang diperlukan untuk mencapai tampilan dan rasa yang diinginkan.