Unduh copenhagen_theme - unduh kode sumber copenhagen

kopenhagen_tema

Kode sumber lainnya

v4.2.3

Unduh

Tema Kopenhagen oleh Zendesk

Tema Kopenhagen adalah tema default Panduan Zendesk. Ini dirancang agar responsif dan mudah diakses. Pelajari lebih lanjut tentang menyesuaikan Panduan Zendesk di sini.

Tema Kopenhagen untuk Pusat Bantuan terdiri dari:

File manifes
Kumpulan templat
File stylesheet dan JavaScript
Folder aset.

Cara menggunakan

Ini adalah versi terbaru tema Kopenhagen yang tersedia untuk Panduan. Anda dapat menggunakan repositori ini sebagai titik awal untuk membuat tema kustom Anda sendiri. Anda dapat membagi repositori ini sesuai keinginan Anda. Anda dapat menggunakan IDE favorit Anda untuk mengembangkan tema dan melihat pratinjau perubahan Anda secara lokal di browser web menggunakan ZCLI. Untuk detailnya, baca dokumentasi tema zcli.

Menyesuaikan tema Anda

Setelah Anda melakukan fork pada repositori ini, Anda bebas mengedit template, CSS, JavaScript, dan mengelola aset.

File manifes

Manifes memungkinkan Anda menentukan sekelompok pengaturan untuk tema Anda yang kemudian dapat diubah melalui UI di Theming Center. Anda dapat membaca lebih lanjut tentang file manifes di sini.

Folder pengaturan

Jika Anda memiliki variabel bertipe file , Anda perlu menyediakan file default untuk variabel tersebut di folder /settings . File ini akan digunakan pada panel pengaturan secara default dan pengguna dapat mengunggah file lain jika mereka mau. Mantan. Jika Anda ingin memiliki variabel untuk gambar latar belakang suatu bagian, variabel dalam file manifes Anda akan terlihat seperti ini:

 {
  ...
  "settings" : [ {
    "label" : "Images" ,
    "variables" : [ {
      "identifier" : "background_image" ,
      "type" : "file" ,
      "description" : "Background image for X section" ,
      "label" : "Background image" ,
    } ]
  } ]
}

Dan ini akan mencari file di dalam folder pengaturan bernama: background_image

Menambahkan aset

Anda dapat menambahkan aset ke folder aset dan menggunakannya dalam CSS, JavaScript, dan templat Anda. Anda dapat membaca lebih lanjut tentang aset di sini

Publikasikan tema Anda

Setelah Anda menyesuaikan tema, Anda dapat mengunduh repositori sebagai file zip dan mengimpornya ke Theming Center.

Anda dapat mengikuti dokumentasi untuk mengimpor di sini.

Anda juga dapat mengimpor langsung dari GitHub - pelajari lebih lanjut di sini.

Templat

Tema ini mencakup semua templat yang digunakan untuk Pusat Bantuan yang memiliki semua fitur yang tersedia. Daftar template dalam tema:

Halaman artikel
Halaman kategori
Halaman daftar postingan komunitas
Halaman postingan komunitas
Halaman daftar topik komunitas
Halaman topik komunitas
Halaman kontribusi
Kepala dokumen
Halaman kesalahan
catatan kaki
Tajuk
Halaman beranda
Halaman postingan komunitas baru
Halaman permintaan baru
Halaman permintaan
Halaman hasil pencarian
Halaman bagian
halaman langganan
Halaman profil pengguna

Anda dapat menambahkan hingga 10 templat opsional untuk:

Halaman artikel
Halaman kategori
Halaman bagian

Caranya dengan membuat file di bawah folder templates/article_pages , templates/category_pages atau templates/section_pages . Pelajari lebih lanjut di sini.

Lembar Gaya dan JavaScript

Kami menggunakan Rollup untuk mengkompilasi file JS dan CSS yang digunakan dalam tema - style.css dan script.js . Jangan mengeditnya secara langsung karena akan dibuat ulang saat rilis.

Untuk memulai:

$ yarn install
$ yarn start

Ini akan mengkompilasi semua kode sumber dalam src dan styles dan memperhatikan perubahannya. Ini juga akan memulai preview .

Catatan:

Kami sengaja tidak menggunakan babel saat mengkompilasi script.js sehingga kami bisa mendapatkan keluaran bundel yang bersih. Pastikan untuk hanya menggunakan fitur ecmascript yang didukung secara luas (ES2015).
Jangan mengedit style.css , script.js dan file di dalam folder assets secara langsung. Mereka diregenerasi selama rilis.
Pratinjau memerlukan login jadi pastikan untuk menjalankan yarn zcli login -i terlebih dahulu jika Anda belum pernah melakukannya.

Aktiva

Tema Kopenhagen hadir dengan beberapa aset JavaScript, namun Anda dapat menambahkan aset lain ke tema Anda dengan menempatkannya di folder assets .

Bereaksi komponen

Mulai versi 4.0.0, tema Kopenhagen menggunakan beberapa komponen React untuk merender bagian UI. Komponen ini terletak di folder src/modules dan dibuat menggunakan pustaka komponen Zendesk Garden.

Komponen-komponen ini digabungkan sebagai modul JavaScript asli sebagai bagian dari proses pembuatan Rollup, dan dikeluarkan sebagai file JS di folder assets . Karena aset diganti namanya ketika tema dipasang, modul perlu diimpor menggunakan pembantu aset.

Untuk mempermudah proses impor modul, kami menambahkan plugin Rollup yang menghasilkan peta impor yang memetakan nama modul ke URL aset. Peta impor ini kemudian dimasukkan ke dalam templat document_head.hbs selama pembuatan.

Misalnya, jika Anda mendefinisikan modul bernama my-module di folder src/modules/my-module , Anda dapat menambahkannya ke file rollup.config.mjs seperti ini:

 export default defineConfig ( [
  // ...
  // Configuration for bundling modules in the src/modules directory
  {
    // ...
    input : {
      "my-module" : "src/modules/my-module/index.js" ,
    } ,
    // ...
  }
] ) ;

Rollup akan menghasilkan file bernama my-module-bundle.js di folder assets dan peta impor ini akan ditambahkan ke template document_head.hbs :

{ "imports": { "my-module": "{{asset 'my-module-bundle.js'}}", } } ">

 < script type =" importmap " >
{
  "imports" : {
    "my-module" : "{{asset 'my-module-bundle.js'}}" ,
  }
}
 script >

Anda kemudian dapat mengimpor modul ke templat Anda seperti ini:

import { something } from "my-module"; // ... ">

 < script type = " module " >
  import { something } from " my-module " ;

  // ...
script >

Internasionalisasi

I18n diimplementasikan dalam komponen React menggunakan perpustakaan react-i18next. Kami menggunakan file JSON datar dan kami menggunakan . sebagai pemisah bentuk jamak, yang berbeda dari default _ dan dikonfigurasi selama inisialisasi.

Kami juga menambahkan beberapa alat untuk dapat mengintegrasikan perpustakaan dengan sistem terjemahan internal yang digunakan di Zendesk. Jika Anda membuat tema khusus dan ingin menyediakan terjemahan Anda sendiri, Anda dapat merujuk ke dokumentasi perpustakaan untuk mengatur pemuatan terjemahan Anda.

Integrasi dengan sistem terjemahan Zendesk

Menambahkan string terjemahan

String terjemahan ditambahkan langsung ke kode sumber, biasanya menggunakan kait useTranslation , meneruskan kunci dan nilai default bahasa Inggris:

}">

 import { useTranslation } from 'react-i18next' ;

function MyComponent ( ) {
  const { t } = useTranslation ( ) ;

  return < div > { t ( "my-key" , "My default value" ) } < / div>
}

Memberikan nilai bahasa Inggris default dalam kode memungkinkan untuk menggunakannya sebagai nilai cadangan ketika string belum diterjemahkan dan untuk mengekstrak string dari kode sumber ke file YAML terjemahan.

jamak

Saat menggunakan bentuk jamak, kami perlu memberikan nilai default untuk nilai zero , one , dan other , seperti yang diminta oleh sistem terjemahan kami. Hal ini dapat dilakukan dengan meneruskan nilai default pada opsi fungsi t .

 t ( "my-key" , {
  "defaultValue.zero" : "{{count}} items" ,
  "defaultValue.one" : "{{count}} item" ,
  "defaultValue.other" : "{{count}} items" ,
  count : ...
} )

Ekstraksi string

Skrip bin/extract-strings.mjs dapat digunakan untuk mengekstrak string terjemahan dari kode sumber dan memasukkannya ke dalam file YAML yang diambil oleh sistem terjemahan internal kami. Penggunaan skrip didokumentasikan dalam skrip itu sendiri.

Skrip membungkus alat i18next-parser dan mengonversi outputnya ke format YAML yang digunakan secara internal. Dimungkinkan untuk menggunakan pendekatan serupa dalam tema khusus, baik menggunakan keluaran i18next-parser standar sebagai sumber terjemahan atau menerapkan transformator khusus.

Memperbarui file terjemahan

Gunakan bin/update-modules-translations.mjs untuk mengunduh terjemahan terbaru untuk semua modul. Semua file kemudian dibundel oleh proses pembangunan dalam satu file [MODULE]-translations-bundle.js .

Saat pertama kali terjemahan ditambahkan ke modul, Anda perlu menambahkan pemetaan antara folder modul dan nama paket pada sistem terjemahan ke variabel MODULE dalam skrip. Misalnya, jika sebuah modul terletak di src/modules/my-module dan nama paketnya adalah cph-theme-my-module , Anda perlu menambahkan:

 const MODULES = {
  ... ,
  "my-module" : "cph-theme-my-module"
}

Pengujian aksesibilitas

Kami menggunakan skrip node khusus yang menjalankan lighthouse untuk pengujian aksesibilitas otomatis.

Ada dua cara menjalankan skrip:

Mode pengembangan - menjalankan audit aksesibilitas pada pratinjau tema lokal, pada akun tertentu. Ini membutuhkan zcli themes:preview untuk dapat berjalan;
Mode CI - menjalankan audit aksesibilitas pada tema aktif akun tertentu.

Tergantung pada cakupan pengujian, beberapa pengujian manual mungkin diperlukan selain pengujian di atas. Alat seperti DevTools, pembaca layar misalnya VoiceOver, pemeriksa kontras, dll. dapat membantu pengujian tersebut.

Modus pengembangan

Untuk menjalankan audit aksesibilitas saat mengubah tema:

Mulai kompilasi dan pratinjau perubahan seperti biasa:

$ yarn install
$ yarn start

Buat file .a11yrc.json di folder root (lihat contoh);
1. Tentukan akun/subdomain untuk melihat pratinjau tema dan pastikan cocok dengan profil zcli yang aktif
2. Isi username dan password dengan kredensial pengguna admin;
3. Tentukan urls mana yang akan diuji (jika dibiarkan kosong, skrip akan menguji semua url);
Di konsol terpisah, jalankan audit aksesibilitas dalam mode pengembangan:

 yarn test-a11y -d

Audit A11y kemudian akan dijalankan pada pratinjau yang dimulai pada langkah 1 .

Modus CI

Untuk menjalankan audit aksesibilitas pada tema aktif akun tertentu, seseorang harus:

Instal modul simpul:

 yarn install

Tetapkan end_user_email , end_user_password , subdomain dan urls sebagai variabel lingkungan dan jalankan audit aksesibilitas dalam mode CI yaitu:

.zendesk.com/hc/en-us/
    https://.zendesk.com/hc/en-us/requests/new
    https://.zendesk.com/hc/en-us/requests" 
yarn test-a11y"> end_user_email= 
end_user_password= 
subdomain= 
urls="
    https://.zendesk.com/hc/en-us/
    https://.zendesk.com/hc/en-us/requests/new
    https://.zendesk.com/hc/en-us/requests" 
yarn test-a11y 

Abaikan daftar

Jika ada masalah aksesibilitas umum yang harus diabaikan atau tidak dapat segera diperbaiki, seseorang dapat menambahkan entri baru ke daftar abaikan di objek konfigurasi skrip. Ini akan mengubah masalah aksesibilitas menjadi peringatan, bukan kesalahan.

Entrinya harus mencakup:

identitas audit;
path sebagai string pola url;
selector sebagai string.

Misalnya:

a.skip-navigation", }, ], aria-allowed-attr: [ { path: "/hc/:locale/profiles/:id", selector: "body > div.profile-info" } ] }, },">

  custom: {
    ignore: {
      tabindex: [
        {
          path : "*" ,
          selector : "body > a.skip-navigation" ,
        } ,
      ] ,
      aria - allowed - attr : [
        {
          path : "/hc/:locale/profiles/:id" ,
          selector : "body > div.profile-info"
        }
      ]
    } ,
  } ,

Dalam contoh ini, kesalahan untuk tabindex audit dengan body > a.skip-navigation akan dilaporkan sebagai peringatan di semua halaman ( * ). Hal yang sama akan terjadi untuk audit aria-allowed-attr dengan body > div.profile-info , tetapi hanya untuk halaman profil pengguna /hc/:locale/profiles/:id .

Harap diingat bahwa ini hanya boleh digunakan jika benar-benar diperlukan. Aksesibilitas harus menjadi fokus dan prioritas ketika melakukan perubahan pada tema.

Berkontribusi

Permintaan penarikan diterima di GitHub di https://github.com/zendesk/copenhagen_theme. Harap sebutkan @zendesk/vikings saat membuat permintaan tarik.

Kami menggunakan komitmen konvensional untuk meningkatkan keterbacaan riwayat proyek dan mengotomatiskan proses rilis. Oleh karena itu, pesan komit harus mengikuti format berikut:

 [optional scope]: 

[optional body]

[optional footer(s)]

type: menjelaskan kategori perubahan. Lihat jenis yang didukung.
cakupan: (opsional) menjelaskan apa saja yang terkena dampak perubahan
subjek: deskripsi kecil tentang perubahan
body: (opsional) informasi kontekstual tambahan tentang perubahan
footer: (opsional) menambahkan tautan eksternal, referensi masalah, dan informasi meta lainnya

yaitu:

 chore: automate release
fix(styles): fix button padding
feat(script): add auto focus to fields with errors

Kami menggunakan husky dan commitlint untuk memvalidasi pesan saat melakukan.

Kami menggunakan tindakan Github bersama dengan semantic-release untuk merilis versi baru tema setelah PR digabungkan. Pada setiap penggabungan, semantic-release menganalisis pesan penerapan dan menyimpulkan peningkatan versi semantik. Kemudian membuat tag git, memperbarui versi manifes, dan menghasilkan log perubahan yang sesuai.

Jenis komit

Daftar di bawah menjelaskan jenis penerapan yang didukung dan pengaruhnya dalam rilis dan log perubahan.

Jenis	Keterangan	Melepaskan	log perubahan
membangun	Perubahan yang memengaruhi sistem build atau ketergantungan eksternal	-	-
pekerjaan rumah	Perubahan lain yang tidak mengubah kode sumber	-	-
ci	Perubahan pada file dan skrip konfigurasi CI kami	-	-
dokumen	Hanya dokumentasi yang berubah	-	-
prestasi	Sebuah fitur baru	kecil	Fitur
memperbaiki	Perbaikan bug	tambalan	Perbaikan Bug
kinerja	Perubahan kode yang meningkatkan kinerja	tambalan	Peningkatan Kinerja
refaktorisasi	Perubahan kode yang tidak memperbaiki bug atau menambahkan fitur	-	-
kembali	Mengembalikan komit sebelumnya	tambalan	Kembali
gaya	Perubahan yang tidak mempengaruhi arti kode (spasi putih, format, titik koma hilang, dll)	-	-
tes	Menambahkan tes yang hilang atau memperbaiki tes yang ada	-	-

Perubahan yang merusak

Komit yang menambahkan perubahan yang dapat menyebabkan gangguan harus menyertakan BREAKING CHANGE di badan atau footer pesan komit.