<!-- ---
type: slide
--- -->

# ＨyUI 4.0介紹
###### tags:`HyUI4.0`

## HyUI v4.0
https://hywebu00.github.io/HyUI_v4.0/
https://github.com/HywebU00/HyUI_v4.0.git
## HyUI v4.0文件
https://hywebu00.github.io/HyUI4.0_document/#/

## ＨyUI 更新時間

* **關於版本號**

  V.4.0.2
  
  * 如果是有增加功能則更動第二位
  * 如果是更新bug則更動第三位數字 
   

* **新增功能**

如有新增功能 則預計每季20號 更新版本
遇 週休則提前

## ＨyUI 的調整

* **命名規則**
調整命名方式 由原本的蛇形命名及串式命名改成 統一為駝峰命名

蛇形：user_login_count

驼峰：userLoginCount

* **icon命名更動**

原本預設Hyui內建icon 為黑色 檔名 `➕２` 則為反白的icon檔名
修改為 預設icon為白色 深色則為檔名後方加`_deep`

* **js引用方式**

Hyui基本的用法 都寫在 main.js裡
客製功能 及需要啟動的基本模組功能 則在 customize.js 打開


* **輪播套件更換**
原本Hyui搭載的輪播為 slick.js
由於是倚賴jQuery 所以4.0 換成swiper套件

* **燈箱模組更換**
原本燈箱模組的元件 為 jQuery 手寫
線更改為倚賴 fancybox 的燈箱套件

**(p.s 若開發中發現有模組遺漏 也歡迎同仁到github上 填寫 Issues)**

## ＨyUI JS/CSS 介紹

* [scss color模板](https://hackmd.io/ph8Y7RkSSjCrz5MCS2KLZg?view#/)
* [@layer](https://hackmd.io/l322D_yLQOmT0nPUrS8STw?view#/)
* [swiper套件 ](https://hackmd.io/yTkgndngRymVhVoA7L7A5Q?view#/)
* [jsFadeIn、jsFadeOut、jsAddClass、jsRemoveClass、jsParents](https://hackmd.io/kaJaBjNiSLmecrYgyaMyNw?view#/)

* **SelectSlider 用法**

常運用的select樣式建成模組如下


用法如下

注意：要建立一個新物件(new) 再引用它

const languageSelect = new SelectSlider({
  name: document.querySelectorAll('.language'), // --- 控制的對象
  control: document.querySelectorAll('.language button'), // --- 監聽的對象
});

languageSelect.initial();

## ＨyUI4 文件

為了大家維護方便，HyUI4 文件依舊採用 Markdown 的撰寫方式

* **文件框架介紹**
[docsify文件連結](https://docsify.js.org)

**docsify**

不用再編譯成html檔案 只要同一般專案推上 即可快速呈現。

> 不同於 GitBook、Hexo 的地方是它不會生成靜態的 .html 文件，所有轉換工作 都是在運行時。如果你想要開始使用它，只需要創建一個 index.html 就可以開始編寫文檔並直接部署在 GitHub Pages。

**需要先安裝相關套件**

安裝套件時
請先確認一下 是否安裝了NPM
(p.s 之前我們在Vue的專案分享時，大家幾乎都已經建立好相關環境)

若不確定 可以執行以下 來確認一下 npm版本號

 npm -v


p.s 若是沒有相關環境 可參考六角學院釋出的教學
[沒有NPM的看這裡～ （彩蛋課程 - NPM 管理）](https://courses.hexschool.com/courses/202011122/lectures/33636919)

若是有跳出版本號，則執行以下 進行docsify套件安裝

npm i docsify-cli -g

**確認安裝成功**

安裝完成後可以檢查 是否環境已有相關套件


確認之後下載 Hyui4.0 的文件就可以開始進行修改
寫法 和 Hackmd 類似。

可以研究一下文件 有中文版本可以加快大家上手的速度

**編譯及預覽**

修改的檔案無法使用 live server 進行即時預覽
需在終端機上執行 以下

docsify serve docs

點選連結 可以看到相對應的畫面


**推送方式**
由於此文件框架無需編譯
推送方式如我們平常的轉案一般，在此便不再贅述