---
# System prepended metadata

title: ＨyUI 4.0介紹
tags: [HyUI4.0]

---

<!-- ---
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 更新時間

* **關於版本號**
  ```text
  V.4.0.2
  
  * 如果是有增加功能則更動第二位
  * 如果是更新bug則更動第三位數字 
   
  ```
* **新增功能** 
 
  如有新增功能 則預計每季20號 更新版本 
  遇 週休則提前
  
## ＨyUI 的調整

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

蛇形：user_login_count

驼峰：userLoginCount

```
  
*  **icon命名更動**   

   原本預設Hyui內建icon 為黑色 檔名 `➕２` 則為反白的icon檔名
   修改為 預設icon為白色 深色則為檔名後方加`_deep`
   
*  **js引用方式**
    
   Hyui基本的用法 都寫在 main.js裡
   客製功能 及需要啟動的基本模組功能 則在 customize.js 打開
   
![](https://i.imgur.com/jjcBHkH.png)

*  **輪播套件更換**
    原本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樣式建成模組如下
   
![](https://i.imgur.com/qQDfj18.png)

用法如下

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

```javascript=
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版本號

```text=
 npm -v
```
![](https://i.imgur.com/ai2Tx0x.png)

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


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


```text=
npm i docsify-cli -g
```

**確認安裝成功**

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

![](https://i.imgur.com/jlZ9w2T.png)

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

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


**編譯及預覽**

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

```text=
docsify serve docs
```

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

![](https://i.imgur.com/zt2pbCF.png)

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


