码云 10.Egg.js教程-View中使用EJS模板引擎(3)
本文我们主要学习一下，如何在ESJ模板引擎中配置和使用静态资源文件。作为前端转全栈，肯定少不了CSS、图片和JS文件的引入，而这些全部属于静态资源。所以说静态资源也是项目开发中的一部分，也需要关注和学习的。
公共代码片段的使用
比如网站项目中的头部和底部往往都是一样的，这时候我们把公共的部分抽离出来，单独到一个文件夹中，然后在需要的页面直接引入。
在/app/view/目录建立一个header.html文件。在文件里我们只需要写一些代码片段就可以了，没必须写出全部的html架构。
/app/view/header.html文件：
<h1>欢迎来到红浪漫！</h1>
然后回到/app/view/mybj.html文件，直接使用<% include header.html %>引入到模板里就可以了。
<body>
<% include header.html %>
<h2>现在由<%= id %>号技师，为你服务!</h2>
<h3>你好，我是<%= name %><%= age %>岁</h3>
<br/>
我的技能如下：
<ul>
<% for(var i=0;i<skills.length;i++){ %>
<li><%= skills[i] %></li>
<%}%>
</ul>
</body>
在终端中用npm run dev启动服务，然后在浏览器中输入http://127.0.0.1/my。 可以看到公用部分的文件已经引入进来了。
配置静态资源
Egg中默认的静态资源文件在/app/public目录下，比如我们在public文件夹下新建一个css文件夹，然后新建default.css文件。
body{
color:red;
}
然后直接在浏览器中试着查看这个CSS文件。浏览器中输入地址http://127.0.0.1:7001/public/css/default.css 。正常情况css代码内容已经显示在浏览器里了。
？疑问：静态资源我们并没有配置路由，为什么就可以访问到呢？
不用配置，静态资源就可以访问到，是因为Egg使用了egg-static插件，这个插件是koa-static的升级版。我们可以打开node_modules 文件夹，直接搜索egg-static文件夹，就可以看到。
知道了这个道理，我们也可以猜测到，这个public前缀一定是可以修改的，比如修改为assets。
打开/config/config.default.js文件，然后写入如下配置：
onfig.static = {
prefix: '/assets/',
}
这时候再访问原来的URL就会报404错误，你这时候修改一下路径，把public改成assets就又可以访问到了。
甚至你可以配置静态文件放置的文件夹，但我个人不建议你修改，包括public的前缀也不建议你修改。
使用静态资源文件
会配置静态资源了，我们就可以在EJS模板里使用这些资源了，比如现在引入刚才写的default.css文件。（先把刚才修改的配置删除掉，回归默认配置。）
然后到/app/view/mybj.html中引入这个CSS样式。引入方法和正常的HTML引入方法一样就可以了。
<link rel="stylesheet" type="text/css" href="public/css/default.css" />
到浏览器进行查看，发现字体已经全部变成了红色。
总结
本文我们主要学习了在EJS模板中如何配置和使用静态资源。希望小伙伴们能多练习一下。
微信
支付宝1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创，仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ：1642748312给予处理。
码云笔记 » 10.Egg.js教程-View中使用EJS模板引擎(3)
