您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
magento2 模板设计 二（margin）
发布时间：2023-06-26 13:44:43编辑：雪饮阅读（）
-
词汇
banner （网页上的）横幅广告
slider 浮动块，滑动块
fount 源泉；墨水缸
Font 字体，字型（=fount）
Awesome 非常棒的，极佳的
fastly 快速地
Premier 首要的，最好的
partner （跳舞、玩游戏等的）搭档，同伴
Partners 伙伴（partner 的复数形式）
STARTER 参赛人，参赛的马（或汽车等）
KIT 成套工具，成套设备
Responsive 反应迅速的，积极反应的
Purchase <正式>购买，采购
jewelry 珠宝，首饰
fonts 字体（font 的复数）
Embed （使）嵌入， 把……插入
few 一些，几个
awesomely 赫然；惊叹地
swear 咒骂，诅咒
INFORTIS 信息
Flex 绷紧（肌肉）使之突起
carousel （机场的）行李传送带
Owl 鸮，猫头鹰
margin 页边空白；差额
任务
1、Font Awesome字体的使用
使用方式1（自己琢磨出来的，仅供参考）：
到官网下载web使用方式的包
https://use.fontawesome.com/releases/v6.4.0/fontawesome-free-6.4.0-web.zip
然后传统项目引入如
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/all.css" rel="stylesheet">
<script src="js/all.js"></script>
<title>Document</title>
</head>
使用方式2：
官方比较推荐的
进入官网首页点击
Start for Free
进入第二个页面在这里输入你的邮箱
Enter your email to get started with a free Kit!
然后点击这个按钮
Send kKit Embed code
后面跟着流程走
最后你会得到类似这样的
<script src="https://kit.fontawesome.com/4eb20edc9a.js" crossorigin="anonymous"></script>
放到html的head部分即可
2、magento2首页的覆写
首页的模板（这里说的是模板，不是布局）首先在D:\phpstudy_pro\WWW\www.xymegento.com\app\code\Magento\Theme\view\base\templates\root.phtml路径中
那么覆写路径如
D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Magento\blank2\Magento_Theme\templates\root.phtml
3、在magento2中使用Font Awesome字体
方法1：
首先贴出chatgpt给的一种方法：
要在Magento2中使用Font Awesome，可以按照以下步骤进行操作：
在Magento2主题的目录下创建一个名为“web”的文件夹，然后在该文件夹下创建一个名为“fonts”的文件夹。
下载Font Awesome的最新版本，并将其解压缩到“fonts”文件夹中。
在Magento2主题的目录下创建一个名为“requirejs-config.js”的文件，并将以下代码添加到该文件中：
复制var config = {
paths: {
'fontawesome': 'Magento_Theme/js/fontawesome-all.min'
},
shim: {
'fontawesome': {
deps: ['jquery']
}
}
};
在Magento2主题的目录下创建一个名为“default.xml”的文件，并将以下代码添加到该文件中：
复制<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Magento_Theme::css/custom.css"/>
</head>
<body>
<referenceContainer name="before.body.end">
<block class="Magento\Framework\View\Element\Template" name="fontawesome" template="Magento_Theme::fontawesome.phtml"/>
</referenceContainer>
</body>
</page>
在Magento2主题的目录下创建一个名为“fontawesome.phtml”的文件，并将以下代码添加到该文件中：
复制<link rel="stylesheet" type="text/css" href="<?php echo $this->getViewFileUrl('css/fontawesome-all.min.css'); ?>">
在Magento2主题的目录下创建一个名为“custom.css”的文件，并在其中添加自定义CSS样式。
最后，在Magento2后台的“Content > Configuration”页面中选择您的主题，并在“HTML Head”选项卡下将“Use Custom HTML Head”选项设置为“YES”。
这样，您就可以在Magento2中使用Font Awesome了。
方法2：
我尝试过这种方法，就到自定义css样式哪里，我就没有折腾了，感觉有点怪怪的。
我自己瞎琢磨了一个我感觉挺好的方法
上面“magento2首页的覆写”的root.phtml中如
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<!doctype html>
<html <?php /* @escapeNotVerified */ echo $htmlAttributes ?>>
<head <?php /* @escapeNotVerified */ echo $headAttributes ?>>
<?php /* @escapeNotVerified */ echo $requireJs ?>
<?php /* @escapeNotVerified */ echo $headContent ?>
<?php /* @escapeNotVerified */ echo $headAdditional ?>
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v6.4.0/css/free.min.css?token=4eb20edc9a" />
<script src="https://kit.fontawesome.com/4eb20edc9a.js" crossorigin="anonymous"></script>
</head>
<body data-container="body" data-mage-init='{"loaderAjax": {}, "loader": { "icon": "<?php /* @escapeNotVerified */ echo $loaderIcon; ?>"}}' <?php /* @escapeNotVerified */ echo $bodyAttributes ?>>
<?php /* @escapeNotVerified */ echo $layoutContent ?>
<div>
<div>下面是图标了2</div>
<div>
<!-- solid style -->
<i class="fa-solid fa-user"></i>
<!-- regular style -->
<i class="fa-regular fa-user"></i>
<!-- light style -->
<i class="fa-light fa-user"></i>
<!-- duotone style -->
<i class="fa-duotone fa-user"></i>
<!-- all new thin style -->
<i class="fa-thin fa-user"></i>
<!-- all new sharp solid style -->
<i class="fa-sharp fa-solid fa-user"></i>
<!-- all new sharp regular style -->
<i class="fa-sharp fa-regular fa-user"></i>
<!-- all new sharp light style -->
<i class="fa-sharp fa-light fa-user"></i>
<!--brand icon-->
<i class="fa-brands fa-github-square"></i>
</div>
</div>
</body>
</html>
这里的重点其实就是head中末尾我添加的
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v6.4.0/css/free.min.css?token=4eb20edc9a" />
<script src="https://kit.fontawesome.com/4eb20edc9a.js" crossorigin="anonymous"></script>
以及body中我添加的
<div>
<div>下面是图标了2</div>
<div>
<!-- solid style -->
<i class="fa-solid fa-user"></i>
<!-- regular style -->
<i class="fa-regular fa-user"></i>
<!-- light style -->
<i class="fa-light fa-user"></i>
<!-- duotone style -->
<i class="fa-duotone fa-user"></i>
<!-- all new thin style -->
<i class="fa-thin fa-user"></i>
<!-- all new sharp solid style -->
<i class="fa-sharp fa-solid fa-user"></i>
<!-- all new sharp regular style -->
<i class="fa-sharp fa-regular fa-user"></i>
<!-- all new sharp light style -->
<i class="fa-sharp fa-light fa-user"></i>
<!--brand icon-->
<i class="fa-brands fa-github-square"></i>
</div>
</div>
最重要的是
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v6.4.0/css/free.min.css?token=4eb20edc9a" />
因为我发现可能只是添加
<script src="https://kit.fontawesome.com/4eb20edc9a.js" crossorigin="anonymous"></script>
这个在原生web项目中或许有用，magento2中貌似阻止了一些它的行为，原生web项目中这个js还额外加载了
https://ka-f.fontawesome.com/releases/v6.4.0/css/free.min.css?token=4eb20edc9a
这个css以及另外两个css，由于另外两个我怀疑是作用不是特别大，这个比较优先加载的，所以我就直接只拿了这个css
过来单独加载。
当然这个也只是我自己琢磨出来的，仅供参考。
4、学会安装插件，以slider banner为例
关于这个任务我之前貌似做过，因为这里已经有Banner Slider
我用的是
Bannerslider-Magento2-1.7.0.zip
老师的好像是Banners-Free Responsive Banner Slider
具体是不是同一个，这里就不纠结了。
其实应该是同一个，毕竟后面调用方式以及后台操作方式都是差不多的。
5、slider banner的调用
首先我尝试的是在上面的这个root.phtml中调用
在body区域无论
<?php /* @escapeNotVerified */ echo $layoutContent ?>
这句的前面，还是这句的后面
调用
<?php $this->getLayout()->createBlock("Magestore\Bannerslider\Block\SliderItem")->setSliderId("1")->toHtml(); ?>
都无法，成功，这里setSliderId接收的参数无论是int还是string都是不行。
那么我猜测应该是在这个$layoutContent变量内部调用才可以，于是我这里放弃了
<?php $this->getLayout()->createBlock("Magestore\Bannerslider\Block\SliderItem")->setSliderId("1")->toHtml(); ?>
这种调用方式。
关于slider的调用方式，可以参考CONTENT>Banner Slider>Settings里面的
于是我就换成在布局文件中调用的方式，如这样的
<block class="Magestore\Bannerslider\Block\SliderItem">
<action method="setSliderId">
<argument name="sliderId" xsi:type="string">1</argument>
</action>
</block>
那么默认首页布局文件路径如
D:\phpstudy_pro\WWW\www.xymegento.com\app\code\Magento\Theme\view\frontend\layout\default.xml
在这里搜索
<referenceContainer name="main">
找到这个标签里面找到合适的位置添加上这个在布局文件中调用的调用方式的代码后如
<referenceContainer name="main">
<container name="content.top" label="Main Content Top"/>
<container name="content" label="Main Content Area"/>
<block class="Magestore\Bannerslider\Block\SliderItem">
<action method="setSliderId">
<argument name="sliderId" xsi:type="string">1</argument>
</action>
</block>
<container name="content.aside" label="Main Content Aside"/>
<container name="content.bottom" label="Main Content Bottom"/>
</referenceContainer>
6、D:\phpstudy_pro\WWW\www.xymegento.com\app\code\Magento\Theme\view\frontend\layout\default.xml的覆盖
还是和之前一样，不建议直接动原始的文件，直接在咱们的布局中覆写然后再修改。
那么覆盖的话，就是覆盖路径如
D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Magento\blank2\Magento_Theme\layout\default.xml
7、调整slider
默认的slider效果并不是我们常见的那种，左右各一个箭头，然后中间一张图片。我们在Slider Information哪里配置Select Slider Mode为FlexSlider 1即可
8、slider banner修改
就是说虽然7中实现了slider banner的正常效果，但是可以发现左右两侧的箭头只有鼠标悬停在左右两侧时候才出现，如果想要一直出现，则可以在上面的覆写的这个
root.phtml中新增样式如
<style>
.flex-direction-nav a{
opacity: 1 !important;
}
</style>
9、首页添加自义定内容
假如说我要在咱们这个slider banner区域下面添加一个内容，但是我又要在刚才覆写的default.xml布局文件中添加以block的方式。
并且block是非动态block，那么我可以这样做。
<referenceContainer name="main">
<container name="content.top" label="Main Content Top"/>
<container name="content" label="Main Content Area"/>
<block class="Magestore\Bannerslider\Block\SliderItem">
<action method="setSliderId">
<argument name="sliderId" xsi:type="string">2</argument>
</action>
</block>
<block class="Magento\Framework\View\Element\Template" name="home.page" template="Magento_Theme::homepage.phtml"/>
<container name="content.aside" label="Main Content Aside"/>
<container name="content.bottom" label="Main Content Bottom"/>
</referenceContainer>
这里
<block class="Magento\Framework\View\Element\Template" name="home.page" template="Magento_Theme::homepage.phtml"/>
就是我添加的那个新的block，这里Magento\Framework\View\Element\Template是添加模板template的也是就是phtml的固定语法
template参数里面Magento_Theme::部分也是固定的，后面好像可以添加文件夹名称，或者直接文件名称，那么其它情况我这里不多加纠结了
这里我这个参数就是直接的一个文件名称，这种路径就是说在如
D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Magento\blank2\Magento_Theme\templates路径中要有
homepage.phtml
那么我这里homepage.phtml的内容如
<div>this is home page</div>
就是这样简单了。
10、了解下Owl carousel
官网是http://owlcarousel2.github.io/OwlCarousel2/index.html
需要的依赖是jquery1.8.3为其最低支持版本
下载地址
https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip
那么下载下来后解压并使用一个test.html实例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="dist/assets/owl.theme.default.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="dist/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});
</script>
</head>
<body>
<div class="owl-carousel">
<div> Your Content1 </div>
<div> Your Content 2</div>
<div> Your Content 3</div>
<div> Your Content 4</div>
<div> Your Content 5</div>
<div> Your Content 6</div>
<div> Your Content 7</div>
<div> Your Content 8</div>
<div> Your Content 9</div>
<div> Your Content 10</div>
</div>
</body>
</html>
这个实例中
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
这个responsive对象参数在这里解释下
这个参数是用来设置响应式布局的，根据不同的屏幕宽度来显示不同数量的轮播项。其中，0表示屏幕宽度小于等于600px时，显示1个轮播项；600表示屏幕宽度大于600px且小于等于1000px时，显示3个轮播项；1000表示屏幕宽度大于1000px时，显示5个轮播项。这样可以让轮播图在不同的设备上都能够有良好的显示效果。
11、slider banner修改
上面“8、slider banner修改”是我自己觉得最简单的方式，老师这里是修改下面这个路径上的
D:\phpstudy_pro\WWW\www.xymegento.com\app\code\Magestore\Bannerslider\view\frontend\templates\slider\flexslider.phtml
其实我觉得实际开发中，我肯定更喜欢用上面那种方式节约成本。
所以这里我只是说如果真有必要修改D:\phpstudy_pro\WWW\www.xymegento.com\app\code\Magestore\Bannerslider\view\frontend\templates\slider\flexslider.phtml的时候，那么这里如何覆盖
D:\phpstudy_pro\WWW\www.xymegento.com\app\code\Magestore\Bannerslider\view\frontend\templates\slider\flexslider.phtml
这个的方法。
要覆盖D:\phpstudy_pro\WWW\www.xymegento.com\app\code\Magestore\Bannerslider\view\frontend\templates\slider\flexslider.phtml文件
你需要新的文件路径为
D:\phpstudy_pro\WWW\www.xymegento.com\app\design\frontend\Magento\blank2\Magestore_Bannerslider\templates\slider\flexslider.phtml
关键字词：margin
相关文章
-
无相关信息