Lorem Picsum：假圖產生器

切板時有時會遇到設計師還沒有提供上稿圖片的狀況，這時候假圖/隨機圖產生器就很重要了。

Lorem Picsum：假圖產生器
https://picsum.photos/

使用方法

• 產生正方形的圖片

<!-- 產生寬高都是200px的圖片 -->
<img src="https://picsum.photos/200">

• 產生長方形的圖片

<!-- 產生寬：300px 高：200px的圖片 -->
<img src="https://picsum.photos/300/200">

• 在url代入不同random參數，產生不同圖片

<img src="https://picsum.photos/80?random=1">
<img src="https://picsum.photos/80?random=2">
<img src="https://picsum.photos/80?random=3">
<!-- 下略 -->

• 在url代入不同參數，也可以使用v-for迴圈產出

<div class="avatar"  v-for="item in [1,2,3,4,5,6,7,8]">
    <el-avatar :size="60" :src="'https://picsum.photos/60?random'+item"></el-avatar>
</div>

• 如果沒帶random參數，相同的url，在同一次頁面載入中，每一張都會是一樣的

<img src="https://picsum.photos/80">
<img src="https://picsum.photos/80">
<img src="https://picsum.photos/80">
<!-- 下略 -->

• 透過參數grayscale，可以產生灰階的圖片

<img src="https://picsum.photos/300/200?grayscale">

• 透過參數blur，可以產生模糊濾鏡的圖片

<img src="https://picsum.photos/300/200/?blur">

• 還有其他細節功能，可以至picsum官網查看

Chinese Lorem：VSCode繁體中文假文產生器

當我們在切版前端網頁時，常常會有需要有填充文字內容的時候。此時最方便的就是使用假文產生器了。
值得一提的是，以往都只有英文或簡體中文的假文產生器外掛，但前陣子Kevin大寫了一套VSCode 繁體中文假文產生器，讓我們有繁體中文假文產生的需求時，不用再去別的地方複製～

Chinese Lorem：VSCode 繁體中文假文產生器
https://marketplace.visualstudio.com/items?itemName=KevinYang.ctlorem

使用方法

• 在html中，輸入關鍵字ctlorem後，按下tab/enter按鍵即可產生出128字的中文假文
• 範例：
  
• 輸入ctlorem+指定字數後，，按下tab/enter按鍵即可產生出指定字數的中文假文：
• 範例：
  

blueprint：VSCode從自訂範本產生檔案+目錄的工具

在開發專案時，總是會有需要重複建立一些常用的檔案的時候。為了節省時間、不重複造輪子，可以來學一下這套從自訂範本產生檔案+目錄的工具

blueprint：VSCode從自訂範本產生檔案+目錄的工具
https://marketplace.visualstudio.com/items?itemName=teamchilla.blueprint

使用方法

• 在想要製作範本的專案的跟目錄，新增一個名為blueprint-templates的資料夾來存放範本們
• 在blueprint-templates資料夾中，新增一個範本資料夾，存放你希望將來自動產生的檔案們
  
• 範本中可以使用變數，我的index.html的內容是這樣的：
  
  其中{{name}}的部分將會代入從範本新增檔案時填入的名稱
• 對希望產生出檔案的目錄按出右鍵選單=>New File from Template
• 選擇想要使用的範本名稱
• 輸入name變數
• 
• 可以看到title的部分變為blue-print-test了

延伸閱讀

推薦這支影片，介紹很多VSCode的實用工具：

Alex宅幹嘛：開掛囉!!! VSCode 工作學習效率加倍術
https://www.youtube.com/watch?v=QV0Yt279fgc