daisyUI - 主题漂亮、代码纯净！免费开源的

daisyUI - 主题漂亮、代码纯净！免费开源的 Tailwind CSS 组件库

亮有特色的 CSS 组件库，组件代码非常简洁，也支持深度定制主题、定制组件，可以搭配 Vue / React 等框架使用。

关于 daisyUI

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 的技术特性

提供 45 个常用组件，多达 29 款主题，款款都是精品
相比 Tailwind CSS 的原子类，daisyUI 采用语义化的 class 名，写出更纯净的 HTML
支持深度自定义、可定制主题
是一个纯净 CSS 组件，所以支持和任意 Vue / React 这样的框架一起使用

支持搭配使用的框架

开发上手体验和使用感受

首先说说我最喜欢的主题，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

使用过 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，感兴趣的开发者也可以前往了解。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的网址。

个免费的开源的html转markdown语法的工具

大家好，今天为大家分享一个由 www.helloworld.net 网站开发并开源的一个非常好用的工具 html2md, 并且源码已经开源，再遇到喜欢的文章，就可以只输入一个url，就能转换成markdown文件了，使用非常的简单

现在好的技术文章确实多，每天各种技术群里，各种技术社区，有很多质量非常好的技术文章，于是我们就收藏了，可是问题来了，我们收藏到哪呢？

怎么收藏呢？

微信群里发的文章，我们可以收藏
csdn中的技术文章我们也可以注册一个账号收藏
helloworld.net技术社区里面的文章再注册一个账号收藏
可是技术社区好多呢，每个社区都要注册一个账号，收藏也是可以的，只不过不方便我们统一的管理，实在是不方便，当然也有人用浏览器的收藏夹去收藏，比如我就是这样做的，可是我们程序员大部分用的还是chrome浏览器，所以问题来了，chrome浏览器登录账号，必须要会科学上网，也是很麻烦

最可气的是，我收藏的文章，可能过了10天后，作者把这个文章删除了，我真是。。。。。无语了。。。。

所以，helloworld.net的创始人之一水手花了一个周末的时间，开发了一款这样的小工具，使用很简单，代码也很简单，并且将其开源了出去，非常的好用
而且helloworld.net也提供了官方的链接，大家可以试用一下

github地址呢？

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相当于本地磁盘的文件夹，但其中文件的每次修改都会自动保存一个历史版本。

1 Git, GitHub, and GitHub Pages分别都是什么?

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 创建GitHub Pages

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 href="https://wwuhn.github.io/">git pages:https://wwuhn.github.io/</a></li>
 </ul>
 </footer>
 </body>
</html>

如果网页中有中文或规定了字码编码，注意编码格式：

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内，可以多选，但不能上传文件夹。

3 使用git工具将包含有文件夹的整个本地站点上传

参考：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－

在线咨询

上一篇：JavaScript包装对象之字符串
下一篇：搜狐专访高产个性设计团队-乘于九设计

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商