Kustomisasi Tema

Variabel CSS, mode gelap, tema anak, kait PHP, dan menambahkan Mermaid.

Di halaman ini

Sistem token

Seluruh tampilan dikendalikan oleh variabel CSS di assets/css/tokens.css. Ubah satu variabel, dan seluruh antarmuka ikut menyesuaikan.

CSS

:root {
    --gd-accent: #2563eb;        /* warna aksen (juga ada di Customizer) */
    --gd-font-sans: "Google Sans", "Google Sans Flex", system-ui, sans-serif;
    --gd-font-mono: "Google Sans Code", ui-monospace, monospace;
    --gd-content-max: 760px;     /* lebar kolom baca */
    --gd-sidebar-w: 288px;       /* lebar navigasi kiri */
    --gd-toc-w: 232px;           /* lebar daftar isi kanan */
    --gd-radius-lg: 12px;        /* sudut membulat */
}

Token warna tersedia dalam dua set: terang pada :root dan gelap pada :root[data-theme="dark"].

CSS

:root[data-theme="dark"] {
    --gd-bg: #0e1117;
    --gd-text: #e3e6ec;
    --gd-border: #232a37;
}

Mode gelap disimpan di localStorage pengunjung dan diterapkan oleh skrip kecil di <head> sebelum halaman digambar, sehingga tidak ada kedipan putih. Pengunjung yang belum memilih akan mengikuti preferensi sistemnya.

Tema anak

Cara teraman untuk menyesuaikan tanpa kehilangan perubahan saat tema diperbarui.

Buat folder

Teks

wp-content/themes/gitdocs-anak/
├── style.css
└── functions.php

Isi style.css

CSS

/*
Theme Name: GitDocs Anak
Template: aithordev-wiki
Version: 1.0.0
*/

:root {
    --gd-accent: #0ea5e9;
    --gd-content-max: 820px;
}

Muat gaya induk

PHP

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style( 'gitdocs-child', get_stylesheet_uri(), array( 'gitdocs-content' ), '1.0.0' );
} );

Mengganti bagian tampilan

Salin berkas dari template-parts/ ke tema anak dengan nama sama, lalu ubah sesuai kebutuhan:

Berkas	Bagian yang diatur
`site-header.php`	Bilah atas
`sidebar-tree.php`	Navigasi kiri
`toc.php`	Daftar isi kanan
`doc-page.php`	Susunan artikel
`prev-next-nav.php`	Navigasi Sebelumnya/Selanjutnya
`feedback.php`	Widget masukan
`space-landing.php`	Beranda space (kartu)

Menambahkan Mermaid

Diagram Mermaid aktif begitu berkasnya tersedia di tema — tidak ada permintaan ke CDN:

Bash

mkdir -p wp-content/themes/aithordev-wiki/assets/vendor/mermaid
curl -o wp-content/themes/aithordev-wiki/assets/vendor/mermaid/mermaid.min.js \
  https://unduhan-anda/mermaid.min.js

Setelah berkas ada, blok ```mermaid otomatis dirender sebagai diagram, dan pustakanya hanya dimuat pada halaman yang benar-benar memuat diagram.

Mermaid berukuran beberapa megabita. Karena itu ia tidak disertakan secara bawaan — tema tetap ringan bagi situs yang tidak memerlukannya.

Kait PHP yang berguna

PHP

<?php
// Menambah bahasa Prism khusus pada label blok kode.
add_filter( 'gitdocs_code_language_label', function ( $label, $id ) {
    return 'blade' === $id ? 'Blade' : $label;
}, 10, 2 );

// Mengecualikan sebuah space dari indeks pencarian publik.
add_filter( 'gitdocs_search_index_records', function ( array $records ) {
    return array_values( array_filter( $records, fn( $record ) => 'internal' !== $record['s'] ) );
} );

Semua kelas berada di namespace GitDocs dan dimuat otomatis dari inc/. Lapisan data (tipe konten, REST, renderer) sengaja dipisah dari tampilan agar mudah dipindahkan ke plugin bila kelak dibutuhkan.

Mencetak

Gaya cetak bawaan menyembunyikan navigasi, daftar isi, dan widget masukan, lalu melebarkan kolom teks — jadi pembaca bisa menekan Ctrl + P untuk mendapatkan PDF yang bersih.