我们学习magento已有很长时间了,但是我还没有向您介绍css和javascript。 在此博客中,我们将看到如何在magento中使用css和js。
CSS
首先让我们设计页面的样式。 我们将样式添加到添加和编辑页面。 但是在此之前,我们先添加一些类和div块,以便我们可以将它们定位到css文件中。
让我们编辑添加页面,view/frontend/templates/add.phtml
<div class="blog-container">
<form class="blog-form" method="post" action=<?php echo $block->getUrl('blog/manage/save'); ?> data-mage-init='{"validation": {}}'>
<div class="blog-form-field-container">
<span class="blog-form-field-label"><?=__('Title')?>:</span>
<input type="text" name="title" class="required-entry blog-form-field"/>
</div>
<div class="blog-form-field-container">
<span class="blog-form-field-label"><?=__('Content')?>:</span>
<textarea name="content" class="required-entry validate-no-html-tags blog-form-field"></textarea>
</div>
<div class="blog-form-action-container">
<button type="submit" class="blog-form-action"><?=__('Submit')?></button>
</div>
</form>
</div>
如您所见,在这里,我们以漂亮的html格式添加了所有内容,并向每个元素添加了类。 而且我们还使静态内容可翻译.
同样,我们将需要更改编辑页面,view / frontend / templates / edit.phtml
<?php
$blog = $block->getBlog();
?>
<div class="blog-container">
<form class="blog-form" method="post" action=<?php echo $block->getUrl('blog/manage/save'); ?> data-mage-init='{"validation": {}}'>
<input type="hidden" name="id" value="<?= $blog->getId()?>"/>
<div class="blog-form-field-container">
<span class="blog-form-field-label"><?=__('Title')?>:</span>
<input type="text" name="title" class="required-entry blog-form-field" value="<?= $blog->getTitle(); ?>"/>
</div>
<div class="blog-form-field-container">
<span class="blog-form-field-label"><?=__('Content')?>:</span>
<textarea name="content" class="required-entry validate-no-html-tags blog-form-field" rows="10"><?= $blog->getContent(); ?></textarea>
</div>
<div class="blog-form-action-container">
<button type="submit" class="blog-form-action"><?=__('Submit')?></button>
</div>
</form>
</div>
现在我们必须创建样式文件。 所有的css和js文件都在view / {areacode} / web文件夹下创建。 按照惯例,请在Web文件夹下为js和css文件创建单独的文件夹。 另外,建议仅为一个模块创建一个CSS文件。
因此,我们将css文件创建为view/frontend/web/css/style.css
.blog-form .blog-form-field-container {
margin: 15px auto;
}
.blog-form .blog-form-action-container {
text-align: center;
}
.blog-form .blog-form-action-container .blog-form-action {
min-width: 150px;
padding: 10px;
font-size: 16px;
background: #2b4c8a;
color: white;
}
现在,我们还有另一件事要做。 我们需要告诉magento在编辑和添加博客页面时使用此css文件。 为此,我们需要编辑其布局文件.
首先,更改添加博客页面的布局文件,
<?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">
<update handle="customer_account"/>
<head>
<css src="Webkul_BlogManager::css/style.css"/>
</head>
<body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="blogmanager.blog.add" template="Webkul_BlogManager::add.phtml" />
</referenceContainer>
</body>
</page>
在这里,我们添加了<head>节点,并在其中添加了<css>节点。 src =” Yshuq_BlogManager :: css / style.css”此行代表css文件的源。 在这里,我们需要提及相对于view / frontend / web文件夹的css文件路径。
现在类似地,我们需要更改编辑博客页面的布局文件,
view/frontend/layout/blogmanager_manage_edit.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">
<update handle="customer_account"/>
<head>
<css src="Yshuq_BlogManager::css/style.css"/>
</head>
<body>
<referenceContainer name="content">
<block class="Yshuq\BlogManager\Block\Blog" name="blogmanager.blog.edit" template="Yshuq_BlogManager::edit.phtml" />
</referenceContainer>
</body>
</page>
现在,如果您查看页面,您会发现该样式正在被应用。