【个人网站】03.如何做网站自定义页面 URL 映射

pageUrlOverrides 是一个配置对象，用于在 Notion 集成中定义自定义页面 URL 映射，以替换自动生成的 URL。它有助于 SEO 优化和用户体验。示例中展示了如何将 Notion 页面 ID 映射到更友好的自定义 URL，并提供了一个清理页面 URL 映射的函数 cleanPageUrlMap，确保映射的有效性。

2024-8-1

【个人网站】02.如何在Next中集成Notion数据库

在Next.js项目中集成Notion数据库的步骤包括获取Notion API密钥和数据库ID、安装Notion官方SDK、设置Notion客户端、获取数据库内容、部署与验证，以及使用封装的Notion API进行交互。通过这些步骤，可以有效地将Notion作为内容管理系统，并利用react-notion-x组件渲染Notion页面，提升代码的可维护性。

2024-7-31

【个人网站】01.如何使用Notion作为数据库进行全栈开发

使用 Notion 作为数据库进行全栈开发的步骤包括注册 Notion 账号、获取 Notion API Token、创建数据库页面并配置相应的列。文中详细介绍了如何创建新集成、共享数据库权限以及获取数据库ID，以便进行数据管理和展示。

2024-7-30

Notion踩坑记

记录实际开发中遇到Notion的报错问题

2024-8-6

【个人网站】09.在 Next.js 中集成百度翻译：无需额外的 Node.js 服务器实现安全翻译功能

将百度翻译功能集成到Next.js应用中，无需单独的Node.js环境。通过定义API路由、服务器端翻译逻辑和客户端集成，确保API密钥安全并实现便利的翻译功能。使用标准的Next.js命令即可运行应用，翻译功能完全集成，无需额外脚本。

2024-9-11

2.[Personal Website] How to Integrate Notion Database in Next

The steps for integrating a Notion database into a Next.js project include obtaining the Notion API key and database ID, installing the Notion official SDK, setting up the Notion client, retrieving database content, deploying and verifying, and interacting with a wrapped Notion API. By following these steps, you can effectively use Notion as a content management system (CMS) and utilize the react-notion-x components to render Notion pages, improving code maintainability.

2024-10-12

1.[Personal Website] How to Use Notion as a Database for Full-Stack Development

The steps for using Notion as a database for full-stack development include registering a Notion account, obtaining the Notion API Token, creating database pages, and configuring the necessary columns. The guide provides detailed instructions on how to create a new integration, share database permissions, and retrieve the database ID to facilitate data management and presentation.

2024-10-12

Next基础知识点

Next.js 是一个用于构建 React 应用的框架，它提供了服务端渲染(SSR)和静态网站生成(SSG)的功能，能够提升页面加载速度和 SEO 效果。通过自动化路由系统、数据获取策略（如 getStaticProps 和 getInitialProps）以及增量静态生成 (ISR)，Next.js 能够灵活地生成静态页面或根据需求进行服务器端渲染。它非常适合用于内容不频繁变化的博客、作品集、文档等静态网站，同时还能支持动态路由和嵌套路由。此外，Next.js 支持 API 路由，可以将后端功能集成到应用中。

2024-8-5

Next踩坑记

实际开发中遇到的Next相关的bug，记录下来和大家分享

2024-8-5

【个人网站】06.使用Mailchimp做网站邮件订阅功能

Mailchimp 是一个流行的电子邮件营销平台，提供多种功能，如受众管理、自动化和分析报告。它的免费计划适合小型企业，允许最多 500 个联系人和每月 1,000 封邮件。文中还详细介绍了如何通过 Mailchimp API 集成邮件订阅功能到 Next.js 项目中，包括创建账户、获取 API Key、编写订阅函数和创建 API 路由。Mailchimp 的强大功能和免费计划使其成为初学者的理想选择。

2024-8-9

【个人网站】05.基于i18n在Next项目中搭建国际化网站

本文分享了如何在Next.js项目中使用i18n实现国际化网站，包括依赖安装、项目结构、配置文件、国际化文件的设置，以及组件的使用示例。此外，还提供了常见错误及其解决方案，确保服务器端和客户端的语言设置一致。

2024-8-6

【个人网站】10.Next.js 项目性能优化全攻略：从图片加载到 JavaScript 减少

在现代网站开发中，优化图片和减少未使用的JavaScript对于提升网站性能至关重要。本文详细介绍了如何在Next.js项目中使用next/image组件优化图片资源，并通过动态导入、按需加载等技术减少未使用的JavaScript，进而提升网站加载速度和用户体验。我们还探讨了通过预先连接外部资源和启用缓存来加速加载第三方服务如Google Ads。

2024-10-16

在 Next.js 项目中结合 Webpack 实现高级功能：自定义配置详解

在 Next.js 项目中，如何通过自定义 Webpack 配置实现高级功能？本篇文章详细介绍了如何添加自定义 loader 和插件、优化代码分割、处理 CSS 与 Sass、配置 SSR 和环境变量等内容。

2024-9-10

【个人网站】04.如何使用 Vercel 快速部署个人网站 | 全流程指南

Vercel 是一个专注于前端开发的平台，提供简单快速的静态网站和前端框架应用部署服务。其主要特点包括一键部署、自动化 CI/CD、全球 CDN、预览部署、自定义域名和无服务器函数等。适用于静态网站、单页应用、服务器端渲染应用及电子商务网站。部署流程包括注册、创建项目、导入 Git 仓库、配置项目和管理监控。Vercel 使开发者能够专注于代码，而无需担心部署和性能优化问题。

2024-8-6

【个人网站】11.如何使用七牛云配置静态存储实现高效图片分发（实用教程）

本篇文章全面讲解如何使用七牛云配置云空间实现静态存储图片分发，涵盖注册、域名绑定、上传配置、CDN加速等实操步骤，帮助开发者优化图片加载速度，提高网站性能。通过七牛云的高效存储和分发方案，轻松解决图片管理与加载效率问题。

2024-12-2

【个人网站】08.接入Google广告营收插件

在 Next.js 项目中集成 Google AdSense 广告的步骤包括在 _document.js 文件中添加验证代码，创建广告组件并在页面中使用。需要注意广告展示的延迟、广告位的正确配置，以及在开发环境中禁用广告代码以避免展示广告。

2024-7-26

【个人网站】07.如何在Next.js中提升SEO及配置站点地图：完整指南

本指南详细介绍了如何在Next.js项目中使用next-sitemap插件配置站点地图，以提升SEO和加快Google搜索引擎收录。步骤包括安装依赖、配置next-sitemap、生成站点地图、部署和验证。还提供了如何在Google、Bing和百度等搜索引擎中提交站点地图的说明，以及如何查看站点地图的收录情况和SEO优势。

2024-7-26

3.[Personal Website]How to Quickly Deploy a Personal Website Using Vercel | Full Process Guide

Vercel is a platform focused on The deployment process involves signing up, creating a project, importing a Git repository, configuring the project, and managing monitoring. Vercel enables developers to focus on writing code without worrying about deployment and performance optimization, making it an ideal choice for modern web development.

2024-10-12

从输入URL到页面展示发生了什么

本文详细介绍了从输入URL到页面展示的整个HTTP请求流程，包括请求的构建、缓存查找、TCP连接建立、HTTP请求发送、服务器处理请求及返回结果等九个阶段。还探讨了浏览器缓存的作用、TCP三次握手的必要性以及如何通过Cookie实现用户登录状态的管理，最后回答了一些常见问题，如站点加载速度快的原因和UDP与TCP的优缺点。

2024-8-5

【面试精选】TypeScript 常见8道面试题

本文详细介绍了TypeScript的优势、与JavaScript的主要区别、基本数据类型、泛型、unknown与any的区别、readonly修饰符与const关键字的区别、装饰器的使用及其类型，以及interface与type的区别。TypeScript通过静态类型检查、增强的代码编辑体验和更好的工具支持，提高了代码的可维护性和开发效率。

2024-8-30

【ES6系列】解构赋值：提升代码优雅度的魔法技巧 | JavaScript 简化赋值方式

解构赋值是JavaScript中的一项强大功能，可以使代码更加简洁、易读。在这篇文章中，我们将深入探讨解构赋值的基本概念、进阶用法以及实战应用，包括如何通过解构赋值简化数组和对象的提取，优化函数参数的传递，并通过实际案例展示如何用解构赋值处理复杂的API数据

2024-11-21

【面试精选】JavaScript常见面试题

本文总结了 JavaScript 常见面试题，包括数据类型、null 和 undefined 的区别、call、apply 和 bind 的用法、let、var 和 const 的区别、闭包、原型链、事件循环以及性能优化策略。重点强调了 JavaScript 的基本概念和性能提升方法，如减少 HTTP 请求、使用 CDN、资源压缩、延迟加载、缓存策略等。

2024-9-3

函数式编程

函数式编程强调不可变性、函数作为一等公民、无副作用和高阶函数等核心特点。通过示例展示了如何使用高阶函数和纯函数来简化代码，提升可读性和可维护性。柯里化和组合函数的概念被详细介绍，强调了它们的灵活性和复用性。最后，介绍了 JavaScript 中的 reduce() 方法及其用法，展示了如何通过高阶函数处理数组数据。

2023-3-16

变量命名规范

本文介绍了变量命名规范，包括文件资源命名、变量命名、函数命名、常量命名及函数注释的规则。文件名应使用小写字母和连词线，变量和函数采用小驼峰命名法，常量使用全大写和下划线分隔，函数注释需遵循特定格式。

2022-6-28

如何保证登陆数据传输安全

本文讨论了如何确保登录数据传输的安全性，涵盖了前端存储方式、Cookie的配置及使用、服务端Session管理、Token机制、JWT、Refresh Token以及单点登录(SSO)的实现。重点强调了Cookie的安全配置（如Secure和HttpOnly属性）以及加密技术在数据传输中的重要性，提供了具体的代码示例和加密解密过程。

2021-12-24

【ES6系列】Map类型和Set类型详解

本文介绍了ECMAScript中的Set、WeakSet、Map和WeakMap类型，包括它们的定义、属性、方法及应用。Set用于存储唯一值，支持操作如添加、删除和查找，且时间复杂度为O(1)。WeakSet仅存储对象并具有弱引用特性。Map允许使用任意类型的值作为键，提供了丰富的方法来操作键值对。WeakMap与Map类似，但键名是弱引用，适合存储临时数据，避免内存泄漏。

2021-12-21

[ES6 Series] A Detailed Explanation of the Set Type

This article introduces the Set, WeakSet, Map, and WeakMap types in ECMAScript, including their definitions, properties, methods, and applications. Set is used to store unique values and supports operations such as adding, deleting, and finding elements, with a time complexity of O(1). WeakSet stores only objects and has weak reference characteristics. Map allows using any type of value as a key and provides a rich set of methods for manipulating key-value pairs. WeakMap is similar to Map, but its keys are weak references, making it suitable for storing temporary data and preventing memory leaks.

2024-11-21

【Interview Essentials】Top 8 TypeScript Interview Questions & Expert Answers

Discover the top 8 common TypeScript interview questions with expert answers to help you ace your next developer interview. Prepare like a pro with real-world examples!

2024-9-10

【Interview Essentials】Common JavaScript Interview Questions

Common JavaScript Interview Questions

2024-9-10

程序员年终总结指南：高效归纳工作成果，助力职业晋升

年终总结是程序员展示工作成果和职业发展的关键机会。从技术成长、绩效成果到未来规划，全面教你撰写一份数据详实、有条理的年终总结，让你的努力不被埋没，助力升职加薪。

2024-12-17

【软考】程序员中级软件工程师备考分享

中级软件工程师备考分享，包含详细的备考计划、学习顺序和必考知识点。适合自学备考的考生，提供从学习资料到刷题策略的完整路径，并结合实际经验总结出高效备考方法，助力顺利通过考试。

2024-11-21

【LeetCode系列】双指针解题技巧及例题讲解

掌握前端开发中的高效算法，深入解析双指针技巧如何在LeetCode和面试中脱颖而出。通过案例学习，优化复杂度，提升解题效率，让算法成为你技术进阶的加速器！更多程序员成长秘籍，助力你的职业发展

2024-11-21

【LeetCode系列】链表讲解

链表是一种由节点组成的数据结构，分为单向链表、双向链表和循环链表。其优点包括便于插入和删除、动态长度和有效利用内存，但随机访问效率低且需要额外空间。链表在前端开发中应用于实现DOM结构、异步队列、LRU缓存等。处理链表时需注意指针丢失、越界和内存泄露等问题，使用哨兵节点可以简化操作。经典链表题目包括反转链表、合并有序链表等。

2024-9-8

Webpack零基础小白学习路径分享

学习Webpack的路径包括理解基础概念、动手搭建项目、深入理解加载器和插件、优化构建性能、源码阅读与调试、探索进阶功能、实践项目以及参与社区与开源项目。通过这些步骤，可以全面掌握Webpack的原理与应用。

2024-9-10

如何打包并发布一个 NPM 包：从零到上线的完整流程

全面指南，教你从零开始开发、打包并发布一个高质量的NPM包。涵盖项目配置、代码质量控制、自动化部署、发布流程及最佳实践，帮助你高效提升开发效率并创建专业的开源项目。

2025-1-6