Grav - ข้อมูลเบื้องต้นเกี่ยวกับธีม
ธีมควบคุมรูปลักษณ์ของไซต์ Grav ของคุณ ธีมส์ใน Grav ถูกสร้างขึ้นด้วยพลังเครื่องยนต์ทวิ Templating
หน้าเนื้อหาและเทมเพลต Twig
เพจที่คุณสร้างอ้างอิงไฟล์เทมเพลตเฉพาะตามชื่อหรือโดยการตั้งค่าตัวแปรส่วนหัวเทมเพลตสำหรับเพจ แนะนำให้ใช้ชื่อเพจเพื่อการดูแลรักษาที่ง่ายกว่า
หลังจากติดตั้งแพ็คเกจ Grav Base แล้วคุณจะพบไฟล์ defauld.mdไฟล์ในโฟลเดอร์ user / pages / 01.home ชื่อของไฟล์กล่าวคือdefault บอก Grav ว่าควรแสดงหน้านี้ด้วยเทมเพลต twig default.html.twig วางไว้ด้านใน themes/<mytheme>/templates โฟลเดอร์
ตัวอย่างเช่นหากคุณมีไฟล์ชื่อ contact.mdมันจะแสดงผลด้วยเทมเพลต twig เป็น themes/<mytheme>/templates/contact.html.twig.
องค์กรธีม
ในส่วนต่อไปนี้เราจะพูดคุยเกี่ยวกับการจัดระเบียบธีมเช่นนิยามการกำหนดค่าและอื่น ๆ
ความหมายและการกำหนดค่า
ข้อมูลเกี่ยวกับธีมจะถูกกำหนดไว้ใน user/themes/antimatter/blueprints.yamlข้อกำหนดไฟล์และฟอร์มที่จะใช้ในพาเนลการดูแลระบบมีให้ทางเลือก คุณจะเห็นเนื้อหาต่อไปนี้ในuser/themes/antimatter/blueprints.yaml ไฟล์สำหรับ Antimatter theme.
name: Antimatter
version: 1.6.0
description: "Antimatter is the default theme included with **Grav**"
icon: empire
author:
name: Team Grav
email: [email protected]
url: http://getgrav.org
homepage: https://github.com/getgrav/grav-theme-antimatter
demo: http://demo.getgrav.org/blog-skeleton
keywords: antimatter, theme, core, modern, fast, responsive, html5, css3
bugs: https://github.com/getgrav/grav-theme-antimatter/issues
license: MIT
form:
validation: loose
fields:
dropdown.enabled:
type: toggle
label: Dropdown in navbar
highlight: 1
default: 1
options:
1: Enabled
0: Disabled
validate:
type: bool
ในการใช้ตัวเลือกการกำหนดค่าธีมคุณต้องระบุการตั้งค่าเริ่มต้นในไฟล์ที่เรียกว่า user/themes/<mytheme>/<mytheme>.yaml.
Example
enable: true
กิจกรรมธีมและปลั๊กอิน
ความสามารถของธีมในการโต้ตอบกับ Grav ผ่านสถาปัตยกรรมปลั๊กอินเป็นอีกคุณสมบัติที่มีประสิทธิภาพของ Grav เพื่อให้บรรลุสิ่งนี้เพียงแค่สร้างuser/themes/<mytheme>/<mytheme>.php (ตัวอย่างเช่น, antimatter.php สำหรับธีม Antimatter เริ่มต้น) และใช้รูปแบบต่อไปนี้
<?php
namespace Grav\Theme;
use Grav\Common\Theme;
class MyTheme extends Theme {
public static function getSubscribedEvents() {
return [
'onThemeInitialized' => ['onThemeInitialized', 0]
];
}
public function onThemeInitialized() {
if ($this->isAdmin()) {
$this->active = false;
return;
}
$this->enable([
'onTwigSiteVariables' => ['onTwigSiteVariables', 0]
]);
}
public function onTwigSiteVariables() {
$this->grav['assets']
->addCss('plugin://css/mytheme-core.css')
->addCss('plugin://css/mytheme-custom.css');
$this->grav['assets']
->add('jquery', 101)
->addJs('theme://js/jquery.myscript.min.js');
}
}
เทมเพลต
โครงสร้างของธีม Grav ไม่มีกฎที่กำหนดไว้ยกเว้นว่าจะต้องมีเทมเพลต twig ที่เกี่ยวข้องในเทมเพลต / โฟลเดอร์สำหรับเนื้อหาแต่ละหน้าและทุกประเภท
เนื่องจากการมีเพศสัมพันธ์แน่นระหว่างเนื้อหาของหน้าเว็บและกิ่งไม้แม่แบบของมันที่ดีในการสร้างรูปแบบทั่วไปขึ้นอยู่กับโครงกระดูกแพคเกจที่มีอยู่ในหน้าดาวน์โหลด
สมมติว่าคุณต้องการสนับสนุนเทมเพลตโมดูลาร์ในธีมของคุณคุณต้องสร้าง modular/โฟลเดอร์และจัดเก็บไฟล์เทมเพลตกิ่งไม้ไว้ภายใน หากคุณต้องการสนับสนุนแบบฟอร์มคุณควรสร้างform/ โฟลเดอร์และจัดเก็บเทมเพลตฟอร์มไว้ในนั้น
พิมพ์เขียว
เพื่อกำหนดฟอร์มสำหรับตัวเลือกและการกำหนดค่าสำหรับไฟล์เทมเพลตเดียวทุกไฟล์ blueprints/ใช้โฟลเดอร์ สิ่งเหล่านี้จะไม่สามารถแก้ไขได้ผ่านทางไฟล์Administrator Panelและใช้เป็นทางเลือก ชุดรูปแบบสามารถทำงานได้อย่างสมบูรณ์โดยไม่ต้องblueprints โฟลเดอร์
SCSS / LESS / CSS
หากคุณต้องการพัฒนาไซต์ด้วย SASS หรือ LESS คุณต้องสร้างโฟลเดอร์ย่อยใน user/themes/<mytheme>/scss/, หรือ less/ ถ้าคุณต้องการ LESS พร้อมกับ css / โฟลเดอร์
สำหรับไฟล์ที่สร้างขึ้นโดยอัตโนมัติซึ่งรวบรวมจาก SASS หรือ LESS ไฟล์ css-compiled/ใช้โฟลเดอร์ ในธีมปฏิสสารscss ใช้รูปแบบของ SASS
ทำตามขั้นตอนเหล่านี้เพื่อติดตั้ง SASS ในเครื่องของคุณ
ที่รูทของธีมพิมพ์คำสั่งที่ระบุด้านล่างเพื่อรันสคริปต์เชลล์ scss
$ ./scss.sh
- พิมพ์คำสั่งต่อไปนี้เพื่อเรียกใช้โดยตรง
$ scss --sourcemap --watch scss:css-compiled
css-compiled/ จะมีไฟล์ scss ที่คอมไพล์ทั้งหมดและไฟล์ css จะถูกสร้างขึ้นภายในธีมของคุณ
โฟลเดอร์อื่น ๆ
ขอแนะนำให้สร้างแยกต่างหาก images/, fonts/ และ js/ โฟลเดอร์ในไฟล์ user/themes/<mytheme>/ โฟลเดอร์สำหรับรูปภาพฟอนต์และไฟล์ JavaScript ที่ใช้ในธีมของคุณ
ตัวอย่างธีม
โครงสร้างโฟลเดอร์โดยรวมของไฟล์ Antimatter ธีมที่เราพูดถึงจนถึงตอนนี้แสดงอยู่ด้านล่าง