本文为中文翻译，并且并不是全部，只摘取了自己需要的部分，以下为原网站链接：https://docs.moodle.org/dev/Themes_overview#Basic_theme_example_settings_explained
欢迎来到Moodle主题的新世界!
Moodle主题允许用户改变Moodle站点的外观和感觉。 主题可以被有权限的用户应用在网站，类别，课程和活动级别。 主题可以针对手机或平板电脑等特定设备设计。 本页面解释了主题如何在Moodle中工作，旨在帮助您创建或修改大多数Moodle主题。
您可以使用贡献主题或创建自己的主题与社区分享。 主题也可以基于父主题，只有很少的自定义。 主题使用CSS来实现这一点，改变底层标记结构，并添加Javascript来添加更高级的行为。
大多数主题开发人员只是在现有主题的基础上对新主题添加一些更改。 Moodle Theme架构的设计方式是，当主题中没有任何基于它的定义时，基础主题将作为一个退路使用。 这使得创建新的主题变得很容易，而这些主题只是简单地寻求一些微小的改变。
主题的结构
在构建优秀主题时需要了解的一些重要内容:
1. php -每个主题都需要这个文件。 它定义了使主题在Moodle中工作所需的配置设置和定义。 这些包括主题、文件、区域、默认区域和选项。
2. 布局和布局文件-在config.php中，每种页面类型都有一个定义(参见附录A:超过12种类型的主题布局列表)。 每个页面类型定义告诉Moodle将使用哪个布局文件，该页面类型应该显示哪个块区域，等等。 布局文件包含显示页面基本结构所需的HTML和最小PHP。
3. boost主题-旨在成为最好的主题使用作为一个起点，建立一个新的主题。 它支持所有最新的主题特性，并尽可能保持Bootstrap css框架的真实性。 创建基于boost的主题
以下是主题插件各文件、文件夹的解释
config.php-----每个主题都需要这个文件。它定义了使主题在Moodle中工作所需的配置设置和定义。这些包括主题、文件、区域、默认区域和选项。
lib.php-----包含主题使用的特殊函数
/classes/*.php-----包含主题的自动加载类。有关更多详细信息，请参阅自动类装入。
/classes/output/*.php-----这是主题定义覆盖渲染器的位置。更多细节请参见输出渲染器。
settings.php-----包含自定义主题设置。这些本地设置由主题定义，允许管理员轻松更改主题的外观或操作方式。(如背景颜色或标题图像)
version.php-----包含主题名称、版本号和使用主题的Moodle版本要求
/fonts/*.woff, *.ttf, *.eot, *.svg, *.otf -----主题字体(从2.6开始)。
/font_core/*.woff, *.ttf, *.eot, *.svg, *.otf-----包含覆盖标准核心字体的字体(从2.6开始)。
/fonts_plugins/plugintype/pluginname/*.woff, *.ttf, *.eot, *.svg, *.otf-----包含覆盖插件字体的字体(从2.6开始)。
/amd/src/*.js-----主题需要的所有专用JavaScript文件都应该位于这里。 Javascript应该被写成一个AMD模块。 更多信息请参见Javascript模块。
/lang/[langcode]/*.php------主题需要的任何特殊语言文件都应该放在这里。
/templates/*.mustache------包含主题的胡子模板文件。 (包括覆盖的)。 更多信息请参见模板。
/layout/*.php------包含主题的布局文件。
/pix/**.png, *.jpg, *.gif, *.svg-----包含主题在CSS或布局文件中使用的任何图像。
/pix/favicon.ico-----为该主题显示的图标。
/pix/screenchot.png-----主题选择屏幕上要显示的主题的屏幕截图。
/pix_core/*.png, *.jpg, *.gif, *.svg-----包含覆盖标准核心图像的图像。
/pix_plugins/plugintype/pluginname/*.png, *.jpg, *.gif, *.svg-----包含覆盖插件图像的图像。
/style/*.css-----CSS文件的默认位置。
/less/*.less-----如果您的主题使用较少，则为Less文件的默认位置。
/scss/*.scss-----如果您的主题使用SCSS，则为SCSS文件设置默认位置。
还可以在其他几个地方包含样式表(请参阅下面的CSS如何和为什么)。
通过将这些图标放在dataroot/pix和dataroot/pix_plugins中，可以覆盖基本主题中使用的图标而不影响核心代码。 当一个主题扩展了一个基础主题并提供了它自己的图标时，这些图标仍然会被使用。
通过将这些模板放在templates/[componentname]/[templatename].mustache中，可以覆盖基本主题中使用的mustache模板而不干扰核心代码。
主题的选择
所有主题选项都在主题的config.php文件中设置。 最常用的设置有:父脚本、表格、布局和javascript脚本。 看一下主题选项表，有一个完整的主题选项列表，其中包括较少使用的专业或高级设置。
基本主题示例设置解释
首先，你会注意到一切都被添加到$THEME。 这是主题的配置对象，它是由Moodle使用默认设置创建的，然后由您添加到它的任何设置更新。
$THEME->name
第一个设置是主题的名称。 这应该是您的主题的名称，最有可能是您命名您的主题目录。
$THEME->sheets
一个数组，包含这个主题要包含的CSS样式表的名称。 Boost使用scss而不是css，所以它不会在这里列出任何文件。 注意，它只是样式表的名称，不包含目录或文件扩展名。 Moodle假设主题的样式表位于主题的{theme}/style目录下，并以.css作为扩展名。
$THEME->editorsheets
包含TinyMCE文本编辑器内容区域所包含的CSS样式表名称的数组。 Boost在这里没有列出任何样式表，所以TinyMCE将使用纯文本样式。
$THEME->layouts
在本例中，boost将18种不同布局类型中的每一种映射到6个不同布局文件中的一个。 有关更多信息，请参阅下面的布局部分。
$THEME->parents
这定义了主题将扩展的主题。 Boost没有父母，但如果你是扩展Boost，你会列出它在这里像:$THEME->父母= [' Boost '];
$THEME->enable_dock
Boost不支持对接块。 有关带有块停靠的主题的示例，请参阅theme_bootstrapbase。
$THEME->csstreepostprocessor
使用一个函数来post处理CSS。 这是一个高级特性，在boost中用于自动将供应商前缀应用到CSS样式。
$THEME->yuicssmodules
这是一个旧的设置，它定义了一个要加载的YUI css文件列表。 这些文件与现有的样式相冲突，建议将其设置为空字符串，以防止包含任何文件。
$THEME->rendererfactory
几乎所有的主题都需要将此设置设置为'theme_overridden_renderer_factory'，否则主题将无法自定义任何核心渲染器。
$THEME->undeletableblocktypes
这是一个逗号分隔的块类型列表，不能在此主题中删除。 如果你没有定义这个-管理和设置块将在默认情况下是不可删除的。 因为Boost提供了替代导航方式，所以不需要任何块。
注意：当你第一次开始编写主题时，确保你看了Moodle附带的其他主题的配置文件。 你将很好地了解每件事是如何运作的，以及一个主题中发生了什么，只要阅读它并注意到它包含了什么或排除了什么。
CSS
CSS文件的位置
首先让我们看看在Moodle中可以包含哪些CSS:
\theme\themename\style\*.css
这是一个主题所使用的所有样式表的默认位置，也是如果这个主题使用CSS，那么主题设计人员应该使用的位置。 CSS的替代方案是LESS和SCSS，它们更强大、更灵活、更容易维护。
新主题开发人员应该注意，找到和包含CSS文件的顺序会创建一个层次结构。 这种顺序确保主题样式表中的规则优先于之前可能引入的其他文件中的相同规则。 这既可以扩展其他文件定义(参见配置文件中的parent array)，也可以确保当前主题的CSS规则/定义具有最后发言权。
还可以使用其他位置(尽管很少)在页面中包含CSS。 php文件的开发人员可以从Moodle中的任何地方手动指定样式表，比如数据库。 通常，如果代码这样做，这是因为有一个非主题配置或插件设置，其中包含需要特殊CSS信息的信息。 作为一个主题设计师，你应该知道，但不必担心，CSS文件的这些位置。 下面是一些例子:
{pluginpath}\styles.css e.g. \block\blockname\styles.css or \mod\modname\styles.css
每个插件都可以有自己的styles.css文件。 这个文件应该只包含模块所需的CSS规则，不应该为插件添加任何东西，比如颜色、字体大小或页边距，除非是真正需要的。
一个插件的特定主题样式应该位于主题样式目录中。
{pluginpath}\styles_themename.css
这应该只被插件开发者使用。 它允许他们编写专为特定主题设计的CSS，而无需对该主题进行更改。 你会注意到，它从来没有在Moodle中使用过，而是被设计为仅供贡献的代码使用。
作为主题设计人员，我们将只使用第一种引入CSS的方法:向位于主题样式目录中的样式表文件添加规则。
比CSS更好
浏览器很好地理解CSS——但是很难编写和维护它。 该语言不支持继承和重用。 只在更现代的浏览器中存在对变量的支持。 这就是CSS预处理器被发明的原因。 Moodle支持两种不同类型的CSS预处理器(Less和Sass)，但目前推荐使用Sass预处理器。
有关Less和Sass的更多信息，请参阅:
要使用其中任何一个，定义$THEME->lessfile = 'filename';或$THEME->scss = 'filename';在您的主题config.php中。 然后，Moodle会使用它内置的CSS预处理程序来编译第一次加载的CSS(或者每次如果在$CFG中启用了themedesignermode)。
Moodle的核心CSS组织
接下来要看的是CSS的组织和主题中的规则。 尽管作为一个主题设计师，它完全取决于你如何创建和组织你的CSS。 请注意，Moodle标准安装中提供的主题都没有直接使用CSS样式表。 相反，它们使用LESS或SCSS来生成样式表。 它们都在LESS或SCSS文件夹中列出一个名为“moodle”的主LESS或SCSS文件，该文件使用导入来加载所有其他需要的文件。
如何在Moodle中编写有效的CSS规则
编写好的CSS规则非常重要。
由于性能要求和浏览器的限制，所有的CSS文件都被合并到一个单独的CSS文件中，每次都包含它。 这意味着规则需要以这样一种方式编写，以最小化导致不需要的样式被应用的碰撞的机会。 虽然编写好的CSS是大多数设计人员努力的目标，但我们已经实现了几个新的主体类，并提示开发人员使用适当的类名。
<body> CSS id 和 classes
应用于主体的ID标记将始终是URI的表示形式。例如，如果你正在查看一个论坛帖子，并且URI是'/mod/forum/view.php'，那么body标签ID将是'#page-mod-forum-view'。
和主体的ID属性一样，URI也被分解成几个CSS类，这些类被添加到主体标签中，所以在上面的例子'/mod/论坛/视图'中，你最终会得到以下类被添加到主体标签'。path-mod”、“.path-mod-forum”。注意”。path-mod-forum-view'不是作为一个类添加的，这是故意省略的，以减少混淆和重复，因为规则可以通过使用ID直接关联到页面，而不需要最终的类。
上述身体ID和类将形成许多的面包和黄油的CSS规则你将需要写主题,然而也有一些其他非常方便的类添加到body标签,将有利于你一旦你开始你的旅行主题的兔子洞。下面列出了一些更有趣的类。
- 如果启用了JavaScript，那么'jsenabled'将作为一个类添加到主体标签，允许您根据是否启用JavaScript进行样式设置。
- 'dir-rtl'或'dir-ltr'将根据语言包的方向被添加到主体中:rtl =从右到左，ltr =从左到右。这允许您在需要时根据语言确定文本对齐方式。
- 会添加一个类来代表当前使用的语言包，默认情况下Moodle会使用en_utf8，这会导致类'lang-en_utf8'被添加到body标签中。
- 这个wwwroot for Moodle也将被转换为一个类，并添加到body标签，允许你根据它到达的URL来格式化你的主题。例如，http://sam.moodle.local/moodle/将成为'.sam- modle -local -moodle '
- 如果当前用户未被登录，则'。Notloggedin '将被添加到body标签中。
- 课程格式类型将被添加，例如format-weeks
- 在“course-11 context-616 cmid-202 category-1”中添加了课程id、上下文id和类别id。
- pagelayout被添加为“pagelayout-incourse”
这一切在实践中是什么样子?使用上面的例子/mod/forum/view.php，你会得到至少如下的body标签:
<body id="page-mod-forum-view" class="format-weeks forumtype-social path-mod path-mod-forum safari dir-ltr lang-en yui-skin-sam yui3-skin-sam damyon-per-in-moodle-com--stable_master pagelayout-incourse course-11 context-616 cmid-202 category-1 jsenabled">编写你的规则
通过遵循CSS编码风格和CSS最佳实践，并理解CSS的层叠顺序，主题开发人员将减少冲突和编写的CSS行。CSS类被放置在任何人都可能想应用自己的样式的地方。
在开始编写规则时，确保您已经很好地理解了您希望将这些规则应用于何处，充分利用上面提到的主体类是一个好主意。如果你想为一个特定的页面编写规则，可以使用body标签的ID，例如:
#page-mod-forum-view .forumpost {
border: 1px solid blue;
}如果你想写一个规则，将适用于整个论坛。
.path-mod-forum .forumpost {
border: 1px solid blue;
}另一个需要考虑的非常重要的事情是导致您想要样式化的标签的结构。浏览器在更特定的选择器上应用具有优先级的冲突样式。记住这一点并编写完整的选择器是非常有益的，这些选择器依赖于标记的结构，从而导致您希望样式化的标记。
通过使用body id和类，并编写选择器来考虑领先结构，你可以极大地减少现在和将来与Moodle发生冲突的机会。
编写尽可能少的规则也是很重要的。CSS非常难以维护，大量的CSS不利于客户端性能。基于Bootstrap CSS框架的主题可以实现大多数功能，而无需编写任何额外的CSS规则。请阅读Bootstrap文档，学习如何使用Bootstrap，以避免为框架已经提供的东西添加不必要的CSS规则。
布局
布局在config.php中定义
所有的主题都需要定义布局，他们希望负责以及创建;然而，这些布局需要许多布局文件。如果主题覆盖了另一个主题，那么就需要决定这个新主题应该覆盖哪个布局。如果主题是一个全新的开始，那么你就需要为每种不同的可能性定义一个布局。
同样重要的是要注意，一个新的主题，将自己的基础上另一个主题(覆盖它)不需要定义任何布局或使用任何布局文件，如果没有改变，它希望使现有主题的布局。
正如前面提到的，布局是在$THEME->layouts中的config.php中定义的。下面是一个这样的布局定义的例子:
$THEME->layouts = array(
// Standard layout with blocks, this is recommended for most pages with general information
'standard' => array(
'theme' => 'boost',
'file' => 'columns2.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre'
)
)Moodle首先查看的是布局的名称，在本例中它是' standard ' (PHP中的数组键)，然后查看布局的设置，这是主题、文件、区域和默认区域。布局还可以设置一些其他选项。
theme主题
是布局文件所在的主题。没错:你可以利用其他安装的主题的布局。 Optional
file文件
是此布局要使用的布局文件的名称。Required
regions区域
是主题中不同的块区域(可以放置块的地方)。Required
defaultregion
添加新块时的默认位置。如果区域是非空的，则Required，否则Optional
options
下面将详细描述一组布局特定的选项。
Optional
主题是可选的。通常，布局文件在当前主题中查找，或者，如果不存在，在父主题中查找。但是，您可以使用来自任何其他主题的布局文件，只需在这里给出主题名称。
您可以定义任何您喜欢的区域。你只需要为每一个取一个名字。大多数主题只使用side_pre和side_post中的一个或两个，就像'left side'和'right side'，除了在从右到左的语言中，它们是相反的。如果你在config.php中说你的布局提供了名为'fred'和'barney'的区域，那么你必须在布局文件的某处调用$OUTPUT->blocks_for_region('fred') 和$OUTPUT->blocks_for_region('barney')。
最后一个设置选项是一种特殊情况，仅当您想要使用它时才需要设置它。这个设置允许主题设计人员指定他们想要创建的特殊选项，这些选项以后可以在布局文件中访问。这允许主题在定义期间做出设计决策，并在使用的布局文件中对这些决策做出反应。
在boost主题中使用了这样一个地方。如果您先看一下theme/boost/config.php，您会注意到一些布局指定了选项langmenu和nonavbar，它们都可以设置为true或false。布局选项可以用于布局.php文件、胡子模板和渲染器。
<?php
$hasnavbar = (empty($PAGE->layout_options['nonavbar']) && $PAGE->has_navbar());
$hasfooter = (empty($PAGE->layout_options['nofooter']));
?>布局文件
布局文件用于为Moodle中不同类型的页面提供页面元素的不同布局。
在一个主题的config.php中-有一个“布局”列表，它将一个页面类型映射到主题的布局文件夹中的一个特定php页面。
例如：theme/boost/config.php
...
'popup' => array(
'file' => 'columns1.php',
'regions' => array(),
'options' => array('nofooter' => true, 'nonavbar' => true),
),
...这意味着每一个页面有pagetype 'popup'将显示'theme/themename/layout/columns1.php'文件，它将没有块区域，有一些选项，将在全局变量"$PAGE->layout_options"页面可用。
可以实现一个布局文件直接在php中呼应的HTML页面,或混合php和HTML标记,但是一个更好的方法来创建一个布局文件是收集所有所需的信息用胡子布局成一个上下文和呈现模板。
为布局文件使用模板很有意义，因为它们比将PHP和HTML混合在同一个文件中更容易阅读和维护。
一个简单的使用模板的布局文件的例子是:
<?php
$bodyattributes = $OUTPUT->body_attributes([]);
$templatecontext = [
'sitename' => format_string($SITE->shortname, true, ['context' => context_course::instance(SITEID), "escape" => false]),
'output' => $OUTPUT,
'bodyattributes' => $bodyattributes
];
echo $OUTPUT->render_from_template('theme_boost/columns1', $templatecontext);这个例子将一些变量放入templatecontext中，然后调用“render_from_template”来渲染这个布局的mustache模板。模板位于:"theme/boost/templates/columns1.mustache"。可以将PHP类放在mustache模板的上下文中——任何不接受参数的公共属性或方法都将对模板可用。$OUTPUT有几个有用的公共方法，它们不接受任何参数，当在mustache中创建布局模板时，它们是一个有价值的类。
这个布局的mustache模板显示在这里:
theme/boost/templates/columns1.mustache
{
{
{ output.doctype }}}
<html {
{
{ output.htmlattributes }}}>
<head>
<title>{
{
{ output.page_title }}}</title>
<link rel="shortcut icon" href="{
{
{ output.favicon }}}" />
{
{
{ output.standard_head_html }}}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body {
{
{ bodyattributes }}}>
<div id="page-wrapper">
{
{
{ output.standard_top_of_body_html }}}
<div id="page" class="container-fluid">
<div id="page-content" class="row">
<div id="region-main-box" class="col-xs-12">
<section id="region-main">
<div class="card card-block">
{
{
{ output.course_content_header }}}
{
{
{ output.main_content }}}
{
{
{ output.course_content_footer }}}
</div>
</section>
</div>
</div>
</div>
</div>
{
{
{ output.standard_end_of_body_html }}}
</body>
</html>
{
{#js}}
require(['theme_boost/loader']);
{
{/js}}解释这个模板的每一行将回答很多问题。这个示例只包含生成有效布局所需的非常少的函数。您应该根据每个布局文件的需要考虑下面的所有部分(尽管任何HTML标记都可以而且应该更改)。
{
{
{ output.doctype }}}这是在php中调用$OUTPUT函数的一个例子。因为在输出类上有一个名为“doctype”的公共方法，该方法不接受任何参数——mustache将调用它并返回输出。我们调用一个函数来生成doctype标记，因为调用这个函数会为这个主题的文档类型返回正确的HTML，并且它会根据主题的文档类型设置不同的内容类型头(包括字符集)。在每个页面中设置正确的字符集对于防止一类XSS攻击非常重要。
<html {
{
{ output.htmlattributes }}}>现在我们已经返回了根标签- html标签。通过调用输出类的htmlattributes函数，我们包含了一组页面的默认属性。这包括整个页面的正确语言属性，还可以包括XHTML文档的xml名称空间。
<head>
<title>{
{
{ output.page_title }}}</title>现在我们已经开始了文档的标题部分，并为页面设置了标题。注意，输出类已经对标题进行了转义，因此我们使用三个mustache标记“{ { {”来避免两次转义。
<link rel="shortcut icon" href="{
{
{ output.favicon }}}" />我们调用一个函数来获取网站图标的url。favicon是一个在主题图片目录中的文件，它是通过“theme/image.php”文件提供的，该文件为图像添加了特殊的缓存头。
{
{
{ output.standard_head_html }}}标准的head html函数执行了我们页面所需的大量设置。它在内部创建块区域，创建包含SEO关键字的元标签，初始化通用javascript模块，生成到样式表的链接，并注入任何由$CFG->additionalhtmlhead设置设置的额外HTML。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>这个视口元标签被bootstrap推荐用于“适当的视口渲染和触摸缩放”。
<body {
{
{ bodyattributes }}}>正文属性包括页面的语言方向和标准类。
<div id="page-wrapper"> 在Boost主题中，我们使用一个页面包装器div来防止内容消失在固定标题下。
{
{
{ output.standard_top_of_body_html }}}standard_top_of_body_html应该包含在每个布局中，包括可访问性的跳过链接，以及初始化jquery、yui和我们自己的静态javascript文件。
<div id="page" class="container-fluid">
<div id="page-content" class="row">
<div id="region-main-box" class="col-xs-12">
<section id="region-main">
<div class="card card-block">这是定义页面内容区域的标准HTML标记。这些类来自bootstrap 4。
{
{
{ output.course_content_header }}}课程内容头允许Moodle插件在页面顶部注入内容。例如，这用于“通知”(这是提交表单后看到的警告框)。
{
{
{ output.main_content }}}main content函数返回页面的真实内容。
{
{
{ output.course_content_footer }}}课程内容页脚主要用于课程格式在主要内容之后插入内容。
</div>
</section>
</div>
</div>
</div>
</div>我们关闭所有的开放标签…
{
{
{ output.standard_end_of_body_html }}}这个函数将添加渲染页面时所需的所有javascript。Javascript被添加到文档的末尾，这样它就不会阻碍页面的呈现。
</body>
</html>我们完成了页面的HTML。
{
{#js}}
require(['theme_boost/loader']);
{
{/js}}最后一节是bootstrap 4主题所必需的，它加载bootstrap 4的所有Javascript依赖项。
如果我们在这个布局中有块区域，我们需要将它们插入到模板中。我们可以这样做:在布局php文件中获取块区域的HTML，将其添加到上下文中，然后将其包含在模板中。
theme/boost/layout/columns2.php
...
$blockshtml = $OUTPUT->blocks('side-pre');
$hasblocks = strpos($blockshtml, 'data-block=') !== false;
...
$templatecontext = [
...
'sidepreblocks' => $blockshtml,
'hasblocks' => $hasblocks,
...
];
...
echo $OUTPUT->render_from_template('theme_boost/columns2', $templatecontext);theme/boost/templates/columns2.mustache
...
{
{#hasblocks}}
<section data-region="blocks-column" class="hidden-print">
{
{
{ sidepreblocks }}}
</section>
{
{/hasblocks}}
...在编写布局文件时，考虑不同的布局以及每个布局使用的HTML如何不同。你很可能会发现你不需要为每个布局使用不同的布局文件，很可能你可以跨多个布局重用你创建的布局文件。当然，您也可以使用布局选项来进一步减少需要生成的布局文件的数量。
当然，如上所述，如果你自定义一个现有的主题，那么你可能不需要创建任何布局或布局文件。
利用图像
在一开始列出新主题系统的特性时，其中提到的一个特性是可以从主题中覆盖Moodle中的任何标准图像。现在，我们将看看如何在主题中使用您自己的图像，以及如何覆盖Moodle正在使用的图像。首先是关于Moodle中的图像，
- 你想在你的主题中使用的图像需要定位在你的主题的图片目录中。
- 您可以在主题的像素目录中使用子目录。
- Moodle核心使用的图像位于Moodle的pix目录中。
- 模块、模块和其他插件也应该将它们的图像存储在pix目录中。
所以首先要利用你自己的图像。让我们假设您已经在主题的pix目录中添加了两个图像文件。
- /theme/yourthemename/pix/imageone.jpg
- /theme/yourthemename/pix/subdir/imagetwo.png
注意，其中一个图像是JPEG图像，第二个是PNG图像。另外，第二个映像位于子目录中。
下面的代码片段演示了如何在布局文件中使用图像，以便它们可以被布局模板插入。主题/ theme/yourtheme/layout/somelayout.php
...
$templatecontext = [
...
$imageone => $OUTPUT->pix_url('imageone', 'theme'),
$imagetwo => $OUTPUT->pix_url('subdir/imagetwo', 'theme'),
...
];
echo $OUTPUT->render_from_template('theme_yourtheme/somelayout', $templatecontext);我们使用Moodle输出库的一种方法来生成指向图像的URL。函数如何工作并不重要，重要的是我们使用它，因为它允许在Moodle中的图像可以被覆盖。不要包含镜像文件扩展名。Moodle会自动计算出它，如果你包含它，它将不起作用。
theme/yourtheme/templates/somelayout.mustache
...
<img src="{
{
{imageone}}}" alt="Please give your image alt text or set the role to presentation" width="50" height="50">
<img src="{
{
{imagetwo}}}" alt="Please give your image alt text or set the role to presentation" width="50" height="50">
...下面是如何使用CSS、SCSS或Less中的图像作为背景图像。
.divone {
background-image: url([[pix:theme|imageone]]);
}
.divtwo {
background-image: url([[pix:theme|subdir/imagetwo]]);
}在这种情况下，我们必须使用Moodle寻找的一些特殊符号。每当Moodle分发一个CSS文件时，它首先搜索所有的标签，并用所需的替换它们。
关于上述两种情况需要注意的最后一点是，我们在任何时候都不包含图像文件扩展名。这样做的原因将我们引入下一个主题，即如何覆盖图像。
在一个主题中，你可以很容易地覆盖Moodle中的任何标准图像，只要简单地将替换图像添加到主题的pix目录中，该目录与Moodle中的子目录结构相同。例如，我们想要覆盖以下两个图像:
- /pix/moodlelogo.gif
- /pix/i/user.gif
我们只需要在以下位置将替换图像添加到主题中
- /theme/themename/pix_core/moodlelogo.gif
- /theme/themename/pix_core/i/user.gif
注意，我们已经在主题中创建了一个pix_core目录。对于像chat这样的特定活动模块，我们需要一个pix_plugins/mod/chat目录。这个目录是“pix_plugins”，然后是插件类型(mod)，然后是插件名称(chat)。
现在，另一件很酷的事情是，Moodle不仅寻找相同图像类型(jpg, gif等)的替换，而且还寻找任何图像格式的替换。这就是为什么上面在处理图像时，我们从不指定图像文件扩展名。这意味着下面的方法也会起作用:
- /theme/themename/pix_core/moodlelogo.png
- /theme/themename/pix_core/i/user.bmp
要了解更详细的工作原理，请参见“ Using images in a theme.”页面。
附录 A
Theme options
| Setting 设置 | Effect 影响 |
|---|---|
| $THEME->blockrtlmanipulations | Allows the theme to manipulate how the blocks are displayed in a right-to-left language. Not recommended since we automatically flip CSS for rtl. 允许主题操作块如何以从右到左的语言显示。不推荐，因为我们会自动为rtl翻转CSS。 |
| $THEME->csspostprocess | Allows the user to provide the name of a function that all CSS should be passed to before being delivered. 允许用户提供一个函数的名称，所有CSS在交付之前都应该传递给这个函数。 |
| $THEME->csstreepostprocessor (Since 3.2) | Allows the user to provide the name of a function that can perform manipulations on an in-memory representation of the CSS tree. Some useful manipulations are available such as the "theme_boost\autoprefixer" which will automatically add vendor prefixes to all CSS that requires them. 允许用户提供一个函数的名称，该函数可以对CSS树的内存表示执行操作。可以使用一些有用的操作，如“theme_boost autoprefixer”，它将自动将供应商前缀添加到所有需要它们的CSS中。 |
| $THEME->doctype | The doctype of the served documents. 所服务文档的文档类型。 |
| $THEME->editor_sheets | An array of stylesheets to include just within the body of the TinyMCE text editor. This is required if you want content to resemble its final appearance in the page, while it is being edited in the text editor. 仅包含在TinyMCE文本编辑器主体中的样式表数组。如果您希望在文本编辑器中编辑内容时，内容与页面中的最终外观相似，那么这是必需的。 |
| $THEME->enablecourseajax | If set to false the course AJAX features will be disabled. 如果设置为false，课程AJAX特性将被禁用。 |
| $THEME->enable_dock | If set to true the side dock is enabled for blocks. 如果设置为true，则对块启用侧坞。 |
| $THEME->prescsscallback | The name of a function that will return some SCSS code to inject at the beginning of the SCSS file specified in $THEME->scss. (Since 3.2) 一个函数的名称，该函数将返回一些SCSS代码以注入到在$THEME-> SCSS中指定的SCSS文件的开头。(自3.2) |
| $THEME->extrascsscallback | The name of a function that will return some SCSS code to inject at the end of the SCSS file specified in $THEME->scss. (Since 3.2) 一个函数的名称，该函数将返回一些SCSS代码以注入到在$THEME-> SCSS中指定的SCSS文件的末尾。(自3.2) |
| $THEME->extralesscallback | The name of a function that will return some LESS code to inject at the end of the LESS file specified in $THEME->lessfile. (Since 2.7) 一个函数的名称，它将返回一些LESS代码以注入到$THEME->lessfile中指定的LESS文件的末尾。(自2.7) |
| $THEME->hidefromselector | Used to hide a theme from the theme selector (unless theme designer mode is on). Accepts true or false. 用于从主题选择器中隐藏主题(除非主题设计器模式开启)。接受真或假。 |
| $THEME->javascripts | An array containing the names of JavaScript files located in /javascript/ to include in the theme. (gets included in the head). This setting should no longer be used - please use AMD Javascript Modules instead. 一个数组，包含位于/ JavaScript /中要包含在主题中的JavaScript文件的名称。(包含在头部)。这个设置应该不再使用-请使用AMD的Javascript模块代替。 |
| $THEME->javascripts_footer | As above but will be included in the page footer. This setting should no longer be used - please use AMD Javascript Modules instead. 如上文所述，但将包括在页脚。这个设置应该不再使用-请使用AMD的Javascript模块代替。 |
| $THEME->layouts | An array setting the layouts for the theme 用于设置主题布局的数组 |
| $THEME->lessfile | The name of a LESS file in the theme's less/ folder to compile on the fly. Sheets with the same name will be ignored. (Since 2.7) 主题的LESS /文件夹中要动态编译的LESS文件的名称。具有相同名称的床单将被忽略。(自2.7) |
| $THEME->lessvariablescallback | The name of a function that will modify some LESS variables before compiling the LESS file specified in $THEME->lessfile. (Since 2.7) 在编译$THEME->lessfile中指定的LESS文件之前修改一些LESS变量的函数名。(自2.7) |
| $THEME->scss | The name of a SCSS file in the theme's scss/ folder to compile on the fly. Sheets with the same name will be ignored. This can also be a function which returns SCSS, in which case all import paths will be relative to the scss folder in this theme or any of it's parents. (Since 3.2) 主题的SCSS /文件夹中要动态编译的SCSS文件的名称。具有相同名称的床单将被忽略。这也可以是一个返回SCSS的函数，在这种情况下，所有的导入路径将相对于这个主题中的SCSS文件夹或它的任何父目录。(自3.2) |
| $THEME->name | Name of the theme. Most likely the name of the directory in which this file resides. 主题名称。很可能是该文件所在目录的名称。 |
| $THEME->parents | An array of themes to inherit from. If the theme you inherit from inherits from a parent as well, you need to indicate the grand parent here too. 一系列可以继承的主题。如果您继承的主题也继承自父主题，那么您还需要在这里指明祖父母。 |
| $THEME->parents_exclude_javascripts | An array of JavaScript files NOT to inherit from the themes parents 不从父主题继承的JavaScript文件数组 |
| $THEME->parents_exclude_sheets | An array of stylesheets not to inherit from the themes parents 不从主题父表继承的样式表数组 |
| $THEME->plugins_exclude_sheets | An array of plugin sheets to ignore and not include. 一个可以忽略且不包含的插件表数组。 |
| $THEME->renderfactory | Sets a custom render factory to use with the theme, used when working with custom renderers. You most likely want this set to "theme_overridden_renderer_factory". 设置与主题一起使用的自定义呈现工厂，在使用自定义呈现器时使用。您很可能希望将此设置为"theme_overridden_renderer_factory"。 |
| $THEME->sheets | An array of stylesheets to include for this theme. Should be located in the theme's style directory. Not required if using less or scss. 这个主题要包含的样式表数组。应该位于主题的样式目录中。不需要如果使用较少或scss。 |
| $THEME->yuicssmodules | An array of YUI CSS modules to be included. This setting should probably be set to to prevent and YUI CSS being included. 一个包含YUI CSS模块的数组。这个设置应该设置为防止YUI CSS被包含。 |
| $THEME->undeletableblocktypes | An array of Block types that must exist on all pages in this theme or this theme will be unusable. If a block type listed here is missing when a page is loaded - it will be auto-created (but only shown for themes that require it). 必须存在于此主题的所有页面上的Block类型数组，否则此主题将无法使用。如果在加载页面时缺少这里列出的块类型-它将自动创建(但只显示需要它的主题)。 |
| $THEME->addblockposition | BLOCK_ADDBLOCK_POSITION_FLATNAV, BLOCK_ADDBLOCK_POSITION_DEFAULT or BLOCK_ADDBLOCK_POSITION_CUSTOM. Defines where to put the "Add a block" controls when editing is enabled. BLOCK_ADDBLOCK_POSITION_FLATNAV, BLOCK_ADDBLOCK_POSITION_DEFAULT 或者 BLOCK_ADDBLOCK_POSITION_CUSTOM. 定义启用编辑时将“添加块”控件放在何处。 |
The different layouts as of 21st April 2013
不同的布局截至2013年4月21日
| Layout | Purpose |
|---|---|
| base | Most backwards compatible layout without the blocks - this is the layout used by default. 大多数向后兼容的布局没有块-这是默认使用的布局。 |
| standard | Standard layout with blocks, this is recommended for most pages with general information. 标准的块布局，这是推荐大多数页面的一般信息。 |
| course | Main course page. 主要课程页面。 |
| coursecategory | Use for browsing through course categories. 用于浏览课程类别。 |
| incourse | Default layout while browsing a course, typical for modules. 浏览课程时的默认布局，典型的模块。 |
| frontpage | The site home page. 网站主页。 |
| admin | Administration pages and scripts. 管理页面和脚本。 |
| mydashboard | My dashboard page. 我的仪表板页面。 |
| mypublic | My public page. |
| login | The login page. 我的公共页面。 |
| popup | Pages that appear in pop-up windows - no navigation, no blocks, no header. 页面出现在弹出窗口-没有导航，没有块，没有标题。 |
| frametop | Used for legacy frame layouts only. No blocks and minimal footer. 仅用于遗留框架布局。没有块和最小的页脚。 |
| embedded | Used for embedded pages, like iframe/object embedded in moodleform - it needs as much space as possible 用于嵌入式页面，如iframe/对象嵌入在moodleform -它需要尽可能多的空间 |
| maintenance | Used during upgrade and install. This must not have any blocks, and it is a good idea if it does not have links to other places - for example there should not be a home link in the footer. 在升级和安装时使用。这必须没有任何块，这是一个好主意，如果它没有链接到其他地方-例如，不应该有一个主页链接在页脚。 |
| Used when the page is being displayed specifically for printing. 当页面显示为专门用于打印时使用。 |
|
| redirect | Used when a redirection is occurring 在发生重定向时使用 |
| report | Used for reports. 用于报告。 |
| secure | Used for safebrowser and securewindow. 用于安全浏览器和安全窗口。 |