如何在 pug 上實作 vue slot 的功能
slot 是 Vue 非常使用的功能，常常在做一些模組化的開發時都會去使用到，最近在使用 pug 開發一些靜態的頁面時，查看 pug 的官方文件，卻沒有相關的資訊 比較相近的應用就只有 block 與 extend 的語法
但是在使用上卻又一些落差，花了一點時間，尋找答案，發現是可以在 pug 上實作
slot 的
Html
![[開發工具] Emmet 實戰教學](https://s3-ap-northeast-1.amazonaws.com/zwh.zone/2017/09/emmet-retina.png)
[開發工具] Emmet 實戰教學
Emmet 是一個可以大幅提升你在開發網頁 Html 編碼速度，使用上也相當的容易，也支援很多主流的編輯器，如 : atom、sublime
--------------------------------------------------------------------------------
如圖片所示 :
在幫你的編輯器安裝完 Emmet 時，只要使用 tab 鍵 或是 ctrl+e 就可以直接將 Emmet 的編碼，轉換成 Html 的編碼
--------------------------------------------------------------------------------
使用上相當的容易，下面個別說明：
--------------------------------------------------------------------------------
文檔初始化：
> html:
![[SEO] 初步理解 Microdata 與 Schema.org 達到搜尋引擎優化](https://s3-ap-northeast-1.amazonaws.com/zwh.zone/2017/09/AAEAAQAAAAAAAAinAAAAJDg3YjcxYmI1LWJlNWQtNDYwOC05MGU1LTdjYmU1ZWVjM2U1ZQ.jpg)
[SEO] 初步理解 Microdata 與 Schema.org 達到搜尋引擎優化
Microdata 為 HTML5 的一部分，至於 Microdata 等標籤的作用 簡單來說：
我們一般用來顯示資料的 HTML 等標籤是給我們 人 看的 ， 而 Microdata 等標籤則相反，是專門為 機器 等各大搜尋引擎觀看而設計的
--------------------------------------------------------------------------------
官方實例：
<div>
h1>Avatar</h1>
Director: James Cameron
使用 Div 與 Css 繪製 Html Table
表格 是網頁排版中常見的資料顯示方式，一般我們都是直接用 Html 提供的 <table>、<tr>、<td> 等等…，來進行開發與製作，在這裡來介紹如何使用
div 與 css 取代原本 <table> 標籤進行製作：
--------------------------------------------------------------------------------
<table> 與 <div>
![[SVG] SVG 入門 ： 基本圖形繪製](https://s3-ap-northeast-1.amazonaws.com/zwh.zone/2017/06/Letters_SVG.svg_.png)
[SVG] SVG 入門 ： 基本圖形繪製
SVG 可縮放式向量圖形 ( SVG ， Scalable Vector Graphics )
是前端工程師不可錯過得技術，不只因 圖片向量 使圖片不會因放大縮小而失真外，SVG 為原本不足的 HTML 帶入了新的概念 — 利用標籤來做圖
從簡單的直線、曲線、圓形、矩形，到複雜的任意路徑、填充樣式、座標轉換與動畫，我們可以利用標籤的形式來完成
而且因 SVG 的圖片是由 標籤 組成，所以我們可以對圖片裡的任何物件進行操作，也可以配合 Css 與 javaScript