整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
亮有特色的 CSS 組件庫，組件代碼非常簡潔，也支持深度定制主題、定制組件，可以搭配 Vue / React 等框架使用。
daisyUI 是一款極為流行的 CSS UI 組件庫，作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架構(gòu)建的組件庫。截止發(fā)文日期，已經(jīng)在 Github 得到 11,200 Star， 944,600 次 NPM 安裝。
daisyui 官網(wǎng)
Tailwind CSS 是一個功能類優(yōu)先的 CSS 框架，通過類似于 .flex、.pt-4、.text-center、.rotate-90 這種原子類組合的 class 名快速構(gòu)建網(wǎng)站，在 HTML 代碼上就能完成開發(fā)，不需要再自己想各種 CSS 命名。
daisyUI 作為 Tailwind CSS 的組件庫，不僅繼承了它的優(yōu)點(diǎn)，而且代碼更簡潔，主題非常漂亮有特點(diǎn)，打開官網(wǎng)就喜歡上它了。
daisyui 組件
支持搭配使用的框架
首先說說我最喜歡的主題，daisyUI 提供了 29 款主題，配色很舒服，各有特色，我首先想到用來做個人網(wǎng)站的主題，一定會很酷。
daisyui 默認(rèn)主題
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>生產(chǎn)環(huán)境更推薦用 npm 的方式，這樣打包出來的項(xiàng)目會小很多：
安裝 daisyUI
npm i daisyui然后，在你的tailwind.config.js文件里追加 daisyUI 的設(shè)置
module.exports={
//...
plugins: [require("daisyui")],
}使用過 Tailwind CSS 的開發(fā)者一定對這種寫一堆 class 名來構(gòu)建組件的方式印象很深刻，我一直沒有推薦 Tailwind CSS，就是因?yàn)閭€人實(shí)在不喜歡零零碎碎的 CSS 類名，我更傾向于寫語義清晰的類名來開發(fā)組件。我們來看看實(shí)現(xiàn)一個常規(guī)的按鈕，兩種寫法的區(qū)別：
<!-- 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 的寫法實(shí)在太簡潔了，所以說 daisyUI 簡直是“反” Tailwind CSS 思路一點(diǎn)也不為過，不過 Tailwind CSS 的作者認(rèn)為語義化的 CSS 并不好維護(hù)，因?yàn)殡S著項(xiàng)目的迭代，很多 class 名早已失去了原有的意義了。各位前端小伙伴，你們覺得呢？
45 個組件如果沒法滿足，官方還提供了自定義組件的工具類，開發(fā)者可以快速構(gòu)建自定義組件。官網(wǎng)提供了詳盡的中文文檔，純 CSS 本身也易懂，對應(yīng)的組件也有 HTML 代碼例子，上手使用完全不是問題。
daisyui 開發(fā)文檔
總的來說，這是一款漂亮、流行，代碼簡潔的 web UI 組件庫，熟悉以后能提高開發(fā)效率，不妨寫個快速 demo 嘗試一下。
daisyUI 是基于 Tailwind CSS 構(gòu)建的 CSS 組件庫，源碼基于 MIT 開源協(xié)議托管在 Github 上，任何個人和公司都可以免費(fèi)下載使用，也可以用于商業(yè)項(xiàng)目。
和 daisyUI 類似的框架還有之前推薦過的 Bootstrap 和 Pico.css，感興趣的開發(fā)者也可以前往了解。
關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開源、免費(fèi)商用的資源。
↓↓點(diǎn)【了解更多】查看本次分享的網(wǎng)址。
大家好，今天為大家分享一個由 www.helloworld.net 網(wǎng)站開發(fā)并開源的一個非常好用的工具 html2md, 并且源碼已經(jīng)開源，再遇到喜歡的文章，就可以只輸入一個url，就能轉(zhuǎn)換成markdown文件了，使用非常的簡單
現(xiàn)在好的技術(shù)文章確實(shí)多，每天各種技術(shù)群里，各種技術(shù)社區(qū)，有很多質(zhì)量非常好的技術(shù)文章，于是我們就收藏了，可是問題來了，我們收藏到哪呢？
最可氣的是，我收藏的文章，可能過了10天后，作者把這個文章刪除了，我真是。。。。。無語了。。。。
所以，helloworld.net的創(chuàng)始人之一水手花了一個周末的時間，開發(fā)了一款這樣的小工具，使用很簡單，代碼也很簡單，并且將其開源了出去，非常的好用
而且helloworld.net也提供了官方的鏈接， 大家可以試用一下
html2md已經(jīng)開源并托管在github上
地址： https://github.com/helloworld-Co/html2md
javascript 開發(fā)的，具體是用vue框架開發(fā)的，做前端開發(fā)的小伙伴們恭喜了
主要使用以下技術(shù)棧
- vue 前端三劍客之一，主張最少，具有高度靈活性的漸進(jìn)式框架
- nuxt 通過利用 Vue.js 和 Node.js最佳實(shí)踐來構(gòu)建高性能應(yīng)用程序
- express 基于 Node.js 平臺，快速、開放、極簡的 Web 開發(fā)框架
- element-ui 宇宙第一 Vue 第三方組件庫，有不服？
- js-dom 一款可在 Node 環(huán)境下模擬瀏覽器的 API 的庫
- turndown 使用 JavaScript 將 HTML 轉(zhuǎn)換為 Markdown
- axios 易用、簡潔且高效的 http庫，支持瀏覽器和 Node 環(huán)境。
- mavon-editor 一款基于 Vue 的 markdown 編輯器，支持所見即所得
- sass 強(qiáng)大的 Css 預(yù)處理器之一
也可以下載源碼編譯直接可以跑起來的
具體步驟如下：
第一步：下載
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官方開源的一個小工具，后續(xù)我們還會開發(fā)出其它的有用的工具或者一些軟件，做一個真正為程序員著想的開發(fā)者社區(qū)
最后 ，如果你趕興趣，可以關(guān)注一下我們
后面還會發(fā)布更多的關(guān)于IT技術(shù)，編程，創(chuàng)業(yè)，資訊相關(guān)的文章
itHub真是個好東西，除了可以進(jìn)行軟件版本和代碼管理以外，還可以創(chuàng)建和免費(fèi)托管個人網(wǎng)站。其中即可在線創(chuàng)建文件，也可以上傳文件（不包括文件夾），也可以使用Git工具上傳包含多個文件或文件夾的文件夾，當(dāng)然也可以下載。GitHub上的repository相當(dāng)于本地磁盤的文件夾，但其中文件的每次修改都會自動保存一個歷史版本。
Git，GitHub和GitHub Pages都是非常密切相關(guān)的。 想象一下Git作為完成工作的工作流程，GitHub和GitHub Pages作為存儲工作的地方。 使用Git的項(xiàng)目被公開存儲在GitHub和GitHub Pages中，以一種非常普遍的方式解釋: Git是你在自己的計算機(jī)上本地執(zhí)行的任務(wù)，而GitHub則是你的任務(wù)在服務(wù)器上公開存儲的地方。
1.1 Git
Git是一個版本控制系統(tǒng)，可以隨時跟蹤項(xiàng)目文件的變化。它通常會記錄所做的更改（如：已添加的內(nèi)容？從文件中刪除的內(nèi)容？），進(jìn)行更改的人員，更改人員對更改的注釋和注釋，以及更改時間。它主要用于經(jīng)常多人協(xié)作的軟件開發(fā)項(xiàng)目，所以從這個意義上說，它是幫助實(shí)現(xiàn)和改進(jìn)協(xié)作的工具。然而，它的合作性讓它對出版社群產(chǎn)生了興趣，一些社區(qū)將其作為編輯和編輯工作流程中提供幫助的工具。
Git適用于那些希望以高效的方式維護(hù)多個文件版本的人，并及時返回訪問不同的版本，而不會將大量文件與存儲在不同位置的令人困惑的名稱混雜在一起。想想Git和版本控制就像一個魔術(shù)撤消按鈕。
在下圖中，每個階段代表一個“保存”。如果沒有Git，你就不能回到初稿和最終稿之間的任何階段。如果您想在最終草案中更改開頭段落，則必須刪除無法恢復(fù)的數(shù)據(jù)。要解決這個問題，我們使用“另存為”選項(xiàng)，命名不同的東西，刪除開頭的段落，并開始寫一個新的。
使用Git，流程是多方向的。 每個重要的更改在版本中標(biāo)記為重要，然后繼續(xù)。 如果你需要回到早期階段，你可以不丟失任何數(shù)據(jù)。 目前，Google Docs“修訂歷史”或維基百科的“修改歷史”以這種方式工作。 Git只是更詳細(xì)一些，如果需要的話可以變得更復(fù)雜。
1.2 GitHub
GitHub是使用Git的軟件和Web開發(fā)項(xiàng)目（或其他基于文本的項(xiàng)目）的源代碼的Web托管服務(wù)。 在許多情況下，大部分代碼都是公開的，使開發(fā)人員可以輕松地調(diào)查、協(xié)作、下載、使用、改進(jìn)和混合代碼。 特定項(xiàng)目代碼的容器稱為存儲庫repository。
GitHub上有成千上萬個非常酷且令人興奮的版本庫，每天都會添加新的版本庫。
1.3 GitHub Pages
GitHub Pages是通過GitHub免費(fèi)托管的公共網(wǎng)頁。 GitHub用戶可以創(chuàng)建和托管個人網(wǎng)站（每個用戶允許一個）和與特定GitHub項(xiàng)目相關(guān)的網(wǎng)站。 頁面可以讓你做和GitHub一樣的東西，但是如果這個存儲庫是以特定的方式命名的，并且它里面的文件是HTML或者M(jìn)arkdown，你可以像其他網(wǎng)站一樣查看這個文件。 GitHub Pages是GitHub的自我認(rèn)識版本。 Pages還附帶了一個名為Jekyll的強(qiáng)大的靜態(tài)網(wǎng)站生成器。
2.1 注冊個人帳戶
在https://github.com上注冊個人帳戶，如帳戶名wwuhn，屆時用你的帳戶名做為你的個人頁面登錄名，如https://wwuhn.github.io/
2.2 創(chuàng)建你的個人頁面的倉庫repository。 登錄到您的GitHub帳戶，并轉(zhuǎn)到https://github.com/new或從您的帳戶主頁上單擊添加新的存儲庫圖標(biāo)“+”：
2.2 命名您的存儲庫wwuhn.github.io，確保它是公開的。
特別注意：wwuhn.github.io中的wwuhn也就是GigHub的帳戶名，必須相同，否則通過域名https://wwuhn.github.io/無法顯示創(chuàng)建的主頁。
2.3 添加一個index.html文件做為個人網(wǎng)站的主頁（開始頁面）。
2.3.1 單擊存儲庫名稱旁邊的加號圖標(biāo)，然后直接在出現(xiàn)的輸入框中輸入文件名，創(chuàng)建一個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>
如果網(wǎng)頁中有中文或規(guī)定了字碼編碼，注意編碼格式：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2.3.3 提交index.html。 在頁面的底部，有一個文本輸入?yún)^(qū)域，用于添加更改的描述以及提交文件的按鈕。
至此，一個簡單的個人網(wǎng)頁就已建立。
打開瀏覽器，輸入https://wwuhn.github.io/即可，主頁為index.html。
index.html及相關(guān)文件如果已在本地磁盤建立，也可以在上面的頁面（https://github.com/wwuhn/wwuhn.github.io）內(nèi)點(diǎn)擊“Upload files”上傳本地文件至https://github.com/wwuhn/wwuhn.github.io內(nèi)，可以多選，但不能上傳文件夾。
參考：https://www.toutiao.com/i6589522244660101635/
3.1 下載和安裝Git工具
下載地址：https://git-scm.com/downloads
根據(jù)操作系統(tǒng)進(jìn)行選擇，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 將文件復(fù)制到witiso.github.io文件夾內(nèi)。
3.5 本地磁盤目錄中的文件（包括文件夾）加載到緩存
將所有文件添加緩存（在index數(shù)據(jù)結(jié)構(gòu)中記錄文件提交之前的狀態(tài)）：
$ git add .
（注意上面的命令使用了通配符：英文句點(diǎn).）
或
$ git add --all
3.6 遞交到本地Git倉庫
$ git commit -m "Initial commit"
(雙引號內(nèi)是提交注釋)
git commit命令可以將當(dāng)前緩存中的文件實(shí)際保存到倉庫的歷史記錄中。
以上幾個操作可隨時git status查看本地git倉庫中的基本情況。
3.7 push到遠(yuǎn)程GitHub倉庫的分支
$ git push -u origin master
上述命名執(zhí)行完后，整個F:\wwuhn\wwuhn.github.io文件夾中的全部內(nèi)容就上傳到了遠(yuǎn)程倉庫https://github.com/wwuhn/wwuhn.github.io中。
－End－
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
