如何在PHP 7 CodeIgniter 3.1.11中引入CSS和JS？含JQuery疑问

嘿，作为CodeIgniter和PHP新手，这些资源路径的问题确实容易让人懵，我来一步步帮你理清楚：

1. 正确使用site_url()加载CSS/JS文件 #

首先，site_url()是CodeIgniter的URL辅助函数，它会自动基于你配置的base_url生成完整的资源路径，能避免相对路径带来的各种问题。不过要先确保这个辅助函数已经加载：

• 最简单的方式是打开application/config/autoload.php，找到$autoload['helper']数组，添加'url'，这样全局都能直接使用该函数：

$autoload['helper'] = array('url');

接下来，替换你HTML里的资源引入代码，位置和原来的<link>/<script>标签完全一致：

CSS文件（放在<head>标签内） #

把原来的静态href替换成site_url()生成的路径，示例如下：

<link rel="icon" type="image/png" href="<?php echo site_url('assets/image/favicon.png');?>"/>
<link rel="stylesheet" href="<?php echo site_url('assets/css/bootstrap.min.css');?>">
<link rel="stylesheet" href="<?php echo site_url('assets/css/mystyle.css');?>">
<!-- 其他CSS文件同理替换 -->

注：.map文件可以不用替换，或者也一起换成site_url路径，不影响功能。

JS文件（放在</body>标签前） #

同样替换src属性：

<script src="<?php echo site_url('assets/js/jquery.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/bootstrap.min.js');?>"></script>
<!-- 其他JS文件同理替换 -->

2. jQuery的安装确认 #

看你的代码里已经引入了assets/js/jquery.min.js，说明你已经有本地的jQuery文件了，完全不需要额外安装！只要确保这个文件确实存在于assets/js/目录下，并且通过site_url()生成的路径正确就可以。

如果之后需要更新jQuery版本，有两种可选方式：

• 本地替换：下载新版本的jQuery文件，直接替换assets/js/jquery.min.js即可
• 使用CDN：换成CDN链接（不过你项目已有本地文件，优先用本地更稳定）：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

3. 修改后的完整PHP文件示例 #

因为要运行PHP代码，你的HTML文件需要改成.php后缀（比如index.php），完整代码如下：

<html>
<head runat="server">
<title>ASGB Ticketing Tool</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="<?php echo site_url('assets/image/favicon.png');?>"/>
<link rel="stylesheet" href="<?php echo site_url('assets/css/bootstrap.min.css');?>">
<link rel="stylesheet" href="<?php echo site_url('assets/css/bootstrap.min.css.map');?>">
<link rel="stylesheet" href="<?php echo site_url('assets/css/mystyle.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo site_url('assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo site_url('assets/css/datatables.min.css');?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo site_url('assets/css/bootstrap-multiselect.css');?>"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-cus navbar-light bg-faded">
<a class="navbar-brand waves-light" href="#">
<img src="<?php echo site_url('assets/image/logo.png');?>" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-mob-bar" id="navbarNav">
<ul class="nav navbar-nav ml-auto nav-head-font">
<li class="nav-item active"><a class="nav-link" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
<li class="nav-item active"><a class="nav-link" href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
<li class="nav-item dropdown dropdown-mob" id="dropdown-mob-hide">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user" aria-hidden="true"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item"><i class="fa fa-address-book-o" aria-hidden="true"></i>My Profile</a>
<a href="#" class="dropdown-item"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Edit Profile</a>
<a href="#" class="dropdown-item"><i class="fa fa-key" aria-hidden="true"></i>Change Password</a>
<a href="#" class="dropdown-item"><i class="fa fa-handshake-o" aria-hidden="true"></i>Account Ledger</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item"><i class="fa fa-sign-out" aria-hidden="true"></i>Sign Out</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid container-fluid-cus">
<div class="fixed-nav">
<div class="fixed-nav-inner open-nav">
<ul class="text-center">
<a href="<?php echo site_url('home');?>" id="menu-toggle" class="waves-light menu-toggle" data-toggle="offcanvas">
<li>
<i class="fa fa-dashboard"></i></li>
<li>Menu</li>
</a>
<a href="<?php echo site_url('company');?>" class="waves-light">
<li><i class="fa fa-briefcase"></i></li>
<li>Company</li>
</a>
<a href="<?php echo site_url('staff');?>" class="waves-light">
<li><i class="fa fa-user-circle"></i></li>
<li>Staff</li>
</a>
<a href="<?php echo site_url('projects');?>" class="waves-light">
<li><i class="fa fa-product-hunt"></i></li>
<li>Projects</li>
</a>
<a href="#" class="waves-light">
<li><i class="fa fa-ticket"></i></li>
<li>Incidents</li>
</a>
<a href="<?php echo site_url('settings');?>" class="waves-light">
<li><i class="fa fa-cogs"></i></li>
<li>Settings</li>
</a>
</ul>
</div>
</div>
</div>
<div class="main-sec">
<div class="">
<div class="row">
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="mr-3 card-icon-1">
<i class="fa fa-newspaper-o font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">06</h3>
<span>Projects</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="card-icon-2 mr-3 card-icon-1">
<i class="fa fa-users font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">72</h3>
<span>Staff</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="card-icon-3 mr-3 card-icon-1">
<i class="fa fa-universal-access font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">10</h3>
<span>Teams</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="card-icon-4 mr-3 card-icon-1">
<i class="fa fa-user-circle font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">5</h3>
<span>Clients</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="<?php echo site_url('assets/js/jquery.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/popper.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/bootstrap.min.js');?>"></script>
<script type="text/javascript" src="<?php echo site_url('assets/js/datatables.min.js');?>"></script>
<script type="text/javascript" src="<?php echo site_url('assets/js/bootstrap-multiselect.js');?>"></script>
<script src="<?php echo site_url('assets/js/jquery.steps.js');?>"></script>
<script src="<?php echo site_url('assets/js/jquery.validate.js');?>"></script>
<script src="<?php echo site_url('assets/js/myscript.js');?>"></script>
</body>
</html>

额外提示：我把页面链接比如home.html也换成了site_url('home')，这是因为在CodeIgniter里应该通过控制器方法访问页面，而不是直接打开HTML文件，这样更符合框架的路由规则。

最后总结 #

• 先确保URL辅助函数已全局加载
• 所有资源（CSS/JS/图片）的路径都用site_url()生成
• 你的项目已经包含jQuery，无需额外安装，确认路径正确即可

内容的提问来源于stack exchange，提问作者Roxana Slj