idea是看毒鸡汤的项目（作者自己的域名已经不能访问了，我也复制了一份给一开始的学习和部署，网址：Poison），我觉得很有趣，简单有趣。后来看到今日诗歌，是不是很像，无非是提供一个API调用。这两篇文章的star数超过1000+。如此简单的应用程序如此受欢迎。我有点羡慕。因为好奇，接触到了vite、tailwindcss等新技术，所以想用vite搭建一个react应用，样式是用tailwindcss定制的，所以想做一个简单的应用。后来想多了，就产生了后续的规划。刚刚说了这个项目的策划和规划是从idea开始的，画原型，写前端，设计，部署，做后端，一套完整的背景，从idea到实现我写这篇文章的计划就是：第一阶段：提出想法，画出原型，制作静态页面，部署上线，即静态独立项目的第二阶段：使用vite+react开发这个项目，添加功能点，比如如可选主题色、分享卡片等功能。第三阶段：数据不能裸游，配置后台功能和后台编辑功能。第四阶段：做成Flutter版本第五阶段：做成小程序版这五个阶段笔者不会一口气做成。有些东西只是想法，实施起来肯定比想象的要困难。关于句子的一些问题，例如你读过的最有力的文字段落是什么？,适合摘录的句子有哪些？有些句子我很喜欢，有些可以启发。与其如此，还不如搜集一些广受好评的句子，做成毒鸡汤和今日的诗词。申请石虎，天天去知乎搜集资料，加上我之前的盘点，大概搜集了100多条数据（第一阶段写的），画原型以简单为主，什么都不要避免。页面初始化页面npm我大致画成这样为什么要init-yget函数呢？因为我们要使用tailwind，所以官方支持这种方式。构建时会进行tree-shaking，可以减少很多不必要的代码。按照官网安装指南通过npm安装Tailwindnpminstalltailwindcss@latestpostcss@latestautoprefixer@latest将Tailwind添加为PostCSS插件//postcss.config.jsmodule.exports={plugins:{tailwindcss:{},autoprefixer:{},},}创建tailwindcss配置文件npxtailwindcssinit这将在你的项目根目录中创建一个最小的tailwind.config.js文件//tailwind.config.jsmodule.exports={purge:[],darkMode:false,//or'media'or'class'theme:{extend:{},},variants:{},plugins:[],}新建tailwind.css引入tailwind代码@tailwindbase;@tailwindcomponents;@tailwindutilities;新建一个index.html，在代码中引入css，编写html代码。这里就不细说了，因为花了不少时间，参数太多了，大部分都是看到自己原型的时候拿的，然后删除删除修改新建data.js再收藏很多素材，导入到data.js中，编写如下逻辑，在浏览器中读取语句保存到本地存储。句子是随机生成的，如果随机生成的句子在本地存储，则重新生成。当所有句子都存储在本地存储中时，清除所有本地存储。因为我的一些内容不是一句话，而是一个数组，都是在插入内容的时候需要判断的，可以根据不同的情况做出不同的效果。这里遇到了一些问题记录下来。我已经很久没有编写原生API了。插入html忘记了，innerHTML和appendChild的区别忘记了innerHTML：可以插入一段html，比如
我是一个p标签
appendChild：在内容末尾插入一个节点，必须先创建一个标签，插入到三个方法中，即拉取数据，存储到本地，插入到网页中进行设计。我参考了一些其他人关于制作标志的建议。最推荐的就是logo神器了。我按照提示进行了这样的设计。这种设计太蠢了，所以我用Photoshop做了一个，SEO优化favicon处理，从logo中扣除几个字，然后上传到https://favicon.io/，导出favicon，设置header信息