亮有特色的 CSS 組件庫,組件代碼非常簡潔,也支持深度定制主題、定制組件,可以搭配 Vue / React 等框架使用。
daisyUI 是一款極為流行的 CSS UI 組件庫,作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架構建的組件庫。截止發文日期,已經在 Github 得到 11,200 Star, 944,600 次 NPM 安裝。
daisyui 官網
Tailwind CSS 是一個功能類優先的 CSS 框架,通過類似于 .flex、.pt-4、.text-center、.rotate-90 這種原子類組合的 class 名快速構建網站,在 HTML 代碼上就能完成開發,不需要再自己想各種 CSS 命名。
daisyUI 作為 Tailwind CSS 的組件庫,不僅繼承了它的優點,而且代碼更簡潔,主題非常漂亮有特點,打開官網就喜歡上它了。
daisyui 組件
支持搭配使用的框架
首先說說我最喜歡的主題,daisyUI 提供了 29 款主題,配色很舒服,各有特色,我首先想到用來做個人網站的主題,一定會很酷。
daisyui 默認主題
daisyui 暗主題
需要注意的是,使用 daisyUI 前,需要和 Tailwind CSS 一起安裝,最簡單的方式是 cdn 引入:
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.2/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
生產環境更推薦用 npm 的方式,這樣打包出來的項目會小很多:
安裝 daisyUI
npm i daisyui
然后,在你的tailwind.config.js文件里追加 daisyUI 的設置
module.exports={
//...
plugins: [require("daisyui")],
}
使用過 Tailwind CSS 的開發者一定對這種寫一堆 class 名來構建組件的方式印象很深刻,我一直沒有推薦 Tailwind CSS,就是因為個人實在不喜歡零零碎碎的 CSS 類名,我更傾向于寫語義清晰的類名來開發組件。我們來看看實現一個常規的按鈕,兩種寫法的區別:
<!-- Tailwind CSS 的寫法 -->
<a class="inline-block px-4 py-3 text-sm font-semibold
text-cente text-white uppercase transition
duration-200 ease-in-out bg-indigo-600
rounded-md cursor-pointer
hover:bg-indigo-700">Button</a>
<!-- daisyUI 的寫法 -->
<a class="btn btn-primary">Button</a>
daisyUI 的寫法實在太簡潔了,所以說 daisyUI 簡直是“反” Tailwind CSS 思路一點也不為過,不過 Tailwind CSS 的作者認為語義化的 CSS 并不好維護,因為隨著項目的迭代,很多 class 名早已失去了原有的意義了。各位前端小伙伴,你們覺得呢?
45 個組件如果沒法滿足,官方還提供了自定義組件的工具類,開發者可以快速構建自定義組件。官網提供了詳盡的中文文檔,純 CSS 本身也易懂,對應的組件也有 HTML 代碼例子,上手使用完全不是問題。
daisyui 開發文檔
總的來說,這是一款漂亮、流行,代碼簡潔的 web UI 組件庫,熟悉以后能提高開發效率,不妨寫個快速 demo 嘗試一下。
daisyUI 是基于 Tailwind CSS 構建的 CSS 組件庫,源碼基于 MIT 開源協議托管在 Github 上,任何個人和公司都可以免費下載使用,也可以用于商業項目。
和 daisyUI 類似的框架還有之前推薦過的 Bootstrap 和 Pico.css,感興趣的開發者也可以前往了解。
關注我,持續分享高質量的免費開源、免費商用的資源。
↓↓點【了解更多】查看本次分享的網址。
大家好,今天為大家分享一個由 www.helloworld.net 網站開發并開源的一個非常好用的工具 html2md, 并且源碼已經開源,再遇到喜歡的文章,就可以只輸入一個url,就能轉換成markdown文件了,使用非常的簡單
現在好的技術文章確實多,每天各種技術群里,各種技術社區,有很多質量非常好的技術文章,于是我們就收藏了,可是問題來了,我們收藏到哪呢?
最可氣的是,我收藏的文章,可能過了10天后,作者把這個文章刪除了,我真是。。。。。無語了。。。。
所以,helloworld.net的創始人之一水手花了一個周末的時間,開發了一款這樣的小工具,使用很簡單,代碼也很簡單,并且將其開源了出去,非常的好用
而且helloworld.net也提供了官方的鏈接, 大家可以試用一下
html2md已經開源并托管在github上
地址: https://github.com/helloworld-Co/html2md
javascript 開發的,具體是用vue框架開發的,做前端開發的小伙伴們恭喜了
主要使用以下技術棧
- vue 前端三劍客之一,主張最少,具有高度靈活性的漸進式框架
- nuxt 通過利用 Vue.js 和 Node.js最佳實踐來構建高性能應用程序
- express 基于 Node.js 平臺,快速、開放、極簡的 Web 開發框架
- element-ui 宇宙第一 Vue 第三方組件庫,有不服?
- js-dom 一款可在 Node 環境下模擬瀏覽器的 API 的庫
- turndown 使用 JavaScript 將 HTML 轉換為 Markdown
- axios 易用、簡潔且高效的 http庫,支持瀏覽器和 Node 環境。
- mavon-editor 一款基于 Vue 的 markdown 編輯器,支持所見即所得
- sass 強大的 Css 預處理器之一
也可以下載源碼編譯直接可以跑起來的
具體步驟如下:
第一步:下載
git clone git@github.com:helloworld-Co/html2md.git
cd ./html2md
第二步:安裝
npm install
或者
yarn install
第三步:啟動
npm run dev
或者
yarn dev
是不是很簡單,由于時倉促,代碼難免有bug,歡迎提出,我們隨時修改
html2md只是www.helloworld.net官方開源的一個小工具,后續我們還會開發出其它的有用的工具或者一些軟件,做一個真正為程序員著想的開發者社區
最后 ,如果你趕興趣,可以關注一下我們
后面還會發布更多的關于IT技術,編程,創業,資訊相關的文章
itHub真是個好東西,除了可以進行軟件版本和代碼管理以外,還可以創建和免費托管個人網站。其中即可在線創建文件,也可以上傳文件(不包括文件夾),也可以使用Git工具上傳包含多個文件或文件夾的文件夾,當然也可以下載。GitHub上的repository相當于本地磁盤的文件夾,但其中文件的每次修改都會自動保存一個歷史版本。
Git,GitHub和GitHub Pages都是非常密切相關的。 想象一下Git作為完成工作的工作流程,GitHub和GitHub Pages作為存儲工作的地方。 使用Git的項目被公開存儲在GitHub和GitHub Pages中,以一種非常普遍的方式解釋: Git是你在自己的計算機上本地執行的任務,而GitHub則是你的任務在服務器上公開存儲的地方。
1.1 Git
Git是一個版本控制系統,可以隨時跟蹤項目文件的變化。它通常會記錄所做的更改(如:已添加的內容?從文件中刪除的內容?),進行更改的人員,更改人員對更改的注釋和注釋,以及更改時間。它主要用于經常多人協作的軟件開發項目,所以從這個意義上說,它是幫助實現和改進協作的工具。然而,它的合作性讓它對出版社群產生了興趣,一些社區將其作為編輯和編輯工作流程中提供幫助的工具。
Git適用于那些希望以高效的方式維護多個文件版本的人,并及時返回訪問不同的版本,而不會將大量文件與存儲在不同位置的令人困惑的名稱混雜在一起。想想Git和版本控制就像一個魔術撤消按鈕。
在下圖中,每個階段代表一個“保存”。如果沒有Git,你就不能回到初稿和最終稿之間的任何階段。如果您想在最終草案中更改開頭段落,則必須刪除無法恢復的數據。要解決這個問題,我們使用“另存為”選項,命名不同的東西,刪除開頭的段落,并開始寫一個新的。
使用Git,流程是多方向的。 每個重要的更改在版本中標記為重要,然后繼續。 如果你需要回到早期階段,你可以不丟失任何數據。 目前,Google Docs“修訂歷史”或維基百科的“修改歷史”以這種方式工作。 Git只是更詳細一些,如果需要的話可以變得更復雜。
1.2 GitHub
GitHub是使用Git的軟件和Web開發項目(或其他基于文本的項目)的源代碼的Web托管服務。 在許多情況下,大部分代碼都是公開的,使開發人員可以輕松地調查、協作、下載、使用、改進和混合代碼。 特定項目代碼的容器稱為存儲庫repository。
GitHub上有成千上萬個非常酷且令人興奮的版本庫,每天都會添加新的版本庫。
1.3 GitHub Pages
GitHub Pages是通過GitHub免費托管的公共網頁。 GitHub用戶可以創建和托管個人網站(每個用戶允許一個)和與特定GitHub項目相關的網站。 頁面可以讓你做和GitHub一樣的東西,但是如果這個存儲庫是以特定的方式命名的,并且它里面的文件是HTML或者Markdown,你可以像其他網站一樣查看這個文件。 GitHub Pages是GitHub的自我認識版本。 Pages還附帶了一個名為Jekyll的強大的靜態網站生成器。
2.1 注冊個人帳戶
在https://github.com上注冊個人帳戶,如帳戶名wwuhn,屆時用你的帳戶名做為你的個人頁面登錄名,如https://wwuhn.github.io/
2.2 創建你的個人頁面的倉庫repository。 登錄到您的GitHub帳戶,并轉到https://github.com/new或從您的帳戶主頁上單擊添加新的存儲庫圖標“+”:
2.2 命名您的存儲庫wwuhn.github.io,確保它是公開的。
特別注意:wwuhn.github.io中的wwuhn也就是GigHub的帳戶名,必須相同,否則通過域名https://wwuhn.github.io/無法顯示創建的主頁。
2.3 添加一個index.html文件做為個人網站的主頁(開始頁面)。
2.3.1 單擊存儲庫名稱旁邊的加號圖標,然后直接在出現的輸入框中輸入文件名,創建一個index.html頁面。
2.3.1 在HTML文件中輸入以下代碼
<!DOCTYPE html> <html> <head> <title>wwuhn</title> <style type="text/css"> body{ margin:auto; width:66%; } ul li{ list-style:none; display:inline; list-style-position:inside; } </style> </head> <body> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/cv">CV</a></li> <li><a href="/blog">Blog</a></li> </ul> </nav> <div class="container"> <h3>Hi there, I'm Hank Quinlan!</h3> <p>I'm best known as the horrible cop from <em>A Touch of Evil</em> Don't trust me. <a href="/about">Read more about my life...</a></p> </div><!-- /.container --> <footer> <ul> <li><a href="mailto:wwuhnwu@163.com">e-mail</a></li> <li><a >git pages:https://wwuhn.github.io/</a></li> </ul> </footer> </body> </html>
如果網頁中有中文或規定了字碼編碼,注意編碼格式:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2.3.3 提交index.html。 在頁面的底部,有一個文本輸入區域,用于添加更改的描述以及提交文件的按鈕。
至此,一個簡單的個人網頁就已建立。
打開瀏覽器,輸入https://wwuhn.github.io/即可,主頁為index.html。
index.html及相關文件如果已在本地磁盤建立,也可以在上面的頁面(https://github.com/wwuhn/wwuhn.github.io)內點擊“Upload files”上傳本地文件至https://github.com/wwuhn/wwuhn.github.io內,可以多選,但不能上傳文件夾。
參考:https://www.toutiao.com/i6589522244660101635/
3.1 下載和安裝Git工具
下載地址:https://git-scm.com/downloads
根據操作系統進行選擇,windows版本的安裝副本大概40M左右。
git bash界面如下:
符號$是命令提示符。
3.2 將github上的witiso.github.io倉庫克隆到本地文件夾f:\wwuhn
$ cd f:\wwuhn $ git clone https://github.com/wwuhn/wwuhn.github.io
3.3 git bash切換至wwuhn.github.io
$ cd wwuhn.github.io
此時git bash上的提示符路徑為:
wwuhnwu01@wwuhnwu01 MINGW32 /f/wwuhn/wwuhn.github.io (master)
3.4 將文件復制到witiso.github.io文件夾內。
3.5 本地磁盤目錄中的文件(包括文件夾)加載到緩存
將所有文件添加緩存(在index數據結構中記錄文件提交之前的狀態):
$ git add .
(注意上面的命令使用了通配符:英文句點.)
或
$ git add --all
3.6 遞交到本地Git倉庫
$ git commit -m "Initial commit"
(雙引號內是提交注釋)
git commit命令可以將當前緩存中的文件實際保存到倉庫的歷史記錄中。
以上幾個操作可隨時git status查看本地git倉庫中的基本情況。
3.7 push到遠程GitHub倉庫的分支
$ git push -u origin master
上述命名執行完后,整個F:\wwuhn\wwuhn.github.io文件夾中的全部內容就上傳到了遠程倉庫https://github.com/wwuhn/wwuhn.github.io中。
-End-
*請認真填寫需求信息,我們會在24小時內與您取得聯系。