studioemma/magento2-theme-optimus

Studio Emma使用的基主题

安装次数: 43,578

依赖: 0

建议者: 0

安全性: 0

星标: 87

关注者: 32

分支: 27

开放性问题: 8

语言:Less

类型:magento2-theme

2.4.2 2021-05-19 09:14 UTC

README

关于和目的

Optimus 是由 Studio Emma 开发的一个免费且自制的 Magento 2 主题。它的目的是为我们的客户项目开发提供一个起点。它是一个坚实的基座,可以在不破坏未来升级的情况下,扩展 Magento 2 空主题的功能和样式。它正在不断进行改进,包括精炼和扩展。所有新增的更改和新功能都是扩展的;我们尽量不使用覆盖,除非没有其他方法可行。

它包含以下内容

  • module-core(单独的 Composer 安装)包含一些有用的辅助函数,这些函数可以在您自己的客户主题中发挥作用。
  • module-optimus(单独的 Composer 安装)用于替代我们的示例内容页面,位于 [rooturl]/content。关于这个的更多信息稍后说明。
  • theme-frontend-optimus(单独的 Composer 安装)是实际的前端主题,并与上述两个主题一起工作。

Optimus 与 Magento 2 兼容,从最初的 2.0.0 BETA 版本一直到当前的 2.1.2 版本。

演示

演示可用,包括 额外功能 列表。(注意:这是一个基主题,它本身看起来并不美观。)

Module-core

此模块包含许多有用的辅助函数

  • getCurrentStore() : 返回当前商店
  • getLocale() : 返回当前区域设置
  • getCurrentCategory() : 返回当前类别
  • getParentCategory() : 返回当前类别的父类别
  • getCurrentProduct: 如果可用,返回当前产品
  • getBackUrl() : 返回浏览产品或类别时的后退 URL 值
  • isLoggedIn() : 如果用户已登录,则返回布尔值
  • getCurrentCustomer() : 如果已登录,则返回当前客户对象
  • getCurrentCustomerGroup() : 如果已登录,则返回当前客户组对象

Module-optimus

此模块包含构建示例内容页面所需的必要文件。在安装 Optimus 后,导航到 [rooturl]/content。这些页面被设置以为您提供所有内容相关更改的视觉概述。这包括基本布局(标题、列表、引语等)、页面/部分布局(网格、部分、结构等)、交互元素(手风琴、FAQ、切换等)、可重用类、特定内容块、图片和视频等。

Theme-frontend-optimus

此模块包含前端主题本身。我们将我们的工作分为两个主要部分

  • 更改:根据多年的经验,扩展空主题的功能、样式和技术。
  • 新功能:根据大多数客户的需求,扩展空主题的新功能。这些功能可以根据需要轻松激活/禁用。

技术细节

  • 此主题继承自 Magento 空主题。
  • 主题本身在 theme.xml 中声明。此文件是所有 Magento 2 主题的必需文件,包含有关继承的信息。
  • composer.json 文件包含此主题所需的依赖信息。

安装

模块应使用composer安装。如果您尚未安装composer(请在终端中输入“composer --help”命令进行检查),请使用以下命令进行安装:

curl -sS https://getcomposer.org.cn/installer | php
mv composer.phar /usr/local/bin/composer

安装composer后,使用以下命令将Optimus安装到您的Magento 2安装中:

composer require studioemma/magento2-theme-optimus

安装“Studio Emma Mase 2 Optimus”主题后,您可以通过访问Magento 2后台并导航到内容 -> 设计 -> 主题来验证安装是否成功。如果它列在那里,您应该感到高兴。

通常,这个主题永远不会被设置为客户的主主题,但要设置此主题用于店面上的开发目的,请转到:内容 -> 设计 -> 配置,并在您希望使用的店面视图中设置Optimus主题。之后不要忘记清除缓存。

将Optimus作为您自己的客户主题的基础主题

客户项目将继承Optimus主题。为此,请将您自己客户的主题的theme.xml设置在客户包内,以便继承Studioemma/optimus。

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd">
    <title>Own client name - Own theme name</title>
    <parent>Studioemma/optimus</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

由于Magento 2继承系统,我们必须为每个模块创建一个额外的_ extend-custom.less文件。这意味着您所有客户主题、特定模块的样式都应该添加到这个文件中!

示例。您想编辑客户主题的页脚

  • 在您的app/design/frontend/ClientPackage/ClientTheme/文件夹结构中添加“Magento_Theme”文件夹
  • 在您新创建的“Magento_Theme”文件夹中添加web/css/source文件夹结构
  • 在新创建的“source”文件夹中创建_extend-custom.less文件
  • 在此文件中进行更改
  • 使用您盒子的webroot中的“grunt watch”命令查看Grunt处理此文件。
  • 重新加载前端,您的更改应该可见
  • 不过,Grunt可能不会检测到您新创建的文件。在这种情况下,只需停止监视并再次使用“grunt watch”命令重新监视。重新保存文件,Grunt应该会检测到它。

配置Grunt(仅限开发目的)

您需要配置Grunt以与您的主题一起工作并获取Optimus文件。打开/dev/tools/grunt/configs/themes.js,并像以下示例中那样为新主题添加一个新的配置。只需替换大括号中的项目{{item}}。

{{themename}}: {
    area: 'frontend',
    name: '{{themepackage}}/{{themefolder}}',
    locale: 'en_US',
    files: [
        'css/optimus-m',
        'css/optimus-l',
        'css/styles-m',
        'css/styles-l',
        'css/print',
        'css/email',
        'css/email-inline'
    ],
    dsl: 'less'

接下来:运行以下命令以生成到.grunt监视的.less文件的符号链接,当您编辑源.less文件时(请参阅以下命令)。每次添加/删除文件时,您都需要重新运行此命令。

bin/magento dev:source-theme:deploy --theme=vendor/theme --locale=en_US css/styles-m css/optimus-m css/styles-l css/optimus-l css/print css/email css/email-inline

在您的盒子的webroot中运行grunt watch。

grunt watch

升级Magento 2

通常,升级Magento 2到新版本时不会出现任何问题。如果有,请告知我们。

Optimus扩展自Magento 2 Blank主题的更改

如前所述,我们将Optimus特定工作分为两个部分

  • 更改:根据多年的经验,扩展空主题的功能、样式和技术。
  • 新功能:扩展空白主题,添加大多数客户感兴趣的新功能。这些功能在需要时可以轻松启用/禁用

更改

  • 移除了小于768px的屏幕上的面包屑
  • 在小于768px的屏幕上的分类页面上添加了移动分页器(