README

安装

使用composer安装，运行 composer require arif-rh/ci4-themes
设置主题配置（可选），如果您不设置配置，则将使用默认配置
如果您不更改配置，主题文件夹结构将如下所示，因此请将所有文件复制到这里

public/
└── themes/
    └── starter/
        ├── css/
        │ └── your-css.css
        ├── js/
        │ └── your-js.js
        ├── img/
        └── plugins/

CI4 主题文档

CodeIgniter 4 主题
- 安装
CI4 主题文档
- 目录
主题配置
- 主题
  - init
  - addCSS
  - addJS
  - addInlineJS
  - addExternalCSS
  - addExternalJS
  - loadPlugins
  - useFullTemplate
  - setHeader
  - setTemplate
  - setFooter
  - setTheme
  - render
  - renderCSS
  - renderJS
  - setPageTitle
  - setVar
  - getData()

主题配置

全名：\Arifrh\Themes\Config\Themes

这是默认的主题配置。您可以通过扩展此默认主题来覆盖主题，例如在 App\Config\ 中创建文件。

<?php namespace Config;

class Adminlte extends \Arifrh\Themes\Config\Themes
{
	public $theme = 'Adminlte';
    
    // you can overide other properties as your need
}

您可以在以后使用此新的主题配置。

主题

类 Themes

全名：\Arifrh\Themes\Themes

init

使用主题配置实例化 Themes，如果您不传递 $config，则将使用默认配置。

此方法是 静态的。

init(\Config\Themes $config = null)

参数:

示例用法

<?php 

use Arifrh\Themes\Themes;

// inside your controller
    
$config = config('Adminlte'); // your custom theme config 
Themes::init($config);

addCSS

将 CSS 文件添加到要加载到模板中的文件。必须在 Themes::init() 后使用。所有非静态方法必须在 Themes::init() 后调用。

addCSS(string|array $css_files)

参数

返回值

Arifrh\Themes\Themes

注意：所有非静态方法始终返回链式对象，因此您可以直接调用下一个方法。

示例用法

您可以通过三种方式添加 CSS 文件

// 1. using string (for single css file)

Themes::init()
    ->addCSS('style.css');

// 2. using string, separated by comma (for multiple css files)

Themes::init()
    ->addCSS('base.css, style.css');

// 3. using array (for single or multiple css files)

Themes::init()
    ->addCSS(['base.css', 'style.css']);

addJS

将 JavaScript 文件添加到要加载到模板中的文件。此方法与 addCSS() 方法用法相同。区别在于传递的参数是 JavaScript 文件名。

addJS(string|array $js_files)

参数

示例用法

Themes::init()
    ->addJS('script.js');

// or

Themes::init()
    ->addJS(['script.js', 'order.js']);

// or use with addCSS method

Themes::init()
    ->addCSS('checkout.css')
    ->addJS(['script.js', 'order.js']);

addInlineJS

向模板注入内联 JavaScript 代码。

addInlineJS(string $js_scripts)

参数

addExternalCSS

从外部源添加 CSS（完整 CSS URL）。当我们需要在主题文件夹的 css_path 外部包含 CSS 文件时使用。

addExternalCSS(string|array $full_css_path)

参数

addExternalJS

从外部源添加 JS（完整 JavaScript URL）。当我们需要在主题文件夹的 js_path 外部包含 JavaScript 文件时使用。

addExternalJS(string|array $full_js_path)

参数

loadPlugins

插件是将在项目的许多地方使用的 JavaScript 库，但并非所有页面都始终使用它。例如，DataTable、Bootbox、Select2。

loadPlugins(string|array $plugins)

参数

插件在 \Config\Themes 中注册。这是在 \Arifrh\Themes\Config\Themes 中定义插件的一个示例。

/**
  * Registered Plugins
  * Format:
  * [
  *  'plugin_key_name' => [
  *   'js' => [...js_array]
  *   'css' => [...css_array]
  *  ]
  * ]
  */

public $plugins = [
		'bootbox' => [
			'js' => [
				'bootbox/bootbox-en.min.js'
			]
		]
	];

示例用法

Themes::init()
    ->loadPlugins('bootbox');

// or

Themes::init()
    ->loadPlugins('bootbox, datatable');

// or

Themes::init()
    ->loadPlugins(['bootbox', 'select2', 'datatable']);

useFullTemplate

useFullTemplate(boolean $use_full_template = true)

参数

默认情况下，此主题将使用 3 种类型的模板。所有这些模板都位于主题文件夹中。

头部头部通常用于显示网站头部，包含 <html>、<title>、<head> 和打开的 <body> html 标签。此头部部分通常对所有页面都相同，并用于加载常见 CSS 文件。

默认情况下，头部模板将使用 header.php 文件名，您可以从 \Config\Themes 中更改此设置。
模板这是主要模板。内容将被注入此处。

默认情况下，模板使用 index.php，这也可以从 \Config\Themes 中更改。
底部底部通常用于显示网站底部，包含 </body> 和 </html> 关闭标签。此底部部分通常对所有页面都相同，并用于加载常见 JavaScript 文件。

默认情况下，底部模板将使用 footer.php 文件名，您可以从 \Config\Themes 中更改此设置。

在某些情况下，您可能需要显示自定义模板，例如您的默认模板包含导航栏、侧边栏、内容和主要页脚。但在登录页面上，您需要显示没有导航栏、侧边栏且页脚不同的页面。在这种情况下，您可以使用完整模板。

使用完整的HTML和body标签制作您的登录视图
在渲染模板之前，调用useFullTemplate

// assume your login view has full html and body tags

Themes::init()->useFullTemplate();
Themes::render('login')

setHeader

在\Config\Themes中设置的标题将被用作默认主题的标题。

setHeader(string $header_name)

参数

在某些情况下，一个或两个页面可能需要使用不同的标题，然后您可以即时设置它。

// assume that you have another-header.php in your active theme folder

Themes::init()
    ->setHeader('another-header');

setTemplate

在\Config\Themes中设置的模板将被用作默认主题的主要模板。

setTemplate(string $template_name)

参数

在某些情况下，一个或两个页面可能需要使用不同的模板，然后您可以即时设置它。

// assume that you have another-template.php in your active theme folder

Themes::init()
    ->setHeader('another-template');

setFooter

在\Config\Themes中设置的页脚将被用作默认主题的页脚。

setFooter(string $footer_name)

参数

在某些情况下，一个或两个页面可能需要使用不同的页脚，然后您可以即时设置它。

// assume that you have another-footer.php in your active theme folder

Themes::init()
    ->setFooter('another-footer');

setTheme

在\Config\Themes中设置的主题将被用作默认主题。

setTheme(string $theme_name)

参数

在某些情况下，一个或两个页面可能需要使用不同的主题，然后您可以即时设置它。

// assume that you have frontend theme

Themes::init()
    ->setTheme('frontend');

注意:

此即时更改主题功能仅当您的主题具有相同的文件夹结构和模板名称时才有效。
如果您的主题具有不同的结构和/或模板名称，请使用init($config)。

render

这是将任何内容使用活动主题模板渲染的主方法。

render(string $viewPath = null, array $data = array())

参数

基本上，当您想在CodeIgniter4中显示视图时，您正在使用view方法。现在，只需将您的view方法替换为Themes::render()，视图将根据您的活动主题进行渲染。

// for example, default welcome_view in CodeIgniter4 can be render like this
// we useFullTemplate because welcome_message contains full html and body tags

Themes::init()->useFullTemplate();  
Themes::render('welcome_message');

// you can manage your header, main template and footer in theme
// then you can render any view like this

Themes::render('dashboard')

renderCSS

此方法将渲染所有CSS主题。这通常应在标题模板内部调用。

<?php Arifrh\Themes\Themes::renderCSS(); ?>

renderJS

此方法将渲染所有JavaScript主题。这通常应在页脚模板内部调用。

<?php Arifrh\Themes\Themes::renderJS(); ?>

setPageTitle

setPageTitle(string $page_title)

参数

设置页面标题 - 用在<title>标签中。如果您未设置页面标题，则主题将使用控制器 | 方法名称作为默认标题。$page_title变量始终对主题可用，可以在<title>标签中使用。

<title><?= $page_title ?> | Site Name </title>

setVar

设置要传递给模板的变量。实际上，这可以通过Themes::render()方法中的$data参数传递。所以这只是一个将数据传递到模板的别名。

setVar($key, $value)

参数

示例用法

Themes::init()->setVar('page_title', 'Welcome Page');

// same as

Themes::init()->setVar(['page_title' => 'Welcome Page']);

// same as

Themes::render('view_name', ['page_title' => 'Welcome Page']);

getData()

获取所有主题变量

arif-rh / ci4-themes

维护者

详细信息

README

安装

CI4 主题文档

目录

主题配置

主题

init

addCSS

addJS

addInlineJS

addExternalCSS

addExternalJS

loadPlugins

useFullTemplate

setHeader

setTemplate

setFooter

setTheme

render

renderCSS

renderJS

setPageTitle

setVar

getData()