本文我们主要学习一下，如何在 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 模板中如何配置和使用静态资源。希望小伙伴们能多练习一下。