HTML5使用fis3引入公共頭部尾部
阿新 • • 發佈:2019-01-09
1.安裝node.js。
2.node.js安裝完成之後執行以下命令:
npm
install -g
fis3
-g
安裝到全域性目錄,必須使用全域性安裝,當全域性安裝後才能在命令列(cmd或者終端)找到fis3
命令- 如果 npm 長時間執行無響應,推薦使用 cnpm 來安裝
fis3
-v
判斷是否安裝成功,如果安裝成功,則顯示類似如下資訊:
$ fis3 -v
[INFO] Currently running fis3 (/Users/Your/Dev/fis3/dev/fis3)
v3.0.0
/\\\\\\\\\\\\\\\ /\\\\\\\\\\\ /\\ \\\\\\\\\
\/\\\/////////// \/////\\\/// /\\\/////////\\\
\/\\\ \/\\\ \//\\\ \///
\/\\\\\\\\\\\ \/\\\ \////\\\
\/\\\/////// \/\\\ \////\\\
\/\\\ \/\\\ \////\\\
\/\\\ \/\\\ /\\\ \//\\\
\/\\\ /\\\\\\\\ \\\ \///\\\\\\\\\\\/
\/// \/////////// \///////////
最後使用以下方法引入公共部分:
1、html中嵌入圖片:
<img
title="百度logo"
src="images/logo.gif?__inline"/>
編譯後:
<img title="百度logo" src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7"/>
2、html中嵌入樣式檔案:
<link
rel="stylesheet" type="text/css"
href="demo.css?__inline">
編譯後:
<style>img
{ border:
5px solid
#ccc; }</style>
3、html中嵌入指令碼資源:
<script type="text/javascript" src="demo.js?__inline"></script>
編譯後:
<script
type="text/javascript">console.log('inline
file');</script>
4、html中嵌入頁面檔案:
<linkrel="import"href="demo.html?__inline">
編譯後:
<h1>demo.html
content</h1>