zoukankan      html  css  js  c++  java
  • mystar01 nodejs MVC 公共CSS,JS设置

     mystar01 nodejs MVC gulp 项目搭建

    config/express.js中定义别名

    //将下载的第三方库添加到静态资源路径当中,方便访问
      app.use('/jquery', express.static(config.root + '/node_modules/jquery/dist'))
      app.use('/fontawesome', express.static(config.root + '/node_modules/@fontawesome/fontawesome-free'))
      app.use('/bootstrap', express.static(config.root + '/node_modules/bootstrap/dist'))
    
    app.use(methodOverride());

    views/layout.pug 中添加公共资源的路径

    doctype html
    html(lang='en')
      head
        meta(charset='UTF-8')
        meta(name='viewport', content='width=device-width')
        title= title
        block css
          //- link(rel='stylesheet', href='/css/style.css')
          link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
          link(rel='stylesheet', href='/fontawesome/css/all.min.css')
        block js
          script(src='/jquery/jquery.min.js')
          script(src='/bootstrap/js/bootstrap.min.js')
          if ENV_DEVELOPMENT
            script(src='http://localhost:35729/livereload.js')
      body
        block content

    然后在需要的页面中引入views/index.pug

    extends layout
    
    block content
      h1= title
      p Welcome to #{title}
      button(class=['btn', 'btn-primary']) 测试

    windows打开服务

    services.msc

    追加自己的样式到公式样式

    https://pugjs.org

    Inheritance:Extends and Block

    extends ../layout
    
    append css 
      link(rel='stylesheet', href='/css/blog/index.css')
    
    block content

     直接以/css开关

    调整页面结构

    app/controllers/home.js

    /blog  /index是访问路径

    blog/index是页面路径

    const express = require('express');
    const router = express.Router();
    
    module.exports = (app) => {
      app.use('/blog', router);
    };
    
    router.get('/index', (req, res, next) => {
      res.render('blog/index', {
        title: 'my star 1',
      });
    });

     新的访问路径

    http://localhost:3000/blog/index

  • 相关阅读:
    【搜索】棋盘 luogu-3956
    【动态规划】石子合并 luogu-1880
    【动态规划】合唱队形 luogu-
    【模拟】报名签到 luogu-4445
    【排序+贪心】导弹拦截 luogu-1158
    【模拟】不高兴的津津
    【模拟】选数 luogu-1037
    「JOISC2020」建筑装饰 4
    「清华集训」小 Y 和恐怖的奴隶主
    「CF708E」Student's Camp
  • 原文地址:https://www.cnblogs.com/perfei/p/14999456.html
Copyright © 2011-2022 走看看