Magento2 CSS and JS

未分类

我们学习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>

现在，如果您查看页面，您会发现该样式正在被应用。