├── .env ├── .env.example ├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── LICENSE ├── README.md ├── data ├── authors │ └── default.md ├── blog │ ├── 10 张图，说透 Kubernetes 架构和数据流.md │ ├── 16-places-to-find-illustrations.md │ ├── 2012-juejin-react-article.md │ ├── 2021-juejin-100-article.md │ ├── 2021-juejin-vue-article.md │ ├── 2021-year-end-summary.md │ ├── 2022 年终总结，知识沉淀这一年.md │ ├── 2023 web 设计趋势.md │ ├── 35 岁，被裁后，一个月找工作现状.md │ ├── 35岁，我失业了.md │ ├── ChatGPT 以及相关开源项目体验.md │ ├── Develop-an-online-flowchart-website-with-NodeJS.md │ ├── How-to-increase-the-number-of-websites.md │ ├── Implement-a-vscode-translation-extension.md │ ├── Next.js 全栈开发微信公众号 Markdown 排版编辑器.md │ ├── Next.js 应用实现权限管理.md │ ├── React-SSR-framework-next.js.md │ ├── React-and-NodeJS-Full-stack-project.md │ ├── Refactoring-my-blog-using-NextJS-and-TailwindCSS.md │ ├── Shadcn UI 现代 UI 组件库.md │ ├── Vercel 推出数据库存储服务，助力全栈开发.md │ ├── a-create-react-app-v5-problem.md │ ├── cloudflare-set-301.md │ ├── code-diff-editor.md │ ├── codepen-1-initial.md │ ├── codepen-2-Monaco-Editor.md │ ├── codepen-3-prettier.md │ ├── codepen-4-client-compile.md │ ├── codepen-5-free-database.md │ ├── codepen-6-screenshot.md │ ├── cra-to-vite.md │ ├── develop-a-nextjs-interview-web.md │ ├── free-deploy-honeyed-words-generator.md │ ├── how-html-to-markdown.md │ ├── how-to-climb-juejin-articles.md │ ├── how-to-deploy-a-dynamic-website-for-free.md │ ├── how-to-maintain-iconfont.md │ ├── how-to-share-technology.md │ ├── how-to-use-markdown-write-ppt.md │ ├── iPad 编程生产力.md │ ├── iconfontr.md │ ├── image-min-tools.md │ ├── introduce-tailwindcss.md │ ├── mdx-Introduction.md │ ├── mid-2022-summary.md │ ├── minprogram-scan-login.md │ ├── monaco-editor.md │ ├── node-reptile.md │ ├── onlyoffice-nodejs-setup-width-docker.md │ ├── phaser3-game.md │ ├── playwright-start.md │ ├── position-fixed-problem.md │ ├── prism-react-renderer.md │ ├── prisma-the-complete-orm.md │ ├── progress-bar-in-react-tailwindCSS.md │ ├── react-18-upgrade-guide.md │ ├── react-dnd-low-code.md │ ├── react-hooks-dark-mode.md │ ├── react-pdf-resume.md │ ├── react-use-lottery.md │ ├── reactjs-dosc-technology-stack.md │ ├── remix-vs-next.js.md │ ├── should-you-use-usememo-in-react.md │ ├── svg-404.md │ ├── tailwindCSS-resources-recommendation.md │ ├── tampermonkey-copy-helper.md │ ├── tauri-vs-electron.md │ ├── tdd-testing-react-async-component.md │ ├── tdd-testing-react-component.md │ ├── tdd-testing-react-router.md │ ├── text-to-speech.md │ ├── the-new-wechat-editor.md │ ├── uniapp-user-sharing.md │ ├── use-CSS-variables-and-Tailwind-css.md │ ├── use-PostCSS-plugin-to-make-your-site-support-dark-mode.md │ ├── use-esbuild-to-build-a-react-library.md │ ├── use-tailwindcss-get-websites.md │ ├── use-threejs-and-react-to-render-a-3d-model-of-your-self.md │ ├── valentines-day.md │ ├── vite-Module-Federation.md │ ├── vscode-extension-code-snippet.md │ ├── vscode-interesting-extensions.md │ ├── vscoe-extension-CNode-has-been-launched.md │ ├── web-typing.md │ ├── webpack5-lazy-compilation.md │ ├── wechat-mini-program-development.md │ ├── wechat-minprogram-deployment-tutorial.md │ ├── 【质量保障】E2E 中的 mock api 测试.md │ ├── 三分钟 ChatGPT 接入钉钉机器人.md │ ├── 你好，Next.js 13.md │ ├── 使用 Next.js 和掘金 API 打造个性博客.md │ ├── 使用 Next.js 搭建 Monorepo 组件库文档.md │ ├── 使用 Next.js、 Prisma 和 PostgreSQL 全栈开发视频网站.md │ ├── 使用 NextAuth.js 给 Next.js 应用添加鉴权与认证.md │ ├── 使用 Notion 数据库进行 Next.js 应用全栈开发.md │ ├── 使用 Strapi 和 Next.js 开发一个简易微博.md │ ├── 使用 Vitest 和 React Testing Library 给 Next.js 应用单元测试.md │ ├── 使用 Web Speech API 和 ChatGPT API 开发一个智能语音机器人.md │ ├── 使用油猴脚本净化 CSDN.md │ ├── 创建 React 应用的 7 种方式，你用过几种？.md │ ├── 基于 ChatGPT API 的划词翻译浏览器脚本实现.md │ ├── 基于 Tauri， 我写了一个 Markdown 桌面 App.md │ ├── 大家都在嘲笑 Next.js 14.md │ ├── 如何使用 ChatGPT 3.5 API 创建自己的智能应用？.md │ ├── 如何将 docker-compose 单节点部署改成集群部署？.md │ ├── 如何避免 React hooks 闭包陷阱？.md │ ├── 将 Node 应用 Express.js 部署到 Vercel.md │ ├── 我在工作中使用 git 的几个技巧.md │ ├── 推荐6款油猴脚本，不看错亿！.md │ ├── 提示词工程天花板【汉语新解】- 原理浅析.md │ ├── 普通程序员要如何技术写作变现.md │ ├── 油猴脚本去水印实现原理.md │ ├── 油猴脚本开发教程.md │ ├── 理解 Next.js 中的 CSR、SSR、SSG、ISR 以及 Streaming.md │ ├── 用 React 开发了一款 Chrome 插件【七牛云图床】.md │ ├── 用云函数开发掘金钉钉机器人.md │ └── 码上掘金不仅可以写 PPT，还可以录视频.md ├── headerNavLinks.ts ├── logo.svg ├── projectsData.ts └── siteMetadata.js ├── image-loader.js ├── next-env.d.ts ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── prettier.config.js ├── public ├── ads.txt ├── robots.txt └── static │ ├── favicons │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── mstile-144x144.png │ ├── mstile-150x150.png │ ├── mstile-310x150.png │ ├── mstile-310x310.png │ ├── mstile-70x70.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest │ ├── images │ ├── 20220315184336.png │ ├── avatar.png │ ├── code-editor.png │ ├── cp.png │ ├── google.png │ ├── lowcode.png │ ├── mdx-notes.jpg │ ├── resume.png │ ├── runjs-cool.webp │ ├── twitter-card.png │ ├── video │ │ ├── 01f54af1022ab71d20a485a6911740f90626e60e.jpg │ │ ├── 0416abb3db10c6a927ee87699b8df0b45b6ee335.jpg │ │ ├── 0dfbe34c355a42f24f227e85a75bd5d20617d080.jpg │ │ ├── 1095c727412c1c5cd56a520b13dc7a55f459b3be.jpg │ │ ├── 1b7fa05e47c1853fce30d2d27b0fdcfcaadc39a9.jpg │ │ ├── 27f237ba0d232317352a1ec077c5d26bb9ce2f8d.jpg │ │ ├── 2d4e3f90474b46d9348a8cca4eb42acd2a6d8ab3.jpg │ │ ├── 363cbdca0632f318b510a145564e0a2b23429754.jpg │ │ ├── 3f699ca198ced5f398d7e459c8a183043b9f05ee.jpg │ │ ├── 4b96d4b3772ee61c025681fcda3aa9ae4af704d9.jpg │ │ ├── 503e01999fc63c98f512cf6ca2d1ab8c6260314d.jpg │ │ ├── 647c3eba5d8ecad9b4115b9e099d5480a900340a.jpg │ │ ├── 692ae925cfd877c09e58171b24182c7a3060c6f2.jpg │ │ ├── 69ebeda9482bbd4cf2e7b7bfeabe48883e98290c.jpg │ │ ├── 6bc2db6b9aed224c2dce1bd8bccfe37070fec3c2.jpg │ │ ├── 808a5f031808d98aaaa3c3c6df290c730c06eb9c.jpg │ │ ├── 981475cd8ab6b0a0e8646cfc1b34af2beb092120.jpg │ │ ├── 9edff3a734d596150e76edf0f79eddb093790c35.jpg │ │ ├── bd6fcb47f48e411c6665b692666d508fc24806bc.jpg │ │ ├── c1e724fedfbfc04473ee1790c4bec805c00627e6.jpg │ │ ├── d1dcf56c1cd888c0c15e0c723930508a938567c4.jpg │ │ ├── d54a3adfd80729bf6e8781e97f81d893814b11ed.jpg │ │ ├── eb2df5c1eb6e1952f43ce4a4fe57bd6e33f25e49.jpg │ │ ├── ee79fc6ba0849bf8a6ec5f7d49da25a02e30c004.jpg │ │ ├── ef0fb56bf79f504dd50959fab1f91c965e24bc08.jpg │ │ ├── efdacc3a132baf41a4ef781e7ddd43cbc860a708.jpg │ │ └── f77185e59e3d87eb160191ce6c7c8c971309330b.jpg │ └── vscode.png │ └── text-to-voice │ ├── banner.png │ ├── s22432303042022.png │ ├── s22521603042022.png │ ├── s22540403042022.png │ ├── s23003003042022.png │ ├── 关注.mp3 │ ├── 开头.mp3 │ ├── 早上好.mp3 │ └── 长津湖之水门桥.mp3 ├── scripts ├── compose.js ├── generate-sitemap.js └── next-remote-watch.js ├── src ├── components │ ├── Article.tsx │ ├── Card.tsx │ ├── ClientReload.tsx │ ├── Footer.tsx │ ├── Hero.tsx │ ├── Image.tsx │ ├── LayoutWrapper.tsx │ ├── Link.tsx │ ├── MDXComponents.tsx │ ├── MobileNav.tsx │ ├── NewsletterForm.tsx │ ├── PageTitle.tsx │ ├── Pagination.tsx │ ├── Pre.tsx │ ├── ProgressBar.tsx │ ├── SEO.tsx │ ├── ScrollTopAndComment.tsx │ ├── SectionContainer.tsx │ ├── TOCInline.tsx │ ├── Tag.tsx │ ├── ThemeSwitch.tsx │ ├── Video.tsx │ ├── analytics │ │ ├── GoogleAnalytics.tsx │ │ ├── Plausible.tsx │ │ ├── SimpleAnalytics.tsx │ │ ├── Umami.tsx │ │ └── index.tsx │ ├── comments │ │ ├── Disqus.tsx │ │ ├── Giscus.tsx │ │ ├── Utterances.tsx │ │ └── index.tsx │ ├── renderCanvas.ts │ └── social-icons │ │ ├── facebook.svg │ │ ├── github.svg │ │ ├── index.tsx │ │ ├── juejin.svg │ │ ├── linkedin.svg │ │ ├── mail.svg │ │ ├── twitter.svg │ │ ├── youtube.svg │ │ └── zhihu.svg ├── css │ ├── prism.css │ └── tailwind.css ├── layouts │ ├── AuthorLayout.tsx │ ├── ListLayout.tsx │ ├── PostLayout.tsx │ └── PostSimple.tsx ├── lib │ ├── generate-rss.ts │ ├── mdx.ts │ ├── remark-code-title.ts │ ├── remark-extract-frontmatter.ts │ ├── remark-img-to-jsx.ts │ ├── remark-toc-headings.ts │ ├── search.json │ ├── tags.ts │ ├── utils │ │ ├── files.ts │ │ ├── formatDate.ts │ │ ├── htmlEscaper.ts │ │ └── kebabCase.ts │ └── video.ts └── pages │ ├── 404.tsx │ ├── _app.tsx │ ├── _document.tsx │ ├── about.tsx │ ├── api │ ├── buttondown.ts │ ├── convertkit.ts │ ├── klaviyo.ts │ └── mailchimp.ts │ ├── blog.tsx │ ├── blog │ ├── [...slug].tsx │ └── page │ │ └── [page].tsx │ ├── index.tsx │ ├── projects.tsx │ ├── tags.tsx │ ├── tags │ └── [tag].tsx │ └── video.tsx ├── tailwind.config.js ├── tsconfig.json └── types ├── AuthorFrontMatter.ts ├── PostFrontMatter.ts └── Toc.ts /.env: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_GOOGLE_ANALYTICS=G-5L7B55Y98R 2 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_GISCUS_REPO= 2 | NEXT_PUBLIC_GISCUS_REPOSITORY_ID= 3 | NEXT_PUBLIC_GISCUS_CATEGORY= 4 | NEXT_PUBLIC_GISCUS_CATEGORY_ID= 5 | NEXT_PUBLIC_UTTERANCES_REPO= 6 | NEXT_PUBLIC_DISQUS_SHORTNAME= 7 | 8 | 9 | MAILCHIMP_API_KEY= 10 | MAILCHIMP_API_SERVER= 11 | MAILCHIMP_AUDIENCE_ID= 12 | 13 | BUTTONDOWN_API_URL=https://api.buttondown.email/v1/ 14 | BUTTONDOWN_API_KEY= 15 | 16 | CONVERTKIT_API_URL=https://api.convertkit.com/v3/ 17 | CONVERTKIT_API_KEY= 18 | // curl https://api.convertkit.com/v3/forms?api_key= to get your form ID 19 | CONVERTKIT_FORM_ID= 20 | 21 | KLAVIYO_API_KEY= 22 | KLAVIYO_LIST_ID= 23 | 24 | NEXT_PUBLIC_GOOGLE_ANALYTICS= -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['next', 'prettier'], 3 | root: true, 4 | } 5 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-20.04 12 | permissions: 13 | contents: write 14 | concurrency: 15 | group: ${{ github.workflow }}-${{ github.ref }} 16 | steps: 17 | - uses: actions/checkout@v3 18 | 19 | - name: Setup Node 20 | uses: actions/setup-node@v3 21 | with: 22 | node-version: '14' 23 | 24 | - name: Get yarn cache 25 | id: yarn-cache 26 | run: echo "::set-output name=dir::$(yarn cache dir)" 27 | 28 | - name: Cache dependencies 29 | uses: actions/cache@v2 30 | with: 31 | path: ${{ steps.yarn-cache.outputs.dir }} 32 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} 33 | restore-keys: | 34 | ${{ runner.os }}-yarn- 35 | - run: yarn install 36 | - run: yarn build 37 | - run: npx next export 38 | - name: Upload artifact 39 | uses: actions/upload-pages-artifact@v3 40 | with: 41 | path: ./out 42 | 43 | # Deploy job 44 | deploy: 45 | # Add a dependency to the build job 46 | needs: build 47 | 48 | # Grant GITHUB_TOKEN the permissions required to make a Pages deployment 49 | permissions: 50 | pages: write # to deploy to Pages 51 | id-token: write # to verify the deployment originates from an appropriate source 52 | 53 | # Deploy to the github-pages environment 54 | environment: 55 | name: github-pages 56 | url: ${{ steps.deployment.outputs.page_url }} 57 | 58 | # Specify runner + deployment step 59 | runs-on: ubuntu-latest 60 | steps: 61 | - name: Deploy to GitHub Pages 62 | id: deployment 63 | uses: actions/deploy-pages@v4 # or specific "vX.X.X" version tag for this action 64 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | public/sitemap.xml 15 | .vercel 16 | 17 | # production 18 | /build 19 | *.xml 20 | # rss feed 21 | /public/feed.xml 22 | 23 | # misc 24 | .DS_Store 25 | 26 | # debug 27 | *.log 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | 32 | # local env files 33 | .env.local 34 | .env.development.local 35 | .env.test.local 36 | .env.production.local 37 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install lint-staged 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 maqibin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nextjs Tailwind Blog 2 | 3 | ## tempalte 4 | 5 | https://github.com/timlrx/tailwind-nextjs-starter-blog 6 | 7 | ## 技术栈 8 | 9 | - Next.js 10 | - Tailwind CSS 3.0 11 | 12 | ## 使用静态博客的原因 13 | 14 | 我写博客，需要将博客同步到知乎、掘金、微信公众号等、一是这些平台的代码编辑器不怎么好用，尤其是图片会加上水印、后来我选择自建使用 Postgresql 和 next.js、但维护这些数据库需要一些成本、为了避免每年数据库迁移、现在将代码都托管到 github、使用 vercel.com 自动部署 15 | 16 | ## Installation 17 | 18 | ```bash 19 | npm install 20 | ``` 21 | 22 | ## Development 23 | 24 | First, run the development server: 25 | 26 | ```bash 27 | npm start 28 | ``` 29 | 30 | or 31 | 32 | ```bash 33 | npm run dev 34 | ``` 35 | -------------------------------------------------------------------------------- /data/authors/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 狂奔滴小马 3 | avatar: /static/images/avatar.png 4 | occupation: 前端工程师 5 | company: 分享 JavaScript 热门框架，记录前端工程师学习成长历程。 6 | email: maqi1520@163.com 7 | juejin: https://juejin.cn/user/2189882895384093 8 | zhihu: https://www.zhihu.com/people/xiao-ma-15-3 9 | github: https://github.com/maqi1520 10 | --- 11 | 12 | - 姓名：马琪斌 13 | - 昵称：狂奔滴小马 14 | - 座右铭：你不一定要很厲害，才能開始；但你要開始，才能很厲害 15 | - 我是一名前端工程师，也是一名 Javascript 全栈开发者，长期关注前端工程化，开发体验优化等方向，近期对低代码、微前端、serverless、vite 有浓厚兴趣并实践中 16 | - 坐标：杭州 17 | - skill： 18 | - 前端：React、ES6/7/8、Antd、Axios、Tailwindcss 19 | - 服务端：Next.js、Koa2、Prisma、Typeorm 20 | - 数据库：Mysql、Postgresql 21 | - 其他：Webpack、Vite、Typescript、Serverless 22 | -------------------------------------------------------------------------------- /data/blog/2022 年终总结，知识沉淀这一年.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 2022 年终总结，知识沉淀这一年 3 | date: 2022/12/27 19:40:16 4 | lastmod: 2023/1/25 11:42:08 5 | tags: [年终总结] 6 | draft: false 7 | summary: Hello ，大家好，我是小马，一名小厂前端工程师，普通的不能再普通的小前端，本来不想写年终总结了，因为一年下来，也没啥变化。 8 | images: https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/44f5f3bee7dc4adcaed2f2cd04c985ed~tplv-k3u1fbpfcp-watermark.image? 9 | authors: ['default'] 10 | layout: PostLayout 11 | --- 12 | 13 | Hello ，大家好，我是小马，一名小厂前端工程师，普通的不能再普通的小前端，本来不想写年终总结了，因为一年下来，也没啥变化，看到别人发年终总结文章，实在是自愧不如。后来想了想还是得总结下，写总结并不是为了与别人比较，而是希望自己给自己一个交代，看看一年下来的成长与收获，有哪些不足，明年该往哪方面继续努力？ 14 | 15 | ## Flag 完成度 16 | 17 | 先看看，我 2021 年底，立下的 flag 18 | 19 | - 持续技术写作，争取掘金等级达到 V4； 20 | - 参与开源项目，或者开源自己的项目 star 超过 100+； 21 | - 持续学习数据可视化和 three.js 相关内容，能够实现一些 3D 项目； 22 | - 学习视频剪辑，可以把自己学到知识剪辑成视频； 23 | - 关爱家人，每月至少一次带儿子参加户外活动； 24 | 25 | ## 技术写作 26 | 27 | ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48a986a30f8b4a6fbd558c8276ff8630~tplv-k3u1fbpfcp-zoom-1.image) 28 | 29 | 掘金创作者等级到达了 v5，没想到的是创作第一年就成为了掘金签约作者，完成了《Next.js 全栈开发实战》专栏，也算是超额完成了这个 flag，总体来说单篇阅读量不是很高，可能有 2 个原因： 30 | 31 | 1. 内容未层次递进，缺少核心原理； 32 | 33 | 这点是掘金评审团对我其中的几篇文章评价，虽然每个人对技术都有不同的看法，但既然有人提出来肯定是存在问题的，明年继续写吧，并且需要提高自己自己的阅读量，有输入才有输入。 34 | 35 | 2. Next.js 在国内还比较小众，受众基数小，导致阅读量低。 36 | 37 | 用 Vue.js 人数大于 react，而国内的的技术迭代是比较缓慢的，比如我司前端需要兼容 IE11；国内搜索引擎以百度为主，就算是使用 SSR，百度也不一定收录，这也是导致技术迭代缓慢的原因。 38 | 39 | 我认为技术写作是成长最快的方式，短期来看，写作带来的收益微乎其微，但长期来看却是一笔财富，无论是知识储备，还是提升个人影响力都必不可少，写博客到写书其实是递进关系，写一篇是博客，写多篇成专栏，层次递进连贯着写就是一本书，如果你能够出一本书，已然成为了这方面的专家。 40 | 41 | 当然收益也并不是要到出书才能显现，在掘金写作还可以获得一些奖品，虽然这些奖品很小，但获得的自我成就感远大于在工作中获得的。 42 | 43 | ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/66a0148b7ead455b9db72d9b5af802c4~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp) 44 | 45 | ## 开源项目 46 | 47 | ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0cc6e929906647a3865f8a888f7e4325~tplv-k3u1fbpfcp-zoom-1.image) 48 | 49 | 单项目 star 超过 200 了，虽然不多，与去前几年相比，从来不往 Github 提交代码，但也算有所突破了，当然还有一些其他项目，大多是为了技术文章讲解的代码示例，做的都不够精细。我觉得前端还是要专精，努力维护好一个项目，冲出一个高 star 的项目，把这个项目当做自己的代表作来看待，这样才能提升自己的一些竞争力。 50 | 51 | ## 可视化和 three.js 学习 52 | 53 | 很遗憾，在这方面可以说是毫无进展，只是粗略地看了一些文章，也没有上手实践。目前 React 和 Vue 等后台开发在市面上一抓一大把，有太多人跟你竞争，而在 3d 可视化方面人才相对比较少，因此如果想通过独立开发变现，学习 3d 可视化必不可少。明年这方面继续努力吧。 54 | 55 | ## 做知识视频 56 | 57 | ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/475a227b07ce4735ab8541122dd73cb1~tplv-k3u1fbpfcp-zoom-1.image) 58 | 59 | 做知识视频是今年的一个尝试，有太多人在短视频行业尝到了红利，所以我也在考虑这方面发展，万一失业了，也算有个第二技能，不至于饿死。然而做视频要花费的时间是写文章的十倍，有些心有余而力不足，但今年算是入门了。 60 | 61 | **做视频的 2 种方式** 62 | 63 | - 直接录 64 | 65 | 也就是一边讲，一边操作，一边录，这种方式对语言表达能力要求比较高，思路要求清晰，这种方式出视频比较快，只要剪掉不需要的内容就可以了，但也有可能录地比较啰嗦，视频较长，有点像上课，从而导致视频的观看完整率较低。 66 | 67 | - 根据 A Roll 配 B Roll 68 | 69 | A Roll 可以是主讲者说的视频，也可以是单单是主讲者的声音，也可以是利用 TTS（text-to-speech）工具将文章转成的音频。 70 | 71 | B Roll 也就是演讲画面部分，可以是 PPT 导出的视频，也可以是 AE 做的动画或者是网上找的视频素材。 72 | 73 | 然后将 B Roll 盖在 A Roll 上，这种方式内容比较精简，动画也比较能够吸引观众，视频播放完整率较高，但这种方式所花费的时间远大于直接录。 74 | 75 | 无论使用那种方式，内容才是王道，只要视频内容有价值，就会有观众，有流量。明年继续往这方面努力吧。 76 | 77 | ## 关爱家人 78 | 79 | 自从当了父亲后，陪伴儿子玩耍成了我生活的主要部分，很庆幸在我羊的这段时间里，没有感染给我的家人，今年由于疫情，户外活动很少，儿子看动画片的时间有点长，希望明年疫情有所好转，一家人去外面转转，莫要错过了免票的年纪。 80 | 81 | ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca55510b2629446cae355c79791bdfc0~tplv-k3u1fbpfcp-watermark.image?) 82 | 83 | ## 做点副业 84 | 85 | 其实我是不擅长写作的，主要是因为在职业发展上遇到了瓶颈，我相信这是大部分人也会遇到的，普通打工人想要获得更多收入，主要有 3 个方向 86 | 87 | 1. 借助公司发展，水涨船高 88 | 2. 跳槽去大厂 89 | 3. 知识沉淀，做点副业 90 | 91 | 第一点并不是个人能够决定的，我们能做的就是将手上的项目做好，第二点也是大部分人的选择，可当我发现时，已经错过了拼搏的年纪，加上今年的互联网环境，所以只剩下第三点，那就看下我副业的收益吧。 92 | 93 | ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/967d7ea7eb2b49da824bb9ec31250671~tplv-k3u1fbpfcp-zoom-1.image) 94 | 95 | ## 未来发展 96 | 97 | 2022 年发生的 2 件事让我相信靠技术也能够实现财务自由，关键是要“专精”。 98 | 99 | - Adobe 宣布 200 亿美元收购 Figma 100 | - 《羊了个羊》小游戏火爆 101 | 102 | 22 年没实现的 Flag 23 年接着做 103 | 104 | - 持续技术写作，争取掘金等级达到 V6； 105 | - 专精自己的项目 star 超过 500+； 106 | - 持续学习数据可视化和 three.js 相关内容，能够实现一些 3D 项目； 107 | - 继续做知识类视频 数量超过 12+ 108 | - 关爱家人，每月至少一次带儿子参加户外活动； 109 | 110 | ## 最后 111 | 112 | 我在参与 2022 年度人气作者榜单，帮我投个票吧，祝各位 2023 年一切都顺利！！！ 113 | -------------------------------------------------------------------------------- /data/blog/35岁，我失业了.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 35岁，我失业了 3 | date: 2024/5/9 22:13:02 4 | lastmod: 2024/5/19 21:24:15 5 | tags: [程序员] 6 | draft: false 7 | summary: Hello 大家好，我是一名 90 后、工作 10年+ 的前端程序员。 其实已经离职 2 周多了，本以为这只是一个短暂的过渡期，但是没想到会这么长，甚至会长时间。在 BOSS 上沟通了 250+ 8 | images: 9 | [ 10 | 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98f154251fe74a6f88315fdba2ac6295~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080&h=479&s=143219&e=png&b=030303', 11 | ] 12 | authors: ['default'] 13 | layout: PostLayout 14 | --- 15 | 16 | Hello 大家好，我是一名 90 后、工作 10 年+ 的前端程序员。 17 | 18 | 其实已经离职 2 周多了，本以为这只是一个短暂的过渡期，但是没想到会这么长，甚至会长时间。在 BOSS 上沟通了 250+，投递了 35 家，面试了 2 家，并且其中一家是内推的，其他 APP 如猎聘和拉勾基本都是未读或者已读不回，因此我也就不怎么投递了。今天这 2 家公司都拒绝了我，因此我决定写下这篇文章，总结和思考下当前的现状，以及未来可能要走的路。 19 | 20 | 我在上一家公司呆了 8 年，已经签了无固定期限劳动合同，本以为给自己带来了一定的安全感。突然的失业让我有些措手不及，面临的不只是经济压力，还有对未来的不确定感。公司的经济效益连续下滑，其实去年年初就已经开始裁员，各种福利标准都在下降，包括公积金，相当于降薪了。去年我甚至有些羡慕被裁的同学，因为他们可以领个大礼包，并且都找到了新工作，而留下的人工作量都在增加，大家都变得更卷了，但更卷也没有改变现状，终于还是轮到了我，被约谈那天，我心中是愤怒的，人生能有几个 8 年，毕竟在这里奋斗过，拼搏过，有成长、也有汗水。 21 | 22 | 第二天，我便同意了，我没有急着找下家，也没有准备面试背题，而是决定完成手上的工作，站好最后一班岗，给自己在公司的旅程画上一个句号。离职那天，眼角不自觉还是留下了一滴眼泪，是遗憾，是无奈，更是迷茫。 23 | 24 | 其实工作只是雇佣关系，只是我们将工作看得太重，工作是为了更好的生活，既然不能一起走到终点，还不如就此下车。虽然现在市场上僧多粥少，一旦下了车便很难再挤上去。 25 | 26 | ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07bcf03a488b41cd921a1e4f0feb390f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080&h=503&s=686552&e=png&b=06161b) 27 | 28 | 程序员失业后，未来的路要怎么走？ 29 | 30 | 我还是一头雾水，认真思考后总结了 4 条路： 31 | 32 | 第一条路：继续寻找下家，坐班打工无疑是现下最好的选择，因为收入稳定，哪怕降薪也在预期之内，不至于饿死； 33 | 34 | 第二条路：学好英语，做远程工作；英语是全球的首要沟通语言，学好英语不仅能够打开更广阔的职业机会，还可以让我们进入远程工作的领域；加上外币兑 RMB 的汇率，只要能找到远程工作，相对于国内来说还是比较自由和吃香的。 35 | 36 | 第三条路：做独立开发；作为程序员，我们拥有丰富的技术背景和开发经验，考虑成为独立开发者，开发自己的网站、小程序等，通过自己的产品变现，将收入方式从贩卖时间转变为一种一劳多得的模式，实现自己的创业梦。当然这条路还是比较困难的，包括前期投入，产品 idea，变现模式，后期推广等，尤其是国内针对个人开发者还是不太友好，比如开发一个抖音小程序就需要企业资格，对接支付方式也需要企业资格等，这条路也很漫长，投入和收入也不一定成正比。我认为这条路不一定要马上去实践，但未来可以往这个方向靠拢。 37 | 38 | 第四条路：自媒体；作为程序员可以分享技术经验、创意想法、软件使用技巧等，通过写作、视频等形式输出内容，吸引粉丝和流量，建立个人品牌，实现收益。程序员全职自媒体这条路我是不看好的，因为这条路的收入是可预见的，我之前也在 B 站发了几个视频，广告收益快到 100 块了，一位拥有 1 万粉 B 站 Up  主，一年考广告收入仅 3000 多，更多的全职 Up  主 收入，不仅仅靠广告收入，更重要的商单，而程序员的受众面相对较小，因此程序员做视频大多是兴趣使然，当然不排除下面 2 种 39 | 40 | 1. 海外自媒体，（youtube  和  medium）拥有更广的人群和受众面； 41 | 2. 使用 AI 和自动化工具批量产出内容和视频等； 42 | 43 | ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/722f153a612a4d8da3f86849f8dc31cf~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=904&h=732&s=102427&e=png&b=ffffff) 44 | 45 | 当然还有很多其他的路，如果你与我一样情况，或者对于失业挑战有建议，都可以在下方留言，未来我会不定期分享个人经历与实践。无论选择何种道路，重要的是保持积极的态度和持续的努力，相信自己的能力和潜力。 46 | -------------------------------------------------------------------------------- /data/blog/How-to-increase-the-number-of-websites.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: '【对话ChatGPT】如何提高网站的访问量？' 3 | date: '2023/2/22' 4 | lastmod: '2023/2/23' 5 | tags: [ChatGPT] 6 | draft: false 7 | summary: '上周给博客开通的 Google adsense，收益比微信公众号好一些，收益跟访问量成正比，于是我问了 ChatGPT 这个问题。' 8 | images: 9 | [ 10 | 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9cc6b5dd3879466393fc3065ed62e7fd~tplv-k3u1fbpfcp-watermark.image?', 11 | ] 12 | authors: ['default'] 13 | layout: PostLayout 14 | --- 15 | 16 | 上周给博客开通的 Google adsense，收益比微信公众号好一些，收益跟访问量成正比，于是我问了 ChatGPT 这个问题。 17 | 18 | ## 如何提高网站访问量？ 19 | 20 | 以下是一些提高网站访问量的方法： 21 | 22 | 1. 优化 SEO：搜索引擎优化是提高网站排名和访问量的重要方法。通过关键词研究、网站内容优化、构建高质量的外部链接等方法来提高网站在搜索引擎结果页面的排名。 23 | 2. 社交媒体：将网站内容分享到各种社交媒体平台，例如 Facebook、Twitter、Instagram、LinkedIn 等，可以增加网站的曝光度和访问量。 24 | 3. 内容创作：提供有价值的内容可以吸引更多的访问者。根据受众的兴趣和需求，创作高质量的文章、博客、视频、图片等各种形式的内容。 25 | 4. 电子邮件营销：向已经订阅了邮件列表的用户发送相关的信息、新闻和更新，可以吸引用户回访网站并提高转化率。 26 | 5. 广告投放：在各种平台上进行有针对性的广告投放，可以将网站推荐给更多的潜在用户。 27 | 6. 合作伙伴关系：与其他网站、品牌、博主等建立合作关系，共同推广彼此的内容，可以相互吸引更多的流量。 28 | 7. 29 | 8. 网站速度优化：确保网站的加载速度足够快，这可以提高访问者的体验，并减少离开网站的概率。 30 | 9. 移动设备优化：确保网站能够适应各种移动设备的屏幕大小和分辨率，因为越来越多的用户使用移动设备访问网站。 31 | 32 | 通过实施这些方法，可以提高网站的访问量，从而吸引更多的用户并增加网站的曝光度和收入。 33 | 34 | ## 如何优化 SEO？ 35 | 36 | 以下是一些优化 SEO 的方法： 37 | 38 | 1. 关键词研究：首先，需要对网站内容进行关键词研究，以了解受众所关心的话题以及他们搜索的关键词和短语。 39 | 2. 内容优化：在网站的标题、描述、页面内容和 URL 中，使用关键词和短语，以便搜索引擎能够更好地理解页面内容。 40 | 3. 内部链接：在网站内部，使用关键词和短语进行内部链接，以增加页面的权重和可发现性。 41 | 4. 外部链接：通过获得其他网站的外部链接，以增加页面的权重和可发现性。这些链接应该来自于高质量的网站，并且与页面内容相关。 42 | 5. 移动优化：确保网站在移动设备上的浏览体验良好，这可以提高页面排名和访问量。 43 | 6. 网站速度：确保网站加载速度快，这可以提高用户体验和搜索引擎的排名。 44 | 7. 社交媒体：在社交媒体平台上分享网站内容，可以增加页面的曝光度和链接的数量，从而提高页面的权重。 45 | 8. 监控和调整：定期监控网站的排名和流量，并根据数据调整优化策略。 46 | 47 | 通过实施这些方法，可以提高网站的 SEO，并吸引更多的用户访问网站。注意，SEO 优化需要时间和耐心，它是一个长期的过程，需要持续不断地努力和调整。 48 | 49 | ## 针对内容创作有什么好的建议吗？ 50 | 51 | 以下是一些针对内容创作的好建议： 52 | 53 | 1. 确定受众：在开始创作之前，确定受众是非常重要的。了解你的目标读者是谁，他们的兴趣、需求和挑战是什么，这将有助于创作内容，并提高内容的质量和效果。 54 | 2. 挑选话题：根据受众的兴趣和需求，挑选合适的话题来创作内容。你可以使用关键词研究工具来寻找当前受欢迎的话题，并选择与你的品牌或业务相关的话题。 55 | 3. 提供价值：创作高质量的内容，提供有价值的信息或知识，这将使你的内容更受欢迎。在创作过程中，要确保内容与受众的兴趣和需求相关，并提供解决问题的解决方案。 56 | 4. 使用多媒体：使用多种类型的媒体，例如图片、视频、图表等来支持内容，可以使内容更具吸引力，并提高可读性。 57 | 5. 格式化和布局：使用适当的标题、段落和标点符号来格式化和布局内容，使它易于阅读和理解。此外，使用引用、列表和子标题等可视元素来吸引读者的注意力。 58 | 6. 保持原创性：创作内容时，要确保内容是原创的，并且避免剽窃或抄袭。你可以使用各种工具来检查内容的原创性和重复性。 59 | 7. 定期更新：定期更新网站内容，以保持受众的兴趣和关注。更新频率可以根据网站类型和目标受众的需要而定。 60 | 61 | 通过以上建议，你可以提高你的内容创作的质量和效果，并提高受众对你的品牌或业务的关注和认可。 62 | -------------------------------------------------------------------------------- /data/blog/a-create-react-app-v5-problem.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: '一个 create-react-app v5 的问题' 3 | date: '2022/2/16' 4 | lastmod: '2022/3/11' 5 | tags: [React.js] 6 | draft: false 7 | summary: '前两天我准备用 create-react-app 创建一个新项目，然后遇到了一个问题，涉及到 npx' 8 | images: 9 | [ 10 | 'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae71deff8af74f60a6031fa9eedc6ec3~tplv-k3u1fbpfcp-watermark.image?', 11 | ] 12 | authors: ['default'] 13 | layout: PostLayout 14 | --- 15 | 16 | ## 前言 17 | 18 | 前两天我准备用 `create-react-app` 创建一个新项目，然后我在命令行下执行 19 | 20 | ```bash 21 | npx create-react-app my-app 22 | ``` 23 | 24 | 命令行下就会提示 25 | 26 | ```bash 27 | Need to install the following packages: 28 | create-react-app 29 | Ok to proceed? (y) y 30 | 31 | You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 32 | 33 | We no longer support global installation of Create React App. 34 | 35 | Please remove any global installs with one of the following commands: 36 | - npm uninstall -g create-react-app 37 | - yarn global remove create-react-app 38 | 39 | The latest instructions for creating a new app can be found here: 40 | https://create-react-app.dev/docs/getting-started/ 41 | ``` 42 | 43 | 提示意思是：`create-react-app` 从第五版本开始不再需要全局安装，让我先卸载 `create-react-app`。 44 | 45 | 然后我就输入 `npm uninstall -g create-react-app` 进行全局卸载，然后再执行 `npx create-react-app my-app` 创建，结果还是上面的提示。 46 | 47 | ## npx 介绍 48 | 49 | npm 从 5.2 版开始，增加了 npx 命令。它有很多用处，主要使用有以下场景。 50 | 51 | ### 调用项目中的安装模块 52 | 53 | 原先要执行 54 | 55 | ```bash 56 | node-modules/.bin/jest 57 | ``` 58 | 59 | 代替 60 | 61 | ```bash 62 | npx jest 63 | ``` 64 | 65 | ### 避免全局安装模块 66 | 67 | ```bash 68 | npx create-react-app my-app 69 | ``` 70 | 71 | 上面代码运行时，npx 将`create-react-app`下载到一个临时目录，使用以后再删除。 72 | 73 | 然后我去 google 搜索答案，找到了这个[issue](https://github.com/facebook/create-react-app/issues/11816)，上面回答了一些解决办法。 74 | 75 | ### 使用不同版本的 node 76 | 77 | 利用 `npx` 可以下载模块这个特点，可以指定某个版本的 Node 运行脚本。它的窍门就是使用 npm 的  [node 模块](https://www.npmjs.com/package/node)。 78 | 79 | ```bash 80 | npx node@0.12.8 -v 81 | ``` 82 | 83 | 上面命令会使用 0.12.8 版本的 Node 执行脚本。原理是从 npm 下载这个版本的 node，使用后再删掉。 84 | 85 | 某些场景下，这个方法用来切换 Node 版本，要比 nvm 那样的版本管理器方便一些。 86 | 87 | ### 执行 GitHub 源码 88 | 89 | `npx` 还可以执行 GitHub 上面的模块源码。 90 | 91 | 执行 Gist 代码 92 | 93 | ```js 94 | npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32 95 | ``` 96 | 97 | 执行仓库代码 98 | 99 | ```js 100 | npx github:piuccio/cowsay hello 101 | ``` 102 | 103 | 注意，远程代码必须是一个模块，即必须包含`package.json`和入口脚本 104 | 105 | ## 原因 106 | 107 | 产生这个问题的原因是 `npx` 是有缓存的，但全局卸载后，`npx` 的缓存还在。 108 | 109 | ## 解决办法 110 | 111 | 方案一 112 | 使用固定版本号 113 | 114 | ```bash 115 | npx create-react-app@5 116 | ``` 117 | 118 | 方案二 119 | 使用 `npm init`代替 120 | 121 | ```bash 122 | npm init react-app my-app 123 | ``` 124 | 125 | 方案三 126 | 先清除 `npx` 缓存然后在初始化 127 | 128 | ```bash 129 | npx clear-npx-cache 130 | npx create-react-app my-app 131 | ``` 132 | 133 | --- 134 | 135 | 以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。 136 | 137 | 本文首发掘金平台，来源[小马博客](https://maqib.cn/blog/a-create-react-app-v5-problem) 138 | -------------------------------------------------------------------------------- /data/blog/cloudflare-set-301.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 网站迁移后，如何通过 Cloudflare 实现 301 重定向？ 3 | date: 2025/02/22 22:55:57 4 | lastmod: 2025/02/22 11:42:11 5 | tags: [Cloudflare] 6 | draft: false 7 | summary: 在网站迁移过程中，301 重定向是至关重要的一步。它不仅可以确保用户访问旧域名时自动跳转到新域名，还能将旧域名的 SEO 权重传递到新域名，避免流量损失和搜索引擎排名下降。 8 | images: https://img.maqib.cn/img/202502221832285.webp 9 | authors: ['default'] 10 | layout: PostLayout 11 | --- 12 | 13 | 大家好！最近我将我的网站从 `https://editor.runjs.cool/` 迁移到了 `https://mdxnotes.com/`。为了确保用户和搜索引擎能够顺利访问新站点，我决定通过 **Cloudflare** 来设置 301 重定向。今天就来分享一下具体的操作步骤，希望能帮助到有类似需求的朋友们！ 14 | 15 | ## 为什么要设置 301 重定向？ 16 | 17 | 在网站迁移过程中，301 重定向是至关重要的一步。它不仅可以确保用户访问旧域名时自动跳转到新域名，还能将旧域名的 SEO 权重传递到新域名，避免流量损失和搜索引擎排名下降。 18 | 19 | ## 如何通过 Cloudflare 实现 301 重定向？ 20 | 21 | Cloudflare 提供了两种主要方式来实现 301 重定向：**页面规则（Page Rules）** 和 **Workers**。下面我会详细介绍这两种方法。 22 | 23 | ## 方法 1：使用 Cloudflare 页面规则（Page Rules） 24 | 25 | ### 步骤 1：登录 Cloudflare 26 | 27 | 首先，访问 [Cloudflare](https://www.cloudflare.com/) 并登录你的账户。 28 | 并且将域名添加到 Cloudflare 域，这样就可以通过 cloudflare 来域名解析。 29 | 30 | ### 步骤 2：选择站点 31 | 32 | 在仪表板中选择你需要设置的网站（例如我的站点 `runjs.cool`）。 33 | 34 | ![cloudflare 站点](https://img.maqib.cn/img/202502221832285.webp) 35 | 36 | ### 步骤 3：进入页面规则 37 | 38 | 在左侧菜单中，点击 **"Rules"**（规则）。 39 | 40 | ![cloudflare rules](https://img.maqib.cn/img/202502221833930.webp) 41 | 42 | ### 步骤 4：创建新的页面规则 43 | 44 | 点击 **"Create Rule"**（创建规则）。 45 | 46 | ### 步骤 5：设置规则条件 47 | 48 | 在 （如果 URL 匹配）字段中，输入旧域名的匹配规则。例如： 49 | 50 | - `https://editor.runjs.cool/*`（匹配所有页面） 51 | 52 | - 选择 **"301 - Permanent Redirect"**（301 永久重定向）。 53 | - 在目标 URL 中，输入新域名的对应地址。例如： 54 | - `https://mdxnotes.com/${1}`（`${1}` 表示保留原始路径）。 55 | 56 | ![cloudflare 设置规则条件](https://img.maqib.cn/img/202502221615777.webp) 57 | 58 | ### 步骤 7：保存规则 59 | 60 | 点击 **"Save"**（保存并部署）。 61 | 可能要等一会后，访问旧域名的页面，检查是否成功跳转到新域名。 62 | 63 | --- 64 | 65 | ## 方法 2：使用 Cloudflare Workers（高级） 66 | 67 | 如果你需要更灵活的重定向逻辑（例如基于路径、查询参数等），可以使用 Cloudflare Workers 来实现。 68 | 69 | ### 步骤 1：登录 Cloudflare 70 | 71 | 访问 [Cloudflare](https://www.cloudflare.com/) 并登录你的账户。 72 | 73 | ### 步骤 2：进入 Workers 74 | 75 | 在左侧菜单中，点击 **"Workers & Pages"**（Workers 和页面）。 76 | 77 | ### 步骤 3：创建 Worker 78 | 79 | 点击 **"Create Application"**（创建应用），然后选择 **"Create Worker"**（创建 Worker）。 80 | 81 | 也可以通过 playground 直接创建 82 | 83 | https://workers.cloudflare.com/playground 84 | 85 | ### 步骤 4：编写重定向代码 86 | 87 | 在 Worker 编辑器中，输入以下代码： 88 | 89 | ```javascript 90 | /** 91 | * @typedef {Object} Env 92 | */ 93 | 94 | export default { 95 | /** 96 | * @param {Request} request 97 | * @param {Env} env 98 | * @param {ExecutionContext} ctx 99 | * @returns {Promise} 100 | */ 101 | async fetch(request, env, ctx) { 102 | const url = new URL(request.url) 103 | 104 | // 设置新域名 105 | const newDomain = 'https://mdxnotes.com' 106 | 107 | // 保留路径和查询参数 108 | const newUrl = newDomain + url.pathname + url.search 109 | 110 | // 返回 301 重定向 111 | return Response.redirect(newUrl, 301) 112 | }, 113 | } 114 | ``` 115 | 116 | 点 Go，就可以预览 117 | 118 | ![](https://img.maqib.cn/img/202502221635983.webp) 119 | 120 | ### 步骤 5：部署 Worker 121 | 122 | 点击 **"Deploy"**（部署）。 123 | 124 | ![Deploy](https://img.maqib.cn/img/202502221638193.webp) 125 | 126 | ### 步骤 6：绑定 Worker 到旧域名 127 | 128 | ![cloudflare 绑定 Worker 路由设置截图](https://img.maqib.cn/img/202502221645609.webp) 129 | 130 | ### 步骤 7：测试重定向 131 | 132 | 访问旧域名的页面，检查是否成功跳转到新域名。 133 | 134 | 通过以上步骤，你可以轻松使用 Cloudflare 实现 301 重定向，确保用户和搜索引擎顺利访问新站点。如果你有任何问题，欢迎在评论区留言讨论！ 135 | 136 | **关注我们，获取更多技术干货！** 137 | 138 | 希望这篇文章对你有帮助！如果你觉得有用，别忘了点赞、分享哦！😊 139 | -------------------------------------------------------------------------------- /data/blog/codepen-1-initial.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: '实现一个 Code Pen：（一）项目初始化' 3 | date: '2022/5/12' 4 | lastmod: '2022/5/12' 5 | tags: [JavaScript, React.js] 6 | draft: false 7 | summary: '前段时间掘金上线了一个新功能 Code pen，可以在线写代码，笔者对这种在线实时编辑的功能充满了好奇，所以打算开发一个简易的 Code pen。' 8 | images: [] 9 | authors: ['default'] 10 | layout: PostLayout 11 | --- 12 | 13 | ## 前言 14 | 15 | 前段时间掘金上线了一个新功能 Code pen，可以在线写代码，浏览器就可以运行预览，在文章中就可以插入代码片段，对 web 开发者大有裨益，非常方便读者对文章的理解，笔者对这种在线实时编辑的功能充满了好奇，所以打算开发一个简易的 Code pen。 16 | 17 | ## 技术栈 18 | 19 | - Next.js 20 | - Tailwindcss 21 | - Uniapp 云数据库 22 | 23 | ## 初始化项目 24 | 25 | 使用以下命令初始化一个 next 项目 26 | 27 | ```bash 28 | npx create-next-app next-code-pen 29 | cd next-code-pen 30 | ``` 31 | 32 | 安装 `tailwindcss` 相关包，初始化 `tailwind.config.js` 33 | 34 | ```bash 35 | npm install -D tailwindcss postcss autoprefixer 36 | npx tailwindcss init -p 37 | ``` 38 | 39 | 修改 `tailwind.config.js` 配置，将代码移动到`src`目录下，这个是我的个人偏好 40 | 41 | ```js 42 | module.exports = { 43 | content: ['./src/**/*.{js,ts,jsx,tsx}'], 44 | theme: { 45 | extend: {}, 46 | }, 47 | plugins: [], 48 | } 49 | ``` 50 | 51 | ## 页面结构 52 | 53 | 用 Tailwind 来实现一个页面 54 | 55 | ### SVG 实现 LOGO 56 | 57 | 有个好的 logo 才可以开始一个好的项目 58 | 59 | ```html 60 |
61 | 67 | 71 | 75 | 79 | + 80 | 81 | CODE 82 |
83 | ``` 84 | 85 | 效果 86 | 87 | ![logo](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/500e9470b0b2493590e752fd5f363637~tplv-k3u1fbpfcp-zoom-1.image) 88 | 89 | 这个 logo 部分来源`figma`，后面再加一个`+`，意味着后我们可以从它开始一些五彩斑斓的项目。 90 | 91 | ### 页面主体部分 92 | 93 | 我们先安装 `react-split-pane`, 把我们的页面拆分成几块，分为 HTML，CSS，JS，可以拖拽视窗大小，这个包依赖版本是 react16， 由于 react 是平滑升级，所以可以强制安装 94 | 95 | ```bash 96 | npm i react-split-pane --force 97 | ``` 98 | 99 | 使用 react-split-pane ，初始化页面结构, react-split-pane 是将页面拆分成 2 块，若要拆分成 3 块的话，要使用 2 次。 100 | 101 | ```html 102 | 103 | 104 |
105 | 106 |
107 |
108 | 109 | 110 |
111 | 112 | ``` 113 | 114 | ## 效果 115 | 116 | ![拖拽效果](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95f4555de5cf40719eeb772fdf1740cb~tplv-k3u1fbpfcp-watermark.image?) 117 | 118 | 预览地址：https://code.runjs.cool/pen/create 119 | 120 | 代码仓库：https://github.com/maqi1520/next-code-pen 121 | 122 | 至此项目初始化成功， 接下来将介绍 在 next 项目中使用 Monaco Editor，Monaco Editor 是 VS Code 中使用的开源代码编辑器， 拥有代码高亮和代码自动补全的功能。 123 | 124 | 若对你有帮助记得点个 star，感谢！ 125 | 126 | 以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。 127 | 128 | 本文首发掘金平台，来源[小马博客](https://maqib.cn/) 129 | -------------------------------------------------------------------------------- /data/blog/free-deploy-honeyed-words-generator.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: '免费部署一个“土味情话”生成网站' 3 | date: '2022/2/15' 4 | lastmod: '2022/03/21' 5 | tags: [JavaScript, GitHub] 6 | draft: false 7 | summary: '首先在“知乎” “微信” 等平台搜索“土味情话”，然后利用抓包工具将一些回答都保存到一个 JSON 中。然后利用随机数就可以随机生成了。' 8 | images: 9 | [ 10 | 'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0164da5033af4710895493f25d023ecb~tplv-k3u1fbpfcp-watermark.image?', 11 | ] 12 | authors: ['default'] 13 | layout: PostLayout 14 | --- 15 | 16 | ## 前言 17 | 18 | “你喜欢什么面？”——“你的心里面” 19 | 20 | “来者何人” ——“你的人” 21 | 22 | 像上面的这种听起来又肉麻又害羞又有点儿乡土感觉的小情话，就是土味情话啦。 23 | 作为程序员肯定想不出这些肉麻的话，如不做个土味情话生成器，关键时候说不定有用哦！！ 24 | 25 | ## 实现 26 | 27 | 首先在“知乎” “微信” 等平台搜索“土味情话”，然后利用抓包工具将一些回答都保存到一个 JSON 中。然后利用随机数就可以随机生成了。 28 | 29 | ```json 30 | [ 31 | { 32 | "id": "495e1a80-fb5a-4c21-9c89-a5c2237f1619", 33 | "content": "想试试我的草莓味唇膏吗？", 34 | "likeCount": 24, 35 | "dislikeCount": 3, 36 | "type": "默认分类" 37 | }, 38 | { 39 | "id": "9eb93075-ffd4-458c-8b4e-301e219359b8", 40 | "content": "我喜欢你，在于颜值，喜欢他，忠于人品", 41 | "likeCount": 4, 42 | "dislikeCount": 11, 43 | "type": "默认分类" 44 | }, 45 | { 46 | "id": "4621a013-a79b-4e1d-908b-fea4cb8b8cb4", 47 | "content": "不管我本人多么平庸，我总觉得对你的爱很美。", 48 | "likeCount": 13, 49 | "dislikeCount": 6, 50 | "type": "默认分类" 51 | }, 52 | { 53 | "id": "35515ddf-7220-4b41-9046-5b4fe55c10e4", 54 | "content": "被你赞过的朋友圈，叫甜甜圈。", 55 | "likeCount": 11, 56 | "dislikeCount": 10, 57 | "type": "默认分类" 58 | } 59 | ] 60 | ``` 61 | 62 | ## 预览地址 63 | 64 | https://honeyed-words-generator.vercel.app/ 65 | 66 | ## github 地址 67 | 68 | https://github.com/maqi1520/honeyed-words-generator 69 | 70 | ## 技术栈 71 | 72 | - `typescript` 73 | - `tailwind` 74 | - `nextjs` 75 | - `animejs` 76 | 77 | 使用 animejs 来生成动画！ 78 | 79 | ## 开始开发 80 | 81 | 我使用**山月**的 next 模板快速创建应用 82 | 83 | ```bash 84 | $ git clone git@github.com:shfshanyue/next-app.git 85 | ``` 86 | 87 | 在项目创建早期尽可能对 package 进行升级，这里使用了 `npm-check-updates` 88 | 89 | ```bash 90 | $ npm run ncu 91 | ``` 92 | 93 | 在测试环境中进行开发 94 | 95 | ```bash 96 | $ npm run dev 97 | ``` 98 | 99 | 打包 100 | 101 | ```bash 102 | $ npm run build 103 | ``` 104 | 105 | ### 文件结构 106 | 107 | ```bash 108 | . 109 | ├── node_modules/ 110 | ├── pages/ # 所有的 pages 111 | ├── utils/ 112 | ├── package.json 113 | ├── package-lock.json 114 | ├── README.md 115 | └── serverless.yaml 116 | ``` 117 | 118 | ## Deoploy 119 | 120 | ### Vercel 121 | 122 | ```bash 123 | $ vercel 124 | ``` 125 | 126 | ## 小结 127 | 128 | 该程序实现起来一点也不难，主要是开始创作的想法。当然还可以加上很多功能，比如用户系统，点赞，吐槽评论等，说不定以后会发展成一个在线交友平台，哈哈。 129 | 有时候，当有了一个想法，我们就要付诸实践，或者将这件事作为一个代办事项，如没有开始，哪来的优秀作品呢？ 130 | 131 | 再次贴下我的个性签名: 132 | 133 | > 你不一定要很厲害，才能開始；但你要開始，才能很厲害 134 | 135 | ## 最后 136 | 137 | 祝福各位情人节快乐，有情人终成眷属 138 | 139 | --- 140 | 141 | 以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。 142 | 143 | 本文首发掘金平台，来源[小马博客](https://maqib.cn/blog/free-deploy-honeyed-words-generator) 144 | -------------------------------------------------------------------------------- /data/blog/how-to-share-technology.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: '如何快速在团队内做一次技术分享？' 3 | date: '2022/6/25' 4 | lastmod: '2022/6/25' 5 | tags: [前端, 程序员, markdown] 6 | draft: false 7 | summary: '本文讲述了我在准备团队内容分享的小技巧，我认为最重要的就是结合公司实际来做分享修改，无论主题也好文章内容也罢，虽然文章是别人写的，但要经过自己的思考和消化，变成自己的知识，这样我们才可以快速成长！' 8 | images: 9 | [ 10 | 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34f290e9620741c0800479815b859b91~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?', 11 | ] 12 | authors: ['default'] 13 | layout: PostLayout 14 | --- 15 | 16 | ## 前言 17 | 18 | 相信很多小伙伴跟我一样，是一位奋斗在一线的业务开发，每天有做不完的任务，还有项目经理在你耳边催你，“这个功能今天能完成吗？”其实作为一名前端工程师，任务就是完成 Leader 的任务， 19 | 但公司实行 OKR 以来，你就不得不在完成任务的基础上加上几条，“提示个人能力”是我任务之外一个长期目标。 20 | ![提升个人能力OKR](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92b8b891b96d4d40908d53a275010cfa~tplv-k3u1fbpfcp-zoom-1.image) 21 | 22 | 为了能完成这个目标，团队内部分享就成了这个目标的关键结果，那么如何在短时间内完成这项任务呢？下面分享下我的技巧。 23 | 24 | ## 明确主题 25 | 26 | 首先我们要明确公司需要什么？我们不能随便搞一个知识点去分享，这样没有人愿意去听，比如公司接下来可能会上前端监控系统，那么我们可以在先做一个技术调研，出一个《前端监控体系搭建要点》，比如公司接下来需要做小程序，那么我们可以出一个《小程序跨端实现方案探索》等，如果没有什么新的功能要开发，那么我们也可以谈一谈《前端性能优化》、《Typescript 快速上手》，总之要明确一个切合实际的目标。 27 | 28 | ## 巧用搜索引擎 29 | 30 | 确定好主题后，我们可以在技术社区搜索相关的技术文章，比如掘金、知乎、思否、微信公众号等， 31 | 比如直接在掘金搜索“性能优化” 然后按热度排序，就可以找到不错的文章。 32 | 33 | ![掘金搜索性能优化](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89fed10ba7b64901a236e155240cc708~tplv-k3u1fbpfcp-zoom-1.image) 34 | 35 | 接下来我们需要根据这些文章中的内容制作 PPT 36 | 37 | ## 使用 markdown 来制作 PPT 38 | 39 | 程序员做 PPT 可能会浪费不少时间，所以我选择是 markdown 来制作 PPT，这里我分享 2 个工具 40 | 41 | **[Marp for VS Code](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode 'Marp for VS Code') vscode 插件** 42 | ![Marp for VS Code](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6caa6ceaa1e44dfbdea6968b79da91d~tplv-k3u1fbpfcp-zoom-1.image) 43 | 只用关注内容，简单分隔一下，就可以制作 PPT，看下 marp 官方文档可以很快学会用法，看看 jeremyxu 写的效果，项目地址:[kubernetes 分享 PPT 源文件](https://github.com/jeremyxu2010/k8s-share 'kubernetes 分享 PPT 源文件') 。 44 | 45 | ![Marp kubernetes 分享 PPT](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/305b90569f0a43d8b26ad38fd5f71f04~tplv-k3u1fbpfcp-zoom-1.image) 46 | 47 | **二： Slidev 也可以让我们用 Markdown 写 PPT 的工具库** 48 | 49 | 官网地址：[https://sli.dev](https://sli.dev)， 基于 Node.js、Vue.js 开发，而且它可以支持各种好看的主题、代码高亮、公式、流程图、自定义的网页交互组件，还可以方便地导出成 PDF 或者直接部署成一个网页使用。 50 | 51 | - 演讲者头像 52 | 53 | 当然还有很多酷炫的功能，比如说，我们在讲 PPT 的时候，可能想同时自己也出镜，Slidev 也可以支持。 54 | 55 | ![演讲者头像](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95a5e2eee06b4021824b7edaa984edc4~tplv-k3u1fbpfcp-zoom-1.image) 56 | 57 | - 演讲录制 58 | 59 | Slidev 还支持演讲录制功能，因为它背后集成了 WebRTC 和 RecordRTC 的 API， 60 | 61 | ![演讲录制](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13065941a14441e7b5322f20ee168127~tplv-k3u1fbpfcp-zoom-1.image) 62 | 63 | ## 文章转 markdown 64 | 65 | ![文章拷贝助手油猴扩展](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f1e838aaab74cb6b7225da6fe0f2e27~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?) 66 | 67 | 这里推荐下我写的油猴扩展 68 | 69 | - 第一步： [安装 chrome 油猴扩展](https://chrome.pictureknow.com/extension?id=4d999497b75d4eb6acf4d0db3053f1af '安装 chrome 油猴扩展') 70 | - 第二步： [安装文章拷贝助手](https://greasyfork.org/zh-CN/scripts/439663-copy-helper '安装文章拷贝助手') 71 | 72 | 可以直接将文章转为 markdown 格式，目前已经支持掘金、知乎、思否、简书、微信公众号文章。 73 | 74 | 接下来就根据 H2 分页组织 PPT 内容即可。 75 | 76 | ```md 77 | --- 78 | layout: cover 79 | --- 80 | 81 | # 第 1 页 82 | 83 | This is the cover page. 84 | 85 | 86 | ``` 87 | 88 | 较长的内容可以将内容改为幻灯片编写备注。它们将展示在**演讲者模式**中，供你在演示时参考。 89 | 90 | ## 小结 91 | 92 | 本文讲述了我在准备团队内容分享的小技巧，我认为最重要的就是结合公司实际来做分享修改，无论主题也好文章内容也罢，虽然文章是别人写的，但要经过自己的思考和消化，变成自己的知识，这样我们才可以快速成长！在此，祝各位小伙伴在能够获知识的同时得较高的 OKR 考核。 93 | 94 | 以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。 95 | -------------------------------------------------------------------------------- /data/blog/introduce-tailwindcss.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 用 TailwindCSS 打造美好祝福：给大家送上新年祝福的 demo 3 | date: 2023/1/22 19:40:16 4 | lastmod: 2023/1/26 11:42:08 5 | tags: [tailwindcss] 6 | draft: false 7 | summary: 前几天，群里有有伙伴问，在Next.js中，该使用哪个UI框架？我强烈推荐 tailwindcss， 因为你不再需要写 CSS 代码了，这 2 天还录制了一个视频，包括录屏、录音、剪辑、动画等，花费蛮多时间，在视频最后，借一个 demo 给大家拜年了，祝您在新的一年中，事业蒸蒸日上，幸福美满，健康长久。 8 | images: https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42b85073f04a4eefa5281cf1c737cbae~tplv-k3u1fbpfcp-watermark.image? 9 | authors: ['default'] 10 | layout: PostLayout 11 | --- 12 | 13 | 前几天，群里有有伙伴问，在 Next.js 中，该使用哪个 UI 框架？我强烈推荐 tailwindcss， 因为你不再需要写 CSS 代码了，这 2 天还录制了一个视频，包括录屏、录音、剪辑、动画等，花费蛮多时间，在视频最后，借一个 demo 给大家拜年了，祝您在新的一年中，事业蒸蒸日上，幸福美满，健康长久。 14 | 15 |