10.Egg.js教程-View中使用EJS模板引擎(3)

目录
文章目录隐藏
  1. 公共代码片段的使用
  2. 配置静态资源
  3. 使用静态资源文件
  4. 总结

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 10.Egg.js教程-View中使用EJS模板引擎(3)

发表回复