【问题标题】:Codeigniter - import JS/CSS/IMG properlyCodeigniter - 正确导入 JS/CSS/IMG
【发布时间】:2014-04-05 21:58:41
【问题描述】:

我是 MVC 学习的新手,在搜索了基本的东西之后,我发现了关于这个问题/主题的几种意见,但每个人都有不同的状态和说明......

有谁知道在 Codeigniter 中放置资产 (js/css/img) 文件的最佳位置是什么?

我发现有些人说要把它放在视图文件夹中,有人在 webroot 中(在创建资产文件夹之后),有人在应用程序文件夹中等等,所以我真的很困惑.. 这真的取决于用户是谁开发应用程序(所以每个人都把它放在不同的地方)还是有一个基本的“要遵循的规则”?

Codeigniter 的任何专家都可以发布正确答案并解释包含这些资产的最佳方式是什么以及为什么要这样做?

【问题讨论】:

    标签: javascript php css image codeigniter


    【解决方案1】:

    通常当我开始一个新的 CodeIgniter 项目时,我会创建一个名为 public 的文件夹,然后将 index.php 文件移到那里。这样做意味着应用程序和系统文件夹不在同一级别。

    在我的 application/config/config.php 文件中,我添加了 base_url

    $config['base_url'] = 'http://exmaple.com/codeigniter/public/";
    

    public 文件夹中,然后我创建名为jscssimages 的文件夹。所以我的结构看起来像

     -- application
     -- system
     -- public
        -- css
        -- js
        -- images
        -- index.php
    

    然后在我的模板中我可以通过这样做来包含它们

    <link rel="stylesheet" href="<?php echo base_url() ?>css/main.css" />
    <script type="text/javascript" src="<?php echo base_url() ?>js/main.js"></script>
    

    您绝对不应该将任何可公开访问的文件(样式表、图像等)放入应用程序或系统文件夹中

    【讨论】:

    • 我同意这种方法,因为您的核心文件不向公众提供,只有 index.php 和静态内容:)
    • 我也更喜欢这种方法。此外,我正在使用辅助函数来加载资产,这样即使我的资产文件夹更改也需要在一个地方进行更改。
    【解决方案2】:

    我已将它们添加到与applicationsystemuser_guide 位于同一目录中的一个名为inc 的文件中(尽管我在user_guide 进入服务器后立即删除了它)。

    确保您已设置您的 base_url,以便您可以更轻松地调用它(并自动加载 url 加载程序!)。

    然后当我调用它时,我使用&lt;?=base_url();?&gt;inc/css/styles.css

    <link rel="stylesheet" href="<?=base_url();?>inc/css/styles.css
    

    <link rel="stylesheet" href="<?php echo base_url(); ?>inc/css/styles.css
    

    我的模板将如下所示:

    --application
    --system
    --inc
      -- css
          -- style.css
      -- js
          -- scripts.ks
      -- images
          -- logo.png
    

    【讨论】:

      【解决方案3】:

      除了上面的答案之外,我喜欢做的一件事是使用“帮助”函数来加载 js、css。这样,如果您更改静态内容的位置,您只需在代码中的一个位置进行更改。

      function css($filename) {
              return '<link rel="stylesheet" type="text/css" href="' . config_item('base_url') .
                      'public/' . $filename . '.css">';
      }
      function js($filename) {
          return '<script type="text/javascript" src="' . config_item('base_url') .
                  'public/' . $filename . '.js "></script>';
      }
      

      【讨论】:

        【解决方案4】:

        在某种程度上,它归结为品味,但我谦虚的建议是使用基本的引导模式,许多框架都遵循该模式,而不仅仅是 codeigniter。例如,看看您将如何根据主题 (https://github.com/twbs/bootstrap) 布置您的网站。

        我并不声称自己是专家,但我建议一些对团队来说非常简单易懂的东西:

        文件夹结构

        /
        /css
        /js
        /application
        /bower_components
        ... 
        

        主题布局

        处理页面时,我不想考虑加载各种库和页面内容,我只想简单地处理页面。为此,我拆分了内容,以便可以通过以下调用加载它:

        $this->load->view('site/header'); //Load the header and all the appropriate libs
        
        $this->load->view('/users/edit', array('
           'record' => $this->User->get($userid);   //Work with the actual page
        '));
        
        $this->load->view('/site/footer'); //Close all the tags
        

        通常,我将库放在根目录中,然后使用绝对路径将它们加载到视图中:

        /application/views/site/header.php:

        <html>
        ....
        <head>
         <script src="/js/bootstrap.min.js"></script>
         <link href="/css/bootstrap.css" rel="stylesheet">
         </head>
        ...
        <body>
         <navbar>
          ...
         </navbar>
        <div id="content">
        

        /application/view/site/footer.php

         </content>
         ... closing tags
         </html>
        

        回购示例

        在此处查看带有免费主题的空白回购设置:https://github.com/DesertLynx/blank_CI

        【讨论】:

        • 我完全一样,我将页面拆分为页眉、侧边栏和页脚,每个页面都包含这些内容,因此我在页眉和页脚中包含 css 和 js。非常感谢您的回答,这很有帮助。
        猜你喜欢
        • 2018-01-17
        • 2022-12-10
        • 2018-02-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-06-24
        • 1970-01-01
        相关资源
        最近更新 更多