首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用 NextJS 和 TailwindCSS 重构博客

git 地址 在线地址 这是笔者第三次重构博客,虽然博客应用是最简单应用,但学习新技术何不从重构博客开始?...4、之前写了《使用 CSS variables 和 Tailwind css 实现主题换肤》也运用到了博客中。...它使用 Prisma Schema,声明方式定义应用程序模型。然后使用 Prisma Migrate 命令, Prisma Schema 会生成 SQL 迁移并根据数据库执行它们。...codemiror 和 remark 自己写组件 ,这一版发现掘金 Markdown 编辑比较好用,就直接使用了bytemd, 底层都是使用了 remark 和 rehype,支持任何框架,并且拥有丰富插件...小结 本文主要是笔者记录重构博客所用知识和记录,当然还有很多不足,也还有很多功能得开发, 比如:图床、评论、SEO 优化、 统计和监控等。

2.3K20

使用 NextJS 和 TailwindCSS 重构个人博客

git地址 在线地址 这是笔者第三次重构博客,虽然博客应用是最简单应用,但学习新技术何不从重构博客开始?...{js,ts,jsx,tsx}']打包时只会提取使用样式,让应用css最小化。 4、之前写了《使用 CSS variables 和Tailwind css实现主题换肤》也运用到了博客中。...它使用 Prisma Schema,声明方式定义应用程序模型。然后使用 Prisma Migrate 命令, Prisma Schema 会生成 SQL 迁移并根据数据库执行它们。...codemiror 和 remark 自己写组件 ,这一版发现掘金 Markdown 编辑比较好用,就直接使用了bytemd, 底层都是使用了 remark 和 rehype,支持任何框架,并且拥有丰富插件...小结 本文主要是笔者记录重构博客所用知识和记录,当然还有很多不足,也还有很多功能得开发, 比如:图床、评论、SEO优化、 统计和监控等。

2.6K20
您找到你想要的搜索结果了吗?
是的
没有找到

如何使用 Next.js14 + Tailwindcss 重构个人项目的

前言去年在学习 React 和 Nest 时候,参考了大佬 imsyy 项目 DailyHot,以此项目的灵感基于 React 开发,完成之后就没怎么在意。...后来发现这个项目还有点小流量,每天差不多 200-400 IP 访问量:又抽时间优化了下用户体验,又发现 SPA 应用又不利于 SEO 优化,正好这阶段自己又有学习 Next.js14 想法,正好可以以此参考进行重构学习...Vecel 本地部署// 全局安装 vercelnpm i -g vercel// 登录vercel login// 项目推送vercel// 挂载生产vercel --prod具体教程可参考文章:如何使用...Vercel 托管静态网站⚠️ 责任声明本项目的接口会频繁请求官方数据,部分接口使用了 页面爬虫抓取,若违反对应页面的相关规则,请 及时通知去除该接口如果想集成其他平台热搜或热点 API,可以提...Issues 本项目提供 API 仅供开发者进行技术研究和开发测试使用,任何因使用本 API 产生损失,本项目不负担任何赔偿和责任 鸣谢特此感谢为本项目提供支持与灵感项目,本项目在其基础上使用 Next.js

16710

如何使用Python来自动化婚礼

,但对而言,将会是一个难忘日子,因为在那一天,结婚了。...追踪人们是否接收到邀请,以及他们是否想要来参加提供免费食物和饮料派对,是非常耗时,当然,一个自动?最后,邀请卡不是环境友好,因为它们被一次性使用,并且容易丢失或错放。 回到名单。...如果你想要跳到代码,那么你可以看看GitHub上repo。 SMS对需求而言相当完美。可以配置发出群发短信,并且快速有效地处理回应。...(发送给客人邮件数,稍后它会派上用场) 主要数据输入完成后,使用gspread来遍历列表,并且发送短信给每一个具有与之相关联手机号码客人:Sheets.py import json import...接下来,使用Flask作为web服务器,然后设置Twilio消息请求URL指向/messages url,并创建简单if语句来解析回复 (yes, no):hello_guest.py @app.route

2.7K80

使用hooks重构antd pro想象力(三)如何利用hooks干掉redux

经过组件化思维层层分析,我们将antd pro官方demo分析页伪代码重构至如下: export function Analysis() { const [dashboardAnalysis,...第一个:请求数据结果 设定泛型参数 第二个:表示正在请求状态 loading 第三个:出现异常时提示语句 第四个:传入参数有哪些,如果参数更改,还得重新请求接口 其他根据实际情况不同,还会需要新增更多参数...第一个:api请求函数 第二个:api请求函数参数 第三个:数据默认值 也就是说,我们要把该接口涉及到所有逻辑都放在该自定义hooks中统一处理。把不同元素都作为参数传入即可。...使用时,只需要一句代码,我们就能够获取到我们想要数据,状态,对应操作方法等。...仅仅只使用最简单hooks方式来维护数据就足够了。

1.3K10

如何理解并使用maven

前言 一直想写一篇关于Maven文章,但是不知如何下笔,如果说能使用,会使用Maven的话,一到两个小时足矣,不需要搞懂各种概念。那么给大家来分享下如何理解并使用maven。...这个值很少改动; groupId:指明创建项目的组织或者小组唯一标识; GroupId 是项目的关键标识,典型,此标识组织完全限定名来定义。...第二,象源代码包通常使用 artifactId 作为最后名称一部分。典型产品名称使用这个格式; version:项目产品版本号。...clean:清理输出目录target下生成jar包 compile:编译项目主代码 编译完成后,我们一般都会运行测试代码进行单元测试,虽然很多情况下,我们并没有这么做,但是还是建议大家通过Maven做一些自动化单元测试...但是这样拷贝就违背了我们当初想要自动解决依赖问题,所以如何才能让其它Maven项目直接引用这个JAR包呢? 我们需要执行mvn clean install命令,执行结果如下: ?

1.6K30

如何使用RSS订阅博客文章更新

用户使用RSS阅读器订阅:用户可以通过RSS阅读器软件(如Feedly、Inoreader等)输入这个RSS链接,从而订阅这个网站更新。...二、RSS订阅源获取 使用官方或者个人搭建RSS服务,许多支持RSS订阅网站会在显眼位置(如网页底部、侧边栏或头部)放置一个RSS图标。点击这个图标通常会带你到RSS订阅链接页面。...比如我博客RSS地址在最下方: 介绍一个可以发现当前网页rss链接浏览器插件,RSSHub Radar[1]: rss-radar 这里介绍一些常用RSS源: ScienceDirect论文...,访问你感兴趣ScienceDirect期刊网站,使用刚刚提到插件可以获取到rss链接。...1.Read You ReadYou Read You 是一个 Material You[9] 风格呈现 Android RSS 阅读器,这些是目前已完成功能和未来要做事。

75110

【译】Activity分割动画如何使用动画##

思路很简单: Activity A保存为bitmap 把bitmap分割成两个子bitmap 子bitmap传递至Activity B 在Activity B布局之上显示两个子bitmap 使用动画向外移出两个子...对于低内存或者大屏幕设备来说,可能是很大开销。如果你依然选择使用,请小心,并且不要过度使用。...但是发现,最简单实现方式,就是将他们成员变量形式放到一个公共区域中。所以,创建了一个静态类用来持有子bitmap,所有的创建操作和动画逻辑,也都在这里个类里面,稍后会详细介绍。...使用硬件加速(了解更多有关硬件加速动画,请阅读最新发布blog)并且在动画结束或者取消后,做了一些清理操作(如,移除硬件图层,把Imageview从Window窗口移除等等) 如何使用动画##...曾反复思考,在尽量不限制开发者情况下,如何最简单便捷使用它。

1.4K20

如何使用RSS订阅博客文章更新

用户使用RSS阅读器订阅:用户可以通过RSS阅读器软件(如Feedly、Inoreader等)输入这个RSS链接,从而订阅这个网站更新。...二、RSS订阅源获取 使用官方或者个人搭建RSS服务,许多支持RSS订阅网站会在显眼位置(如网页底部、侧边栏或头部)放置一个RSS图标。点击这个图标通常会带你到RSS订阅链接页面。...比如我博客RSS地址在最下方: 介绍一个可以发现当前网页rss链接浏览器插件,RSSHub Radar[1]: rss-radar 这里介绍一些常用RSS源: ScienceDirect论文...,访问你感兴趣ScienceDirect期刊网站,使用刚刚提到插件可以获取到rss链接。...1.Read You ReadYou Read You 是一个 Material You[9] 风格呈现 Android RSS 阅读器,这些是目前已完成功能和未来要做事。

46310

在工作中是如何使用Git

本文首发于政采云前端团队博客:在工作中是如何使用 Git https://www.zoo.team/article/how-to-use-git image.png 前言 最近在网上有个真实发生案例比较火...上面的案例引申出一个问题,入职一家新公司,你 leader 给你分配了仓库权限后,如何配置本地 Git 环境并拉取代码?...莫慌,按照下面四个步骤走,保证你可以顺利使用 Git 进行拉取代码! 下载 Git 下载地址 (https://git-scm.com/downloads) ,选择自己系统对应版本下载即可。...Git 工作区域和流程 要想弄懂 Git 是怎么对我们代码进行管理,那首当其冲是了解 Git 工作区域是如何构成。...这里分享一个自己常用别名设置,把以下配置替换到 .gitconfig 文件里 [alias] 所属区域,然后就可以愉快使用了~ [alias] st = status -sb co = checkout

1.7K30

如何使用ChatGPT和CoPilot作为编码助手

在注释中逗号分隔方式列出了所有的表名,然后编写了第一张表删除 SQL 查询,以及整个删除命令连接光标使用。...目标是为其添加个性化视觉效果,以及在组件顶部增添一些附加文字。尽管文档详细地介绍了如何用新组件替换原有组件,但并没有明确地提到如何在保留原功能情况下进行扩展。...于是,向 ChatGPT 提出了问题: 如何在 react-flow 中创建自定义边,这条边是粗大紫色线条,并且末端有一个大箭头 以下是收到答复: import React from 'react...由于在网络上难以找到具体实现示例,向 ChatGPT 提问: 给我一个样本代码,展示如何使用 react-flow 和 cola 布局来排列节点 输出: import React from...于是,询问了 ChatGPT 该如何操作,它提供了一套完整指导步骤来帮助我完成这个操作。

49630

如何使用Jetson AGX Xavier上DLA

DLA支持加速CNN层,例如卷积,解卷积,激活函数,最小/最大/平均池,局部响应规范化和完全连接层。 ?...开发人员可以使用TensorRT 对DLA引擎进行编程,在网络上执行推理,包括对AlexNet,GoogleNet和ResNet-50支持。...用于构建尺寸必须在运行时使用。 DLA支持最大权重大小为512 MB。 DLA网络最多只能支持1 GB中间张量数据。作为DLA图输入和输出张量不计入此限制。...由于硬件和软件内存限制,最多可以同时使用4个DLA可加载项。 注意:DLA批次大小是除索引大小以外所有索引大小乘积 CHW 大小。...例如,如果输入尺寸为 NPQRS,有效批量大小是 N * P。 一般情况,要使用DLA,是通过对TensorRT使用

2K20

分享一个关于this对象编程小技巧,如何使用箭头函数避免this对象混淆?

微信小程序举例。小程序主要语言是js,使用小程序也方便说明我们接下来要讲问题。...为什么使用箭头可以呢? 四 因为在箭头函数中,this对象与封闭词法环境中this保持一致。换一句话,箭头函数this,是定义与执行它函数中this对象。...或者我们可以理解为,箭头函数是没有this对象箭头函数this,取决于它身处何处。 那么,回顾一下,this是什么?...一般我们都是在一个函数或方法中使用this,这个时候this指代什么,本质上取决于当前函数是由谁调用。...但在大多数情况下,我们使用不捆绑this箭头函数,来避免this对象混淆问题,是最简单省事方法。 11月7日

1.1K30

Scala如何改变了编程风格:从命令式到函数

尽管在C++里面这种编程风格是有可能,但在使用C++日子里,却没有考虑用这种方式进行多重继承,而我在C++设计中也不怎么使用抽象基类。...考虑到 Scala 是静态类型可以享受到诸多静态类型好处,诸如将文档作为类型, IDE 代码自动完成,动态代码重构( deterministic refactoring )以及执行速度等...Scala 允许我方便地应用函数式和命令式风格,结合使用此二者,就能找到写出清晰代码最佳方式。 函数式编程和命令式编程简介 什么是函数式编程?...重点是捕捉"是什么以及为什么",而不是"如何做"。与将重点放在执行连续命令上过程性编程相比,函数式编程重点是函数定义而不是状态机(State Machine)实现。...较高阶命令式编程语言使用变数和更复杂语句,但仍依从相同典范。食谱和行动清单,虽非电脑程式,但与命令式编程有相似的风格:每步都是指令,有形世界控制情况。

1.1K30

2018-07-19 如何重构箭头型”代码如何重构箭头型”代码

原文地址:https://coolshell.cn/articles/17757.html 如何重构箭头型”代码 本文主要起因是,一次在微博上和朋友关于嵌套好几层if-else语句代码重构讨论(...但是…… 关于箭头型代码问题有如下几个: 1)显示器不够宽,箭头型代码缩进太狠了,需要来回拉水平滚动条,这让在读代码时候,相当不舒服。...抽取成函数 微博上有些人说,continue 语句破坏了阅读代码通畅,觉得他们一定没有好好读这里面的代码,其实,我们可以看到,所有的 if 语句都是在判断是否出错情况,所以,在维护代码时候,你可以完全不理会这些...2)把条件中语句块抽取成函数。 有人说:“如果代码不共享,就不要抽取成函数!”,持有这个观点的人太死读书了。...函数是代码封装或是抽象,并不一定用来作代码共享使用函数用于屏蔽细节,让其它代码耦合于接口而不是细节实现,这会让我们代码更为简单,简单东西都能让人易读也易维护,写出让人易读易维护代码才是重构代码初衷

97360

dubbo扩展jar包如何无侵入给别人使用

有这么一个场景, 写了一个dubbo spi扩展jar包 dubbo-ext.jar; 这个Jar包是不可执行包(没有main函数), 它作用是对现有运行dubbo服务做一些增强; 那么这样一个扩展包.... java -jar 启动方式 我们现在大部分项目都会选择SpringBoot框架; 最常用打包方式是打成 jar 包;然后使用javar -jar XXX.jar 启动方式; 但是这样的话,...解压XXX.jar包,然后把我们扩展包dubbo-ext.jar 扔到 BOOT-INF/lib中; 然后重新打包; 这种方式应该是也可以实现; 但是却比较繁琐;这里推荐第二种方式 使用命令...看到上面的参数选项; 我们决定使用 -uf0 来操作; u: 更新现有的档案 f: 指定档案文件名 0:仅存储;不适用任何ZIP压缩 操作流程 ?...不然就算加载成功了,路径不对,也使用不了 ! 如果目标文件是一个war包呢 同理~; war包解压看看; ? 把路径改成 WEB-INF/lib 就行了!! 如果是一个zip包呢?

98030

javascript学习之路_01之js基础2JavaScript对象JavaScript函数JavaScript运算符JavaScript选择语句JavaScript循环语句JavaScript

JavaScript中对象与java中和其他面向对象语言是基本一致如何访问对象,如何访问对象方法,如何新建对象等。都是相当一致。...JavaScript函数 函数是由事件驱动或者当它被调用时执行可重复使用代码块。...JavaScript函数语法 function myFunction(){ 函数内容 } 与java语言中函数一样,参数是可选,返回值是可选。...在 JavaScript 中,我们可使用以下条件语句: if 语句 - 只有当指定条件为 true 时,使用语句来执行代码 if...else 语句- 当条件为 true 时执行代码,当条件为 false...时执行其他代码 if...else if....else 语句 - 使用语句来选择多个代码块之一来执行 switch 语句 - 使用语句来选择多个代码块之一来执行 JavaScript循环语句 JavaScript

1.1K40

为什么 Mac 运行缓慢以及如何使用CleanMyMac X修复它

10 种有保证解决方案,可加快慢速 Mac 运行速度 1.后台运行过多 如果您 Mac 无法再处理简单任务,并且您想找到“为什么 Mac 这么慢?”...它是这样工作: 免费下载 CleanMyMac X。 安装并打开应用程序。 转到系统垃圾。 单击扫描。 扫描完成后,单击“清除”按钮删除垃圾或单击“查看详细信息”检查将删除哪些文件。...如果您在完成上述工作后仍然问为什么 MacBook 这么慢,请确保您 Mac 已安装所有最新更新。 4....使用他们关于管理和优化 Mac 存储有用建议。 单击 Apple 菜单 > 系统设置。 在这里,选择常规,然后选择存储。 在“存储”选项卡下,您会看到一些有关如何优化存储建议。...我们所有人都会下载一开始看起来有用且令人兴奋应用程序,但结果却使我们磁盘变得杂乱无章,而不是经常使用。 快速修复:卸载未使用应用程序 回答“为什么 iMac 这么慢?”

2.7K30
领券