13.課時108-幼教平臺：使用include靜態頁面模塊化

原創 道格拉斯Pro 2020-06-19 07:36
  1. 使用nunjuncks的include語法引入公共頭部
    在這裏插入圖片描述
    注意路徑是”back/header.html”
  2. 新建側邊欄板塊aside.html,並使用同樣的方法引入
    在這裏插入圖片描述
  3. 使用include引入側邊裏板塊
    在這裏插入圖片描述
    注意一定要是全路徑，留出插槽
    至此基礎模板，我們搭建完成
  4. 配置index.html文件
    在這裏插入圖片描述
    在這裏插入圖片描述
    注意，兩個文件的{%block style%}要完全相同
  5. 將標紅區域，放入base.html留的插槽中
    在這裏插入圖片描述
  6. 將index.html中的使用的js文件放入base.html留下的script插槽中
    在這裏插入圖片描述
  7. 此時index.html的樣式，並能很好運行
    在這裏插入圖片描述
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Window 環境在 NodeJS 配置 Vue 環境及項目運行（IDEA版）

檢測 NodeJS 環境及 cnpm 安裝 vue-cli # 安裝 vue-cli cnpm install vue-cli -g # 測試是否成功 # 查看可以基於哪些模板創建 vue 應用程序，通常我們選擇 webpa

Future_LL 2020-07-07 21:46:20

NodeJS生成字節碼

NodeJS生成字節碼 相關問題： 1.nodejs源碼保護 2.nodejs源碼加密 3.nodejs提升運行速度 前言 傳統的後端運行環境，如 Java、.NET，其源代碼是經過編譯才部署到服務器上運行的，不存在泄露的風險。而

itas109 2020-07-08 00:25:40

vscode遠程調試nodejs

vscode遠程調試nodejs 如需轉載請標明出處：http://blog.csdn.net/itas109 QQ技術交流羣：129518033 文章目錄vscode遠程調試nodejs1.程序部署2.開啓遠程調試3.本地v

itas109 2020-07-08 00:25:38

Window環境安裝NodeJs

下載安裝包 https://nodejs.org/en/download/ 也可以下載 .zip 格式壓縮包，解壓即可，如果是 .msi 格式那麼還需要安裝，無腦點擊 Next 即可，不需要勾選，除了在第二步，我同意需要勾選，其他一路

Future_LL 2020-07-07 21:46:19

使用、註冊npm網站

在https://www.npmjs.com/註冊賬號 注意：註冊過程中需要郵箱驗證 在終端 包所在的文件夾（F:\學習\front-end\14.手寫Node模塊系統\12\node_modules\ggjj）中輸入npm a

Cao_Mary 2020-07-05 23:02:37

package.json各字段含義

package.json字段分析(瞭解) name：包的名稱，必須是唯一的，由小寫英文字母、數字和下劃線組成，不能包含空格 version：符合語義化版本識別規範的版本字符串 主版本號：當你做了不兼容的 API 修改 子

Cao_Mary 2020-07-05 23:02:37

【譯】啥是Deno？跟Node.js有啥區別？

原文：What’s Deno, and how is it different from Node.js? Node.js的作者Ryan Dahl，過去一年半的時間都在打造一個新的JavaScript運行環境Deno來解決N

zhulin2609 2020-07-05 10:10:42

瞭解node中的setImmediate()

概述 當你想在node中執行異步代碼，並且想盡可能快的執行，那麼可以選擇node中的setImmediate()函數。 setImmediate(() => { //run something }) 任何傳給setImmed

fredricen 2020-07-04 01:36:38

NodeJS入門——學習筆記

之前有段時間閒着無聊，去B站上簡單瞭解了一下NodeJS，下面是根據一個視頻記錄的筆記，供大家參考，錯誤之處請大家幫忙斧正。侵刪。 目錄 0 參考教程 1 NodeJs簡介 1.1 官網介紹：https://nodejs.org/en/

RaymondLove~ 2020-07-03 21:42:30

http-server代碼學習

npm install webpack-dev-server --save-dev “scripts”: { “start”: “webpack-dev-server --env development”, “build”: “w

yangbinfx 2020-07-03 07:53:01

vue項目創建全過程，親測記錄

前言 示例項目父級目錄：/home/wwwroot/thinkphp_swoole_chat/public/demo 示例項目名稱：chat 設置npm源爲阿里源 npm config set registry=https://r

U.R.M.L 2020-07-03 02:08:32

PhpStorm/WebStorm……等JetBrains系代碼編輯器解決ESLint代碼檢查不通過

檢查確認是否開啓了ESLint的代碼格式檢查 比如vue項目，在使用vue init webpack project_name創建項目的時候就會詢問是否開啓ESLintUse ESLint to lint your code? (

U.R.M.L 2020-07-03 01:10:07

Vue+element+Nodejs學習記錄（7）

1.element中Table表格的使用 先看官網的一個示例： <template> <el-table :data="tableData" style="width: 100%"> <el-table

Cacra 2020-07-02 17:06:15

Vue+element+Nodejs學習記錄（6)

1.axios攔截 axios攔截就是axios的二次封裝，這樣便於權限管理和統一異常處理，全局攔截器可以根據接口錯誤碼進行統一處理，而不需要再每一個接口內部進行控制，第二個好處就是，可以做全局的loading效果，如果不在全局做

Cacra 2020-07-02 17:06:15

Vue+element+Nodejs學習記錄（8）

1.去掉a標籤的下劃線 <a style="text-decoration:none></a> 參考文章：https://jingyan.baidu.com/article/d5c4b52bfca27bda560dc5a8.ht

Cacra 2020-07-02 17:06:15