如何在 Magento 布局中向侧边栏 div 添加类？

Question

如何将类添加到 Magento 布局中的 div 中？我只想在我的一个页面上更改它。默认情况下，我有：

<div class="col-left sidebar">

我想要：

<div class="col-left sidebar my-class">

我无法在 2-columns-left 中更改此设置，因为它会在 Magento 的所有页面上更改。是否可以？

Answer 1

如果您只想更改一页，可以尝试复制 2-columns-left 模板，重命名并编辑它，然后编辑页面以使用新模板。

1. 重命名并编辑 2-columns-left.phtml 文件。这可以在 /app/design/frontend/default/YOUR_THEME/template/page 中找到。在第 50 行左右，您将看到

   行。

2. 编辑 config.xml 文件以便页面使用新模板。 Config.xml 位于 /app/code/core/Mage/Page/etc 中。大约中间，您会看到引用two_columns_left的代码；复制此代码，然后编辑它以指向新页面。

3. 最后通过后台编辑页面>内容管理系统页面使用新的模板。您现在可以通过主题中的 CSS 添加样式。

更多说明。

Answer 2

方法 1 - layout.xml ：

a. For files you want to include on every page
For css or js files you want to add to every page, you edit the page.xml files located in your layout folder (app/design/frontend/default/your_theme/layout/page.xml). Within this file, at the top you will find the <default> area with the **<block name="root" … >**. This block has a child named head which contains the included css and js elements.

<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>

...

</block> 

您可以在此处添加 javascript 和 css。请注意，您添加的任何 Js 文件都相对于根目录中的“js”文件夹。 css 文件包含在当前和默认模板的外观文件 (skin/frontend/default/your_template(& default)/css) 中。

b. Specific areas
If you want to include css or js on only certain areas (such as the checkout process or catalog pages), you can do that also. For instance, if you want it in a single product view (product view vs product list), you can open up catalog.xml, find <catalog_product_view> area (near line 168 in vs 1.2.1).  Add your code in there – notice that we are using the <reference> tag rather than <block> tags. We use the “reference” tag to reference other blocks that are in other areas of the template.

<reference name="head">
<action method="addJs"><script>varien/product.js</script></action>

<action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
<action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
<action method="addItem"><type>js</type><name>calendar/lang/calendar-en.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
<action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
</reference> 

还可以在管理后端的布局 XML 区域（CMS 页面、类别和产品设计）中使用。这可以完成同样的事情，以及添加或删除其他块。

方法 2 - 块代码：

我们也可以在代码中完成所有这些。这些函数在 Mage_Page_Block_Html_Head 中定义。因此，我们可以在块类中使用此代码（不是 .phtml 文件！）：

$headBlock = $this->getLayout()->getBlock('head');
$headBlock->addJs('somefolder/yay.js'); 

我建议查看 page.xml 文件，只要找到removeItem 语法（$type, $name 为方法，为 xml ），这对于您在需要时添加或删除资产非常方便！

<action method="removeItem"><type>js</type><name>calendar/calendar.js</name</action>
$this->getLayout->getBlock('head')->removeItem('js', 'calendar/calendar.js'); 

文章发布：http://www.exploremagento .com/magento/adding-and-remove-js-css.php