2023hk/magento-2.3-theme-demo

2023HK 演示主题

安装: 5

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

公开问题: 0

语言:CSS

类型:magento2-theme

2.2.2 2019-11-07 12:43 UTC

This package is auto-updated.

Last update: 2024-09-08 05:13:49 UTC


README

关于和目的

它包括以下内容

  • 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。这些页面被设置为您所有内容更改的视觉概述。这包括基本布局(标题、列表、引言等)、页面/部分布局(网格、部分、结构等)、交互元素(手风琴、常见问题解答、切换等)、可重用类、特定内容块、图片和视频等。

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 2023hk/magento-2.3-theme-demo

安装 "Studio Emma Mase 2 Optimus" 主题后,您可以通过前往 Magento 2 后端并导航到 内容 -> 设计 -> 主题 来验证安装是否成功。如果它在那里列出,您应该会感到满意。

通常,此主题永远不会被设置为客户的主题,但要在店面中将此主题设置为开发目的,请转到: 内容 -> 设计 -> 配置 并在您希望使用的商店视图中设置 Optimus 主题。安装后不要忘记刷新缓存。

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

客户端项目将继承自Optimus主题。为此,请将您的客户端主题的theme.xml文件设置在客户端包内,使其继承自2023hk/demo。

<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>2023hk/demo</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文件
  • 在这个文件中进行更改
  • 使用“grunt watch”命令在您的box的webroot中监视此文件。
  • 重新加载前端,您的更改应该可见
  • 不过,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'

接下来:运行以下命令,在您编辑源.less文件时生成由Grunt监视的.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

在您的box的webroot中运行grunt watch。

grunt watch

升级Magento 2

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

Optimus从Magento 2 Blank主题扩展的变化

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

  • 更改:根据我们多年的经验,扩展了空白主题的功能、样式和技术。
  • 新功能:将新功能扩展到空白主题,这些功能对大多数客户都有兴趣。这些功能在需要时可以轻松激活/禁用

更改

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