2019.2.12 为phtml文件添加自己的css、JS样式和图片资源

最新推荐文章于 2024-09-23 00:38:21 发布

Small盼盼

最新推荐文章于 2024-09-23 00:38:21 发布

阅读量745

点赞数

分类专栏：学习进度

本文链接：https://blog.csdn.net/qq_38086247/article/details/87087448

版权

学习进度专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1、添加自定义的css文件

在skin/frontend/rwd/default/css建立自己的css文件：mystyle.css
（引用路径是遵循本模板的原来css引用路径）

在这里插入图片描述

在local.xml文件中设置引用该css

 <block type="page/html_head" name="head" as="head">
 <action method="addCss"><stylesheet>css/mystyles.css</stylesheet></action>
 <!--添加 css mystyles.css 文件在 /skin/frontend/主题包文件夹/主题文件夹/css-->
 </block>

在本phtml文件中直接使用css的样式就可以了

2、添加JS文件：

在js目录中建立自定义JS文件
在local.xml中设置引用刚刚建立的js文件

<action method="addJs"><script>my/myjs.js</script></action>

3、为昨天写好的纯pHTML文件添加css演示

<div class="header-div">

        <div class="header-con"><strong><a href="">LGDESIGN</a></strong></div>
        <nav class="header-home">
            <div id="underline"><a href="" >Home</a></div>
            <div id="underline"><a href="" >About</a></div>
            <div id="underline"><a href="" >Solutions</a></div>
            <div id="underline"><a href="" >SignIn</a></div>

        </nav>

</div>

添加css样式后
在这里插入图片描述

3、为页面添加图片资源

要考虑图片放在什么位置，怎么才能获取到图片的位置URL

通过查看原来的headerp.html文件知道：获取图片主要是通过执行本block的函数，通过判断请求，block函数会返回对应一个图片URL

而返回URL的各个函数有：

//获取 magento js 路径
Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS);
//http://你网站地址/index.php/
Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK);
//获取 magento media 目录
Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);
//magento中 获取skin目录
Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN);
//http://你网站地址/
Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB);
//获取当前页面URL地址
$currentUrl = $this->helper('core/url')->getCurrentUrl();
//首页地址
$home_url = Mage::helper(‘core/url’)->getHomeUrl();
//Skin URL
$this->getSkinUrl(‘images/image.gif’)；

在header.phtml 调用getSkinUrl函数：

<?php echo $this->getSkinUrl()?>

输出的结果为：
在这里插入图片描述
可知getSkinUrl返回的路径位置
进一步调试getSkinUrl函数发现该函数如何取得该路径：

public function getSkinUrl($file = null, array $params = array())
    {
        Varien_Profiler::start(__METHOD__);
        if (empty($params['_type'])) {
            $params['_type'] = 'skin';
        }
        if (empty($params['_default'])) {
            $params['_default'] = false;
        }
        $this->updateParamDefaults($params);
        if (!empty($file)) {
            $result = $this->_fallback(
                $file,
                $params,
                $this->_fallback->getFallbackScheme(
                    $params['_area'],
                    $params['_package'],
                    $params['_theme']
                )
            );
        }
        $result = $this->getSkinBaseUrl($params) . (empty($file) ? '' : $file);
        Varien_Profiler::stop(__METHOD__);
        return $result;
    }

将自己的图片放到该路径下/magento/skin/frontend/rwd/default/
可以调用函数getSkinBaseURL()获取其URL：
最后获取图片：
在这里插入图片描述

疑问：查看header.phtml插入图片logo的时候是：通过调用本block的函数：getLogoSrc（）
然后通过获取URL参数
getLogoSrc（）函数代码：

 if (empty($this->_data['logo_src'])) {
            $this->_data['logo_src'] = Mage::getStoreConfig('design/header/logo_src');
        }
        return $this->getSkinUrl($this->_data['logo_src']);

不知道$this->_data[‘logo_src’]代表什么