在expressjs中调用多个文件.pug的方法有两种:使用模板继承和使用include指令。
- 使用模板继承:
模板继承是一种将公共部分提取出来,并在其他模板中重用的技术。在expressjs中,可以使用pug的模板继承来实现调用多个文件.pug的目的。
- 首先,创建一个基础模板文件base.pug,其中包含共享的结构和布局。例如,base.pug可以包含网页的头部和尾部。
- base.pug的内容示例:
- base.pug的内容示例:
- 然后,创建其他模板文件,这些文件将继承base.pug,并可以在block content中添加特定内容。
- 示例文件page1.pug的内容:
- 示例文件page1.pug的内容:
- 示例文件page2.pug的内容:
- 示例文件page2.pug的内容:
- 在路由中渲染这些模板文件:
- 在路由中渲染这些模板文件:
- 上述代码中,设置了pug作为视图引擎,并指定了存放模板文件的views文件夹。然后,创建两个路由'/page1'和'/page2',分别渲染page1.pug和page2.pug。
- 通过访问http://localhost:3000/page1和http://localhost:3000/page2,可以分别看到page1.pug和page2.pug的内容。
- 使用include指令:
include指令可以在pug模板中引入其他的pug文件。通过include指令,可以实现在一个主模板中引入多个文件.pug。
- 首先,创建一个主模板文件index.pug,其中使用include指令引入其他的文件.pug。
- index.pug的内容示例:
- index.pug的内容示例:
- file1.pug的内容示例:
- file1.pug的内容示例:
- file2.pug的内容示例:
- file2.pug的内容示例:
- 在路由中渲染index.pug:
- 在路由中渲染index.pug:
- 上述代码中,设置了pug作为视图引擎,并指定了存放模板文件的views文件夹。然后,创建一个路由'/',渲染index.pug。
- 通过访问http://localhost:3000,可以看到index.pug中引入的file1.pug和file2.pug的内容。
以上就是在expressjs中调用多个文件.pug的方法,通过模板继承或使用include指令,可以方便地组织和重用模板文件,提高开发效率。
(请注意,腾讯云的相关产品和产品介绍链接地址在本回答中没有提及。)