2023-11-28 08:00:00
Astro.js提供了一个现代，高效，易于使用的框架，使得开发个人博客变得更加简单和直接。
主要特点：
组件群岛: 用于构建更快网站的全新 web 架构。
服务器优先的 API 设计: 移除客户端上高资源消耗的激活过程。
默认零 JS: 没有 JavaScript 运行时开销来减慢你的速度。
边缘就绪: 在任何地方部署，甚至像 Deno 或 Cloudflare 这样的全球边缘运行时。
可定制: Tailwind, MDX 和 100 多个其他集成可供选择。
不依赖特定 UI: 支持 React, Preact, Svelte, Vue, Solid, Lit 等等。
打开官网 Astro ，你可以从0开始构建你的博客。
我更加推荐从主题模板构建你的博客，下面我将介绍如何构建你的Astro博客；
打开Astro主题商城 Themes，挑选出你感兴趣的主题
2、选择感兴趣的主题，关联你新的博客仓库，我选择的主题是：
3、拉取刚刚关联仓库的代码，回到仓库目录安装依赖
npm install
这里注意，node版本必须 >=18.14.1，否则会报错
4、运行项目
npm run dev
这个时候astro的项目已在本地运行成功，接下来在src写构建你的博客内容，目录结构解释如下：
- .astro 这个目录是 Astro.js 项目的根目录，用于存放 Astro.js 的配置文件
- config.js Astro.js 的配置文件，用于指定全局配置选项，例如构建输出目录、插件等
- components 这个目录用于存放 Astro.js 组件，组件是 Astro.js 中最基本的构建单元
- Layout.astro 一个示例组件，用于定义网页的布局和结构。
- dist 这个目录是构建过程中生成的目标输出目录，包含最终生成的静态网页文件。
- pages 这个目录用于存放网站的页面文件，每个页面对应一个 Astro.js 组件。
- index.astro 一个示例页面文件，表示网站的首页。
- static 这个目录用于存放静态资源文件，例如图片、样式表、JavaScript 文件等。
- package.json 这个文件是 Node.js 项目的配置文件，其中包含了项目的依赖项和脚本命令等信息。
- README.md 这个文件是项目的说明文档，通常包含了项目的介绍、使用方法和其他相关信息。
更多配置项请阅读官网文档：https://docs.astro.build/zh-cn/getting-started/
5、基于Netlify自动化部署项目
进入Netlify 官网，导入刚刚的astro-blog仓库
点击 ：Deploy astrojs-blog 开始构建项目
项目构建完成后，修改一下项目域名
Site configuration > General > Site details > Change site name
这样基于astro的个人博客站点就构建好了，我们可以通过互联网访问刚刚配置的域名：https://astro-lzt.netlify.app/
6、自动化部署
接下来你只需要本地修改文件推送到你刚刚关联的仓库，Netlify就会自动检测并拉取你的最新代码进行自动部署，你要做的只是推送一下代码即可！
2023-11-24 15:51:22
当提到网站分析和用户行为追踪工具时，微软的Clarity绝对是世上最强大的埋点工具之一。Clarity是一款免费且开源的工具，旨在帮助网站管理员深入了解他们的用户行为，优化用户体验，并最终提升网站的转化率。
Clarity的强大之处在于它提供了全面而详细的数据分析功能，让网站管理员能够准确地了解用户在网站上的行为。以我博客为例：https://liuziting.netlify.app/
通过Clarity，你可以轻松追踪用户的点击、滚动、鼠标移动、键盘输入以及浏览器调整大小等操作。这些数据将以可视化的形式呈现，使你能够清晰地看到用户在网站上的交互方式和行为习惯。
Clarity还提供了独特的用户会话重放功能，这是一项非常有用的工具。它允许你回放真实用户在网站上的行为，就像观看视频一样。通过观察用户的操作，你可以更好地理解他们在网站上遇到的问题和困难，进而改善用户体验并提高转化率。
除了数据分析和用户会话重放外，Clarity还提供了一些其他有用的功能。例如，它可以帮助你检测页面加载速度，并提供优化建议。它还可以识别和报告出现错误的页面，帮助你及时解决问题。此外，Clarity还支持自定义事件跟踪，你可以根据自己的需求设置和追踪特定的用户行为。
需要注意的是，虽然Clarity提供了强大的数据收集和分析功能，但在使用过程中要确保遵守相关的隐私和数据保护法规。尽管Clarity的数据收集方式是匿名的，但你仍然需要明确告知用户并取得他们的同意。
总而言之，微软的Clarity是一款功能强大且易于使用的埋点工具，为网站管理员提供了全面的数据分析和用户行为追踪功能。通过深入了解用户行为，你可以优化网站的设计和功能，提升用户体验，并最终实现更高的转化率。
最后Clarity承诺永久免费，个人开发者简直狂喜！
使用起来也是十分简单，只需要输入你需要埋点的站点，将 Clarity 代码复制并粘贴到网站或应用的 <head> 元素中，一些第三方应用如WordPress，也同样支持，博客党再次狂喜！
Clarity地址：https://clarity.microsoft.com
2023-11-07 08:00:00
在JavaScript中，我们经常会遇到需要处理可能为空或未定义的变量的情况。这时，如果直接访问对象的属性，往往会导致程序崩溃。为了防止这种情况发生，JavaScript引入了一些新的操作符：可选链操作符(?.)、空值合并操作符(??)和逻辑赋值操作符(??=)。
可选链操作符允许我们安全地读取深层次的属性值，而不必每次都检查中间的对象是否存在。例如：
const user = {};
console.log(user?.address?.title); // undefined, 错误未发生
const arr= {
foo: {
bar: {
baz: 42
}
},
xyz: []
};
const value1 = obj?.foo?.bar?.baz; // 如果任何中间属性不存在或为空，value 将为 undefined
//除了对属性的检查，还可以用于对数组下标及函数的检查
const value2 = obj?.xyz?.[0]?.fn?.();
// 传统写法
const value1 = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz; // 需要手动检查每个属性
const value2 = obj && obj.xyz && obj.xyz[0] && obj.xyz[0].fn && obj.xyz[0].fn();使用场景
链式访问对象属性，而不必手动检查每个属性是否存在。
调用可能不存在的函数。
空值合并操作符是当左侧的表达式结果为null或undefined时，返回右侧的表达式。例如：
const a = null;
const b = undefined;
const c = 0;
const d = '';
cosnt e = false;
const value1 = a ?? 'default'; // 'default'，因为 a 是 null
const value2 = b ?? 'default'; // 'default'，因为 b 是 undefined
const value3 = c ?? 'default'; // 0，因为 c 不是 null 或 undefined
const value4 = d ?? 'default'; // ''，因为 d 不是 null 或 undefined
const value5 = e ?? 'default'; // false，因为 e 不是 null 或 undefined
//可能存在的传统写法，除了null,undefined, 无法兼容0、''、false的情况,使用时要特别小心
const value1 = a || 'default'; // 'default'
const value2 = b || 'default'; // 'default'
const value3 = c || 'default'; // 'default'，因为 0 转布尔类型是 false
const value4 = d || 'default'; // 'default'，因为 '' 转布尔类型是 false
const value5 = e || 'default'; // 'default'使用场景
提供默认值，而不使用 false 值（如空字符串、0 等）。
在处理可能为 null 或 undefined 的变量时，选择性地提供备用值。
当变量为null或undefined时，使用空值合并赋值操作符可以给变量赋一个默认值。例如：
let a = null;
let b = undefined;
let c = 0;
a ??= 'default'; // 'default'，因为 a 是 null
b ??= 'default'; // 'default'，因为 b 是 undefined
c ??= 'default'; // 0，因为 c 的初始值不是 null 或 undefined
总的来说，这些新的操作符大大增强了JavaScript处理可能为空或未定义的情况的能力，使我们的代码更安全，更易于阅读和维护。
使用场景
在变量没有被赋值或被赋值为 null 或 undefined 时，将默认值分配给变量
这些运算符在处理可能为 null 或 undefined 的值时非常有用，可以简化代码并提高可读性。然而，需要注意的是，它们是在 ECMAScript 2020 标准中引入的，因此在旧版本的 JavaScript 中可能不被支持。
2023-11-02 14:27:21
首先Fork一个仓库，地址如下：
https://github.com/ddiu8081/chatgpt-demo
https://github.com/ourongxing/chatgpt-vercel
注册并登录 Vercel ，关联上自己的GitHub
这个网站很强大，用于部署前端服务很方便，也可自行部署在其他平台，或本地部署
1、创建一个Project；
2、选择刚刚Github Fork的 chatgpt 项目 ，点击Import ；
3、编辑项目名，框架预设会默认：Astro，不用修改，点击Deploy；
4、编辑成功后即可看到如下界面，点击 Continue to Dashboard ，打开仪表板；
5、你就会看到已经构建成功，并且Vercel分配了域名；
vercel默认分配的域名已经被墙了，国内不能直接访问。
6、因为默认域名不能访问，所以要配置域名转发，用自己的域名进行访问，点击View Domains；
7、添加一个子域名，例如我的域名是lihail.cn，我添加一个chatgpt.lihail.cn，点击Add；
8、这个时候Vercel会检测你这个域名有没有配置域名解析，解析到chatgpt.lihail.cn，记住下面Type、Name、Value；
9、打开你的域名管理后台：DNS 解析 DNSPod，例如我是腾讯云购买的域名，输入主机记录=Name；记录类型=Type；记录值=Value；最后点击保存；
10、回到Vercel后台，这个时候你会发现，检测到你域名已经解析完成；
点击访问 chatgpt.lihail.cn，就成功了！
11、打开 Openai 官网，登录并且获取自己的API key并复制；
12、点击设置，在OpenAI API Key的位置填入刚刚复制的key并回车；
这个时候就可以愉快的使用chatGPT了~
输入 / 或者 空格 搜索 Prompt 预设例如：周报生成器
基于Vercel部署chatGPT的所有流程已经完成。最后，我们要感谢OpenAI、开源社区和开源工作者的贡献，因为他们让我们能够更加高效地开发和部署自己的项目。
源代码由ddiu提供，ourongxing修改。
2023-03-18 16:58:42
Cursor是一款文本编辑器，但是现在不仅仅是一款文本编辑器了，它集成了GPT-4，除了基础的文本编辑功能外，现在的Cursor还集成了最新的人工智能技术GPT-4。GPT-4是一种强大的深度学习模型，它可以根据用户提供的主题和关键词自动生成高质量的文章和内容。通过Cursor，用户可以轻松地生成各种文本内容，无论是写作、编程、还是其他领域，都能够得到极大的帮助和支持。GPT-4的强大功能使得Cursor成为了一款非常具有竞争力的文本编辑器，它可以帮助用户提高工作效率、节省时间和精力，同时还可以生成高质量的内容，满足用户对于内容质量的要求
接下来我们来试一下他的代码能力：
优化代码
当选中代码时，会弹出提示框，其中包括Edit Ctrl+K和Chat Ctrl+L的选项。如果想要对代码进行优化，可以先使用Ctrl+K快捷键来输入优化命令。
此时，你会惊奇地发现，Cursor迅速对代码进行了优化和精简，只需选择“Accept”即可完成插入。GPT-4的速度非常快，让你的工作变得更加高效。接下来，你可以使用Ctrl+L快捷键，在右侧得到代码优化的建议和相应的代码，这种友好的交互方式让你的编程体验更加愉悦和高效。
编写代码能力
你可以通过点击“新建页面”来创建一个空白页面，然后使用Ctrl+L快捷键，在弹出的提示框中输入“用Vue写一个表单提交页面，UI框架使用Ant，表单包含姓名、性别、身份证、出生年月等字段，且需要验证必填项，最后点击提交按钮进行验证。”，即可快速生成对应的代码。这段代码使用Vue框架编写，UI框架为Ant，表单包含多个字段，并设置了必填项验证，最终需要点击提交按钮进行验证。
这个编辑器生成代码的速度太快了，令人惊叹。而且，生成的代码也非常优秀，几乎没有任何问题。
您可以从Cursor 的官方网站下载编辑器，目前支持Windows、Mac和Linux等多个操作系统。此外，目前该编辑器完全免费，无需支付任何费用，你可以放心使用。（至少目前是这样~）
