现在绝大多数独立站运营者都会去选择使用第三方主题,而作为开发人员,必须掌握如何创建主题。那如何创建自定义主题呢?接下来,Liux就手把手教大家如何创建自定义主题。

1.创建一个包含主题的文件夹

规则:Vendor_Theme
示例:创建一个名为“ Liuxds”的文件夹,路径:app\design\frontend

2.创建一个包含文件和功能文件夹<theme>的示例文件夹

在文件夹“ Liuxds”中创建新文件夹,并将其命名为 mytheme

3.创建文件主题<theme.xml>

<!--
/**
 * Copyright © 2020 Liuxds. All rights reserved.
 */
-->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Liuxds Sample Theme</title>
<parent>Magento/luma</parent>
<media>
<preview_image>media/preview.png</preview_image>
</media>
</theme>

4.创建注册文件主题<registration.php>

<?php
/**
 * Copyright © 2020 Liuxds. All rights reserved.
 */

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Liuxds/mytheme',
    __DIR__
);

5.为主题创建<composer.json>

{
"name": "liuxds/sample-theme",
"description": "Liuxds Customer Theme",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/theme-frontend-luma": "~100.0",
"magento/framework": "~100.0"
},
"type": "magento2-theme",
"version": "1.0.0",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [ "registration.php" ]
}
}

6.创建<media>文件夹

在模板根目录创建名称为“ media”的 文件夹,并在其中放置图像preview.jpg,该图像为主题预览图

7.创建<web>文件夹

  • 在里面创建 css 文件夹
  • 创建images文件夹来放置图像
    • 在此文件夹中,我们将图像“ logo.png”放置在=>内,这是主题的徽标
  • 创建包含所有javascript文件的 js 文件夹

8.创建一个文件夹以连接布局主题<Magento_Theme>

  • 创建文件夹<layout>
  • 在layout下创建文件布局<default.xml>
<?xml version="1.0"?>
<!--
/**
 * Copyright © 2020 Liuxds. All rights reserved.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<!--这里是重写Logo,用images目录中的logo替换原来父级主题的logo文件-->
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.png</argument>
</arguments>
</referenceBlock>
</body>
</page>

完成以上步骤,会得到如下结构的目录:

打开网站后台,进入Content—Themes会看到新建的主题

接下来设置前端主题:

然后,进入Content > Design > Configuration,点击编辑一个选择的store或者website。选择我们的主题(应用主题),然后点击保存。

最后,当主题被应用时请刷新页面。要刷新缓存,到System > Cache Management,更新所有无效的缓存类型。

也可以使用bin/magento cache:clean 和bin/magento cache:flush进行刷新

到此,创建自定义主题已完成,如有纰漏,还望指正。

需要了解更多的,可以加我Q联系,随时在线。

原创文章,禁止转载。

发表评论

电子邮件地址不会被公开。 必填项已用*标注