Tutorial Membuat Tema AitiCMS Lite

AitiCMS Lite mendukung sistem tema frontend berbentuk paket ZIP. Tema digunakan untuk mengubah tampilan website seperti layout halaman, desain UI, CSS, JavaScript, dan gambar.

Sistem tema di AitiCMS Lite dirancang agar aman dan ringan. Oleh karena itu tema hanya boleh berisi file frontend seperti HTML, CSS, JS, dan gambar.

Tema tidak boleh berisi file PHP atau file executable lain yang dapat dijalankan oleh server.

Apa yang Bisa Diubah oleh Tema?

Dengan tema, Anda bisa mengubah tampilan website seperti:

Layout halaman homepage
Tampilan halaman artikel
Tampilan halaman statis
Menambahkan CSS dan JavaScript
Menambahkan gambar, logo, dan asset visual

Tema tidak digunakan untuk:

Autentikasi user
Logika bisnis aplikasi
Migrasi database
Upload file PHP

Aturan Paket Tema

Paket tema harus berbentuk file .zip dan mengikuti aturan berikut:

File harus ZIP valid
Maksimal ukuran upload 10 MB
Maksimal 200 file di dalam ZIP
Maksimal ukuran ekstraksi 25 MB
Harus memiliki file manifest.json
Slug tema hanya boleh berisi a-z, 0-9, -, dan _

Ekstensi file yang diizinkan:

css
js
png
jpg
jpeg
gif
webp
svg
ico
html
txt
md

Struktur Tema

Contoh struktur tema yang direkomendasikan:


my-theme.zip
├─ manifest.json
├─ README.md
├─ assets/
│  ├─ css/
│  │  └─ theme.css
│  ├─ js/
│  │  └─ theme.js
│  ├─ img/
│  │  └─ hero.webp
│  └─ screenshot.webp
└─ templates/
   ├─ home.html
   ├─ article.html
   ├─ page.html
   └─ tag.html

Membuat File manifest.json

File manifest.json adalah identitas tema. Minimal harus berisi slug, nama, dan versi tema.

Contoh manifest sederhana


{
  "slug": "my-theme",
  "name": "My Theme",
  "version": "1.0.0",
  "description": "Tema frontend untuk AitiCMS Lite",
  "screenshot": "assets/screenshot.webp"
}

Contoh manifest lengkap


{
  "slug": "my-theme",
  "name": "My Theme",
  "version": "1.0.0",
  "description": "Tema modern untuk AitiCMS Lite",
  "screenshot": "assets/screenshot.webp",
  "assets": {
    "css": [
      "assets/css/theme.css"
    ],
    "js": [
      "assets/js/theme.js"
    ]
  },
  "templates": {
    "home": "templates/home.html",
    "article": "templates/article.html",
    "page": "templates/page.html",
    "tag": "templates/tag.html"
  }
}

Membuat Template HTML

Template tema menggunakan file .html.

Contoh template home.html:


<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Beranda</title>
</head>

<body>

{header}

<main class="container">

<section class="hero">
<h1>Selamat datang di website kami</h1>
<p>Tema custom untuk AitiCMS Lite.</p>
</section>

<section class="latest-post">
{sort_article limit=5}
</section>

</main>

{footer}

</body>
</html>

Directive yang bisa digunakan:

{header}
{footer}
{article}
{sort_article limit=5}

Menambahkan CSS

Simpan file CSS di folder assets/css.


body {
font-family: Arial, sans-serif;
background: #f7f8fa;
color: #222;
}

.hero {
padding: 40px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

Menambahkan JavaScript

Simpan file JS di folder assets/js.


document.addEventListener("DOMContentLoaded", function(){

console.log("Theme aktif");

});

Cara Upload dan Install Tema

Login ke panel admin AitiCMS
Buka menu Tema
Pilih Upload Tema ZIP
Pilih file tema
Klik upload
Setelah berhasil, klik Aktifkan Tema

Lokasi Tema Setelah Install

Setelah berhasil diinstall, tema akan tersimpan di:


storage/themes/{slug}

Contoh:


storage/themes/my-theme

Error yang Sering Terjadi

manifest.json tidak ditemukan

Pastikan file manifest.json berada di root ZIP.

Slug tema sudah ada

Ganti nilai slug pada manifest.json.

Tema ditolak sistem

Pastikan ZIP tidak berisi file berikut:

.php
.env
.htaccess
composer.json
package.json

Contoh Tema Minimum


simple-theme.zip
├─ manifest.json
├─ assets/
│  ├─ screenshot.webp
│  └─ theme.css
└─ templates/
   └─ home.html


{
"slug": "simple-theme",
"name": "Simple Theme",
"version": "1.0.0",
"description": "Tema sederhana untuk AitiCMS Lite",
"screenshot": "assets/screenshot.webp",
"assets": {
"css": [
"assets/theme.css"
]
},
"templates": {
"home": "templates/home.html"
}
}

Kesimpulan

Sistem tema AitiCMS Lite memungkinkan developer membuat tampilan website custom dengan mudah tanpa menyentuh core CMS.

Dengan struktur tema yang sederhana dan aman, developer hanya perlu fokus pada HTML, CSS, JavaScript, dan asset visual untuk membuat tampilan website yang menarik.