Ｈ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模板

• @layer

• swiper套件

• jsFadeIn、jsFadeOut、jsAddClass、jsRemoveClass、jsParents

• SelectSlider 用法

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

用法如下

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

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

languageSelect.initial();

ＨyUI4 文件

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

• 文件框架介紹
  docsify文件連結

docsify

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

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

需要先安裝相關套件

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

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

 npm -v

p.s 若是沒有相關環境 可參考六角學院釋出的教學
沒有NPM的看這裡～ （彩蛋課程 - NPM 管理）

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

npm i docsify-cli -g

確認安裝成功

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

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

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

編譯及預覽

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

docsify serve docs

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

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