简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Mencipta Tema PyroCMS: Panduan Langkah demi Langkah

Mencipta Tema PyroCMS: Panduan Langkah demi Langkah

WBOY
WBOYasal
2023-09-04 10:49:06839semak imbas

Seperti kebanyakan sistem pengurusan kandungan, PyroCMS menggunakan tema bahagian hadapan. Walaupun tema PyroCMS dibina sedikit berbeza daripada tema daripada sistem lain yang mungkin anda biasa gunakan, ia masih mudah untuk dibuat. Malah, ia sangat mudah sehingga pengalaman PHP yang sangat sedikit diperlukan untuk memasangnya!

Struktur folder

Tema PyroCMS terdiri daripada HTML, imej, CSS dan JavaScript yang disusun dalam folder yang disokong berikut:

  • CSS
  • Gambar
  • js
  • Pandangan
  • Paparan/Layout
  • Lihat/Sebahagian daripada kandungan
  • Pandangan/Modul

Walaupun folder ini sudah pasti kelihatan biasa kepada anda, folder "pandangan" paling sesuai dalam konteks MVC. Apabila membina tema untuk PyroCMS, anda sebenarnya sedang membina pandangan (termasuk aset) aplikasi corak MVC. Paparan ini terdiri daripada fail reka letak utama dan berbilang fail separa (iaitu header.html atau footer.html) yang berkongsi logik pembentangan antara reka letak yang berbeza. Kami akan membincangkan perkara ini sebentar lagi. header.html 或 footer.html）组成。我们将很快讨论这个问题。

开始使用

要开始构建您的第一个 PyroCMS 主题，请在主题可能驻留在 PyroCMS 实例中的两个位置之一创建受支持的文件夹结构：

addons/shared_addons/themes (for themes available to all sites)

或者：

addons/[site-name]/themes (for themes available to only one specific site)

创建包含受支持文件夹结构的基本主题文件夹后，您要添加到主题的第一个文件是 theme.php。

addons/shared_addons/themes/[my-theme-name]/theme.php

此 theme.php 文件包含主题的所有重要详细信息，包括其名称、作者、版本等。在某种程度上，此文件类似于 WordPress 主题的 style.css 文件。以下是 PyroCMS 主题的 theme.php 文件的基本示例：

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Theme_Foo extends Theme
{
    public $name = 'Foo';
    public $author = 'Zac Vineyard';
    public $author_website = 'https://zacvineyard.com';
    public $website = 'http://example.com/themes/foo';
    public $description = 'The antithesis theme to your Bar theme.';
    public $version = '1.0';
}

 /* End of file theme.php */

请注意，此文件扩展了一个 PyroCMS 类，名为 Theme。另外，由于您在此文件中声明 PHP 类，因此您需要确保在类声明中使用包含主题的文件夹的名称。因此，如果包含主题的文件夹名为“foo”，则在 theme.php 中创建的类应命名为 Theme_Foo （而不是 Theme_Custom，如 PyroCMS 文档中的示例所示）。

创建 theme.php 文件后，您可以登录 PyroCMS 控制面板并查看主题模块中列出的主题。

创建 PyroCMS 主题：分步指南

布局

PyroCMS 主题的所有布局文件都存在于以下两个位置之一：

addons/[site-ref]/themes/[my-theme-name]/views/layouts/

或者：

addons/shared_addons/themes/[my-theme-name]/views/layouts/

每个主题都应该有一个布局文件，名为“default.html”，位于上面列出的位置之一。附加布局文件是可选的；稍后我将向您展示如何添加更多布局文件。首先，检查布局文件的内容很重要。

PyroCMS 中的布局文件是使用 HTML 和标签解析器（称为 Lex 标签解析器）构建的。这是一个非常基本的 PyroCMS 布局文件的样子：

<!DOCTYPE html>
<html>
<head>
    <title>{{ template:title }}</title>
    {{ template:metadata }}
</head>
<body>
    <h1>{{ template:title }}</h1>
    {{ template:body }}
</body>
</html>

您在这段 HTML 中看到的特殊标签是 Lex 解析器标签。如果您曾经在 PHP 中使用过 Smarty 模板，这些模板可能看起来有些熟悉。在布局文件中使用 Lex 解析器标签的主要好处是，您不必将 PHP 直接放入视图中（请记住，我们使用的是 MVC），这为您提供了创建遵循 不要重复自己的模式。

当然，我上面给出的示例很简单，但是 Lex 解析器标签非常强大。他们可以循环数据、处理属性等等。在 PyroCMS 文档中了解有关 Lex 解析器的更多信息。

更复杂的 PyroCMS 布局文件如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>{{ template:title }}</title>
    {{ template:metadata }}
    {{ theme:favicon file="favicon.png" }}
    {{ theme:css file="style.css" }}
    {{ theme:js file="site.js" }}
</head>
<body>
    <div class="header">
        <div class="logo">
            {{ theme:image file="logo.jpg" alt="Your Cool Logo" }}
        </div>
        <div class="nav">
            {{ navigation:links group="header" }}
        </div>
    </div>
    <div class="content">
        <h1>{{ template:title }}</h1>
        {{ template:body }}
    </div>
</body>
</html>

您会注意到这个使用 Lex 的布局文件包含 CSS、JavaScript 和图像等资源。使用 Lex 标签和 HTML 允许 PyroCMS 开发人员非常快速地构建布局文件。

部分内容

PyroCMS 中的 Partials 代表部分布局，允许您将布局分解为可重用的部分或部分。然后可以通过不同的布局文件加载这些部分。这可以防止您在多个布局文件中键入相同的代码（页眉、页脚等）。

根据您放置主题文件的位置，部分内容将在以下两个位置之一创建：

addons/[site-ref]/themes/[my-theme-name]/views/partials/

或者：

addons/shared_addons/themes/[my-theme-name]/views/partials/

使用此 Lex 标签将部分内容加载到布局中：

{{ theme:partial name="partialname" }}

此 Lex 标记的运行方式与 PHP include 语句完全相同 - 类似于您在 WordPress 或其他主题中找到的语句。下面的代码是利用部分的 PyroCMS 布局的简单示例。

{{ theme:partial name="header" }}

    <div class="content">
        <h1>{{ template:title }}</h1>
        {{ template:body }}
    </div>

{{ theme:partial name="footer" }}

header.html 部分和 footer.html

🎜Mulakan🎜 🎜Untuk mula membina tema PyroCMS pertama anda, buat struktur folder yang disokong di salah satu daripada dua lokasi di mana tema anda mungkin berada dalam contoh PyroCMS anda: 🎜 
[your-theme]/views/web/layouts/default.html
🎜atau: 🎜 
[your-theme]/views/mobile/layouts/default.html
🎜Selepas mencipta folder tema asas anda dengan struktur folder yang disokong, fail pertama yang anda mahu tambah pada tema anda ialah theme.php. 🎜 rrreee 🎜Fail theme.php ini mengandungi semua butiran penting tema, termasuk nama, pengarang, versinya, dsb. Dari satu segi, fail ini serupa dengan fail style.css tema WordPress. Berikut ialah contoh asas fail theme.php untuk tema PyroCMS: 🎜 rrreee 🎜Sila ambil perhatian bahawa fail ini memanjangkan kelas PyroCMS bernama Theme. Selain itu, kerana anda mengisytiharkan kelas PHP anda dalam fail ini, anda perlu memastikan untuk menggunakan nama folder yang mengandungi tema anda dalam pengisytiharan kelas. Oleh itu, jika folder yang mengandungi tema dinamakan "foo", kelas yang dibuat dalam theme.php hendaklah dinamakan Theme_Foo (bukan kod Theme_Custom >, seperti yang ditunjukkan dalam contoh dalam dokumentasi PyroCMS). 🎜 🎜Selepas mencipta fail theme.php, anda boleh log masuk ke panel kawalan PyroCMS dan melihat tema yang disenaraikan dalam modul Tema. 🎜 🎜Membuat Tema PyroCMS: Panduan Langkah demi Langkah🎜 🎜 🎜Susun atur🎜 🎜Semua fail susun atur untuk tema PyroCMS wujud di salah satu daripada dua lokasi: 🎜 rrreee 🎜atau: 🎜 rrreee 🎜Setiap tema harus mempunyai fail reka letak bernama "default.html" yang terletak di salah satu lokasi yang disenaraikan di atas. Fail susun atur tambahan adalah pilihan saya akan menunjukkan kepada anda cara menambah lebih banyak fail susun atur kemudian. Pertama, penting untuk menyemak kandungan fail susun atur. 🎜 🎜Fail susun atur dalam PyroCMS dibina menggunakan HTML dan penghurai tag (dipanggil penghurai tag Lex). Beginilah rupa fail susun atur PyroCMS yang sangat asas: 🎜 rrreee 🎜Teg khas yang anda lihat dalam HTML ini ialah teg penghurai Lex. Jika anda pernah menggunakan templat Smarty dalam PHP, templat ini mungkin kelihatan agak biasa. Faedah utama menggunakan teg penghurai Lex dalam fail susun atur anda ialah anda tidak perlu meletakkan PHP terus ke paparan (ingat, kami menggunakan MVC), yang memberi anda peluang terbaik untuk mencipta tema PyroCMS yang mengikuti em> Jangan ulangi corak anda. 🎜 🎜Sudah tentu, contoh yang saya berikan di atas adalah mudah, tetapi tag parser Lex sangat berkuasa. Mereka boleh mengulangi data, memanipulasi sifat dan banyak lagi. Ketahui lebih lanjut tentang penghurai Lex dalam dokumentasi PyroCMS. 🎜 🎜Fail susun atur PyroCMS yang lebih kompleks kelihatan seperti ini: 🎜 rrreee 🎜Anda akan perasan bahawa fail susun atur menggunakan Lex ini mengandungi sumber seperti CSS, JavaScript dan imej. Menggunakan tag Lex dan HTML membolehkan pembangun PyroCMS membina fail susun atur dengan cepat. 🎜 🎜 🎜Sebahagian daripada kandungan🎜 🎜Separa dalam PyroCMS bermaksud Reka Letak Separa dan membolehkan anda memecahkan reka letak anda kepada bahagian atau bahagian yang boleh digunakan semula. Bahagian ini kemudiannya boleh dimuatkan melalui fail susun atur yang berbeza. Ini menghalang anda daripada menaip kod yang sama (pengepala, pengaki, dll.) dalam berbilang fail susun atur. 🎜 🎜Bergantung pada tempat anda meletakkan fail tema anda, beberapa kandungan akan dibuat di salah satu daripada dua lokasi: 🎜 rrreee 🎜atau: 🎜 rrreee 🎜Gunakan tag Lex ini untuk memuatkan beberapa kandungan ke dalam reka letak: 🎜 rrreee 🎜Teg Lex ini beroperasi sama seperti pernyataan include PHP - serupa dengan apa yang anda akan temui dalam WordPress atau tema lain. Kod di bawah ialah contoh mudah reka letak separa PyroCMS. 🎜 rrreee Kandungan bahagian 🎜header.html dan fail footer.html sudah tentu HTML yang perlu kita gunakan semula daripada templat dalam contoh kod di atas. Petua cepat: Tiada had kepada bilangan bahagian yang boleh anda gunakan dalam reka letak. Selain itu, sesetengah fail mungkin mengandungi sebarang gabungan HTML dan Lex yang sah. 🎜

多个布局文件

要向 PyroCMS 实例添加另一个布局，请在主题的 views/layouts/ 目录中再创建一个布局文件。该文件可以使用任何名称，但最好尽可能具有描述性地命名 - 例如 about.html。

为了增加灵活性，您可以使用任意数量的布局文件。当您在 PyroCMS 控制面板（控制面板→页面→页面类型）中编辑或创建页面类型并从下拉列表中选择所需文件时，您的所有布局主题的布局文件将可供使用。

创建 PyroCMS 主题：分步指南

移动布局

PyroCMS 能够轻松显示移动设备和桌面设备的单独布局。要使用此功能，请将布局文件移动到 views 文件夹中名为“web”的文件夹中，以便您的默认布局位于此处：

[your-theme]/views/web/layouts/default.html

当用户使用桌面浏览器访问您的网站时，将使用此位置的主要布局文件。如果用户使用移动设备浏览器访问您的网站，则会向用户提供您在此位置创建的移动布局：

[your-theme]/views/mobile/layouts/default.html

此功能适用于多个布局文件。

请注意 PyroCMS 文档中的警告：“PyroCMS 不认为 iPad 是移动设备，因此如果用户使用 iPad 访问您的网站，它不会加载您的移动布局。”但是，如果在您的网站上，您希望将 iPad 识别为移动设备，则可以更改 config/ 目录中的“user_agent.php”文件，以使 iPad 识别为移动设备。移动设备。

完成！

使用本文作为指南，您可以看到在 PyroCMS 中创建主题是多么容易。提供的代码示例非常简单，因此我鼓励您探索 PyroCMS 文档，以便对 PyroCMS 中的布局、移动布局、部分和 Lex 解析器有更丰富的经验。玩得开心！

Atas ialah kandungan terperinci Mencipta Tema PyroCMS: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php JavaScript mvc css html include 循环 JS default ipad WordPress
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pengenalan kepada mencipta tema tersuai dengan OpenCartArtikel seterusnya：Pengenalan kepada mencipta tema tersuai dengan OpenCart

Artikel berkaitan

Lihat lagi