diff --git a/README.md b/README.md index 4e2a694f..a718a9c1 100755 --- a/README.md +++ b/README.md @@ -1,42 +1,344 @@ # 冴羽的博客 -## 淘系招聘 +## 关于作者 -淘系消费者运营前端团队招人啦,从站外投放、唤端拉新到端内承接、手淘内各种互动项目,到商品详情、店铺订单等基础链路,个个都是千万上亿流量的项目,机遇挑战多多,不妨加我了解一下呗 mqyqingfeng +* 博客:[https://yayujs.com/](https://yayujs.com/) +* 社群:["低调务实优秀中国好青年"前端社群](https://www.yuque.com/yayu/nice-people/xou8qr) +* 成长:[社群茶话会](https://www.yuque.com/yayu/nice-people/shares)、[我的茶话会](https://www.yuque.com/yayu/blog/grow)、[微信读书](https://yayujs.com/grow) +* 翻译:[TypeScript 中文文档](http://ts.yayujs.com/)、[Svelte 中文文档](https://svelte.yayujs.com/)、[Solid 中文文档](https://solid.yayujs.com/) +* 小册:[《Next.js 开发指南》](https://s.juejin.cn/ds/i8kJo2o8/)、[《Svelte 开发指南》](https://s.juejin.cn/ds/iUurdrae/)、[《Astro 开发指南》](https://juejin.cn/book/7452253924608147467) +* 专栏:[掘金](https://juejin.cn/user/712139234359182/columns)、[思否](https://segmentfault.com/u/yayu)、[语雀](https://www.yuque.com/yayu)、公众号:[冴羽(#yayujs)](https://cdn.jsdelivr.net/gh/mqyqingfeng/picture/qrcode_for_gh_bd1a3dc9eafd_258.jpg) +* 星球:[冴羽·前端大佬成长之路](https://t.zsxq.com/tn3PW),用一年时间,十倍成长,一鸣惊人 -## 进度 +## 公众号 -JavaScript深入系列 15 篇已完结。 + -JavaScript专题系列 20 篇已完结。 +作为准前端开发专家的你,第一时间获取前端资讯、技术干货、AI 课程,那不得关注下我的公众号「冴羽」? -underscore 系列 8 篇已完结。 +## 最新单篇 -ES6 系列 20 篇已完结。 +1. [10 个被严重低估的 JS 特性,直接少写 500 行代码](https://github.com/mqyqingfeng/Blog/issues/376) +2. [JavaScript 异步循环踩坑指南](https://github.com/mqyqingfeng/Blog/issues/376) +3. [为什么在 JavaScript 中 NaN !== NaN?背后藏着 40 年的技术故事](https://github.com/mqyqingfeng/Blog/issues/378) +4. [从 useState 到 URLState:为什么大佬们都在删状态管理代码?](https://github.com/mqyqingfeng/Blog/issues/379) +5. [涨见识了,Error.cause 让 JavaScript 错误调试更轻松](https://github.com/mqyqingfeng/Blog/issues/380) +6. [前端性能革命:200 行 JavaScript 代码实现 Streaming JSON](https://github.com/mqyqingfeng/Blog/issues/390) +7. [2025 年最火的前端项目出炉,No.1 易主!](https://github.com/mqyqingfeng/Blog/issues/391) +8. [CSS 新特性!瀑布流布局的终极解决方案](https://github.com/mqyqingfeng/Blog/issues/392) +9. [JavaScript Date 语法要过时了!以后用这个替代!](https://github.com/mqyqingfeng/Blog/issues/393)] +10. [2026 年 Web 前端开发的 8 个趋势!](https://github.com/mqyqingfeng/Blog/issues/394) +11. [2026 年前端必须掌握的 4 个 CSS 新特性!](https://github.com/mqyqingfeng/Blog/issues/395) +12. [2025 年 HTML 年度调查报告公布!好多不知道!](https://github.com/mqyqingfeng/Blog/issues/396) +13. [2025 年 HTML 年度调查报告亮点速览!](https://github.com/mqyqingfeng/Blog/issues/397) +14. [现代 CSS 颜色使用指南](https://github.com/mqyqingfeng/Blog/issues/398) +15. [现代 CSS 颜色使用指南进阶篇](https://github.com/mqyqingfeng/Blog/issues/399) +16. [20 周年之际!jQuery 4.0 正式发布!轻装上阵](https://github.com/mqyqingfeng/Blog/issues/400) +17. [2025 年 CSS 年度调查报告亮点速览](https://github.com/mqyqingfeng/Blog/issues/401) +18. [回首 jQuery 20 年:从辉煌到没落](https://github.com/mqyqingfeng/Blog/issues/402) +19. [微软发布了 2026 年 AI 发展的 7 个趋势](https://github.com/mqyqingfeng/Blog/issues/403) +20. [1 分钟 CSS 小技巧让你的 UI 看起来贵 10 倍](https://github.com/mqyqingfeng/Blog/issues/405) +21. [Vercel 团队 10 年 React 性能优化经验:10 大核心策略让性能提升 300%](https://github.com/mqyqingfeng/Blog/issues/406) +22. [Flexbox水太深,你把持不住](https://github.com/mqyqingfeng/Blog/issues/407) +23. [2026 年的 Node.js 已经不是那个你认识的 Node.js 了](https://github.com/mqyqingfeng/Blog/issues/408) +24. [我没想到 CSS if 函数这么强](https://github.com/mqyqingfeng/Blog/issues/409) -现在写起了各种单篇...... +## Nano Banana Pro 系列 -React 系列还在懒惰中...... +1. [6 个白嫖 Nano Banana Pro 的网站](https://github.com/mqyqingfeng/Blog/issues/381) +2. [一次找齐!1000 个 Nano Banana Pro 提示词](https://github.com/mqyqingfeng/Blog/issues/382) +3. [Nano Banana Pro 很强,但你要学会写提示词才能为所欲为](https://github.com/mqyqingfeng/Blog/issues/383) +4. [10 个 Nano Banana Pro 专业级生图技巧](https://github.com/mqyqingfeng/Blog/issues/384) +5. [疯传的 Nano Banana Pro 像素级拆解提示词](https://github.com/mqyqingfeng/Blog/issues/385) +6. [不知道怎么写 Nano Banana Pro 提示词?分享你一个结构化示例,复刻任意图片](https://github.com/mqyqingfeng/Blog/issues/386) +7. [太好看了!3 个动漫变真人 Nano Banana Pro 提示词](https://github.com/mqyqingfeng/Blog/issues/387) +8. [Nano Banana Pro 零基础快速上手](https://github.com/mqyqingfeng/Blog/issues/388) -## 专栏 +## 前端工程师系统成长系列 -* [掘金主页](https://juejin.im/user/58e4b9b261ff4b006b3227f4) -* [segmentfault主页](https://segmentfault.com/u/yayu/articles) -* [知乎专栏](https://zhuanlan.zhihu.com/c_1042806379215601664) -* 新开公众号 搜索「yayujs」 或者 「冴羽的JavaScript博客」 +2025 年,我在知识星球更新了一套名为"前端大佬成长之路"的课程。课程不再拘泥于技术,而是总结了我这 10 年来的工作生活经验,讲解技术人成长的方方面面,帮助你实现快速成长。 -## 浏览器相关 + + +星球文章目录如下: + +### 成长之路·服务指引 + +* 冴羽:新版·必看·服务指引 +* 冴羽:如何有效学习课程和使用社群,实现真正的成长? +* 冴羽:社群资源分享(8T大小,持续更新中) + +### 冴羽·认知升级篇·提升思考力(18) + +* 冴羽:从影响一生的「战略」开始说起 +* 冴羽:如何做出一个好的年度规划? +* 冴羽:如何修正自己的负面信念? +* 冴羽:快速成长的关键 —— 绿灯思维 +* 冴羽:如何克服内心的焦虑? +* 冴羽:如何停止精神内耗? +* 冴羽:为什么道理我都懂,但依然过不好这一生? +* 冴羽:明明知道最应该做的事情是什么,但就是不去做,为什么? +* 冴羽:目标不重要,行为体系才重要 +* 冴羽:克服拖延的 15 种方法 +* 冴羽:你为什么没有行动起来? + +### 冴羽·技术成长篇·提升技术力(22) + +* 冴羽:如何系统学习前端? +* 冴羽:如何系统学习 Tailwind CSS? +* 冴羽:响应式设计指南 +* 冴羽:理解全栈框架的 CSR、SSR、SSG、ISR、RSC、SPA、Streaming SSR 等概念 +* 冴羽:手写 React SSR +* 冴羽:手写 React SSG 和 ISR +* 冴羽:手写 RSC 实现(上) +* 冴羽:手写 RSC 实现(中) +* 冴羽:手写 RSC 实现(下) +* 冴羽:手写 Streaming +* 冴羽:手写 Server Actions +* 冴羽:Svelte5 快速上手实战 +* 冴羽:Signals 快速上手指南 +* 冴羽:Prisma 快速上手指南 +* 冴羽:设置网站图标的最佳实践 +* 冴羽:Docker 快速上手指南 +* 张渔歌:3 个月刷穿 900 道算法 + +### 冴羽·高效学习篇·提升学习力(17) + +* 冴羽:如何读一本书?分享我的读书方法 +* 冴羽:如何写出一条好的读书笔记? +* 冴羽:如何构建自己的笔记系统?(上) +* 冴羽:如何构建自己的笔记系统?(下) +* 冴羽:25 个常见笔记法一览(上) +* 冴羽:25 个常见笔记法一览(下) +* 冴羽:如何构建自己的知识管理系统?(上) +* 冴羽:如何构建自己的知识管理系统?(下) +* 冴羽:如何构建高质量的信息源? +* 冴羽:分享我的知识管理流程 +* 冴羽:如何构建自己的知识体系? +* 冴羽:10 个学习相关的核心实验结论 +* 冴羽:10 个学习相关的理论模型 +* 冴羽:从生物学的角度谈如何高效学习 +* 冴羽:费曼学习法为什么是世界公认的顶级学习法? +* 冴羽:如何大幅提升学习能力? +* 冴羽:如何学习更有计划性、提升更稳更快? + +### 冴羽·习惯养成篇·提升行动力(13) + +* 冴羽:改变人生的,不是大道理,而是小习惯 +* 冴羽:习惯养成的方法论,其实养成好习惯很简单 +* 冴羽:习惯养成的注意事项,别踩坑,浪费时间 +* 冴羽:语言是有能量的,修正自己的语言习惯 +* 冴羽:阅读,如何培养阅读习惯? +* 冴羽:记录,一定要大量地记录自己,频繁地记录 +* 冴羽:复盘,变优秀最直接的方法 +* 冴羽:冥想,为什么练习冥想很重要? +* 冴羽:冥想,如何练习冥想,从专注到开放 +* 冴羽:这些顺手的微习惯,让生活不知不觉变好 +* 冴羽:如何戒除坏习惯? +* 冴羽:我的习惯养成经历 +* 冴羽:习惯养成篇总结 + +### 冴羽·职场工作篇·提升表达力(3) + +* 冴羽:你累死累活做业务,绩效还不怎么样,我只能帮你到这了...... +* 冴羽:如何面对他人的否定、打压、指责、批评? +* 冴羽:在职场如何做好"向上管理"? +* 冴羽:如何在工作中打造影响力,带动同事? +* 冴羽:怎么平衡工作与生活? + +### 冴羽·前端面试篇·成为收割机(13) + +* 冴羽:如何写出一份好的简历? +* 冴羽:面试前应该做哪些准备工作? +* 冴羽:如何漂亮地回答面试官的问题? +* 冴羽:面试中的开放类问题该如何回答? +* 冴羽:面试后如何复盘,让自己不断精进? +* 冴羽:分享一些前端面试技巧和心态 +* 冴羽:分享一批前端面试资源,面试题目+指导教程+简历模板+真实简历 +* 小燕子:裸辞半年,内心煎熬,终拿字节阿里 offer 的经历 +* 柚子茶:如何轻松拿到大厂前端 offer +* 冴羽:前端,校招,面淘宝,指南 +* 冴羽:前端,社招,面淘宝,指南 +* 冴羽:Next.js 面试题及解析(一) +* 冴羽:Next.js 面试题及解析(二) + +## Astro 系列 + +### 第 3 本小册(21 篇) + +1. [《Astro 实战指南》](https://juejin.cn/book/7452253924608147467) + +## Svelte 系列 + +### 翻译 + +1. 翻译并搭建了中文站点:[Svelte 中文文档](https://svelte.yayujs.com/) + +### 第 2 本小册(44 篇) + +1. [《Svelte 开发指南》](https://s.juejin.cn/ds/iUurdrae/) + +## Solid.js 系列 + +### 翻译 + +1. 翻译并搭建了中文站点: [Solid.js 中文文档](https://solid.yayujs.com/) + +### 专栏 + +1. [《这个比 React 更 react 的框架 —— Solid.js 最新中文文档来了!》](https://juejin.cn/post/7457857802088890387) + +## Next.js 系列 + +### 第 1 本小册(82 篇) + +1. [《Next.js 开发指南》](https://s.juejin.cn/ds/i8kJo2o8/) + +### 专栏 + +1. [理解 Next.js 的 CSR、SSR、SSG、ISR、RSC、SPA、Streaming SSR 等概念](https://juejin.cn/post/7407259722430201867) +2. [Next.js 写 Server Actions 的利器 —— next-safe-action](https://juejin.cn/post/7405542470946652214) +3. [Next.js Server Actions 如何进行错误处理?](https://juejin.cn/post/7400585120284311593) +4. [Next.js 写什么 useState,放 URL 里!](https://juejin.cn/post/7399708179397787687) +5. [分享一个好用的 AI 聚合平台,快速接入国内外主流 AI 模型](https://juejin.cn/post/7396933058728607784) +6. [Next.js 如何实现导航时的过渡动画?(使用 Framer Motion)](https://juejin.cn/post/7394993393125310464) +7. [Next.js 如何处理表单?(TS + Tailwind CSS + Shadcn UI + RHF + Zod + useOptimistic)](https://juejin.cn/post/7394004613015601186) +8. [Next.js 项目写 Tailwind CSS 基本都会遇到的两个问题](https://juejin.cn/post/7387611028988002314) +9. [React 19 新 hook —— useActionState 与 Next.js Server Actions 绝佳搭配](https://juejin.cn/post/7386693876052164658) +10. [Next.js 极简实现 Authentication](https://juejin.cn/post/7383934765370621961) +11. [Next.js 实现下载 m3u8 视频](https://juejin.cn/post/7382966707060703268) +12. [Next.js 项目接入 AI 的利器 —— Vercel AI SDK](https://juejin.cn/post/7376622203301969959) +13. [Next.js v15 要来了,有哪些更新?附升级指南](https://juejin.cn/post/7375858343179255862) +14. [Next.js v14 如何实现 SSE、接入 ChatGPT Stream?](https://juejin.cn/post/7372020457124659234) +15. [Next.js App Router + Socket.IO 实现简易聊天室](https://juejin.cn/post/7371423076662493224) +16. [Next.js 跨域问题的各种解法](https://juejin.cn/post/7366177423775531008) +17. [Next.js 常见错误 Hydration Failed 该如何解决?](https://juejin.cn/post/7365793739892228096) +18. [使用 Next.js App Router 常犯的 10 个错误](https://juejin.cn/post/7361204571828731956) +19. [Next.js v14 的 cookies()、header() 函数实现原理 —— AsyncLocalStorage](https://juejin.cn/post/7360737180392996899) +20. [Next.js v14 报 document is not defined 这种错怎么办?基本都会遇到,深入解析,收藏备用](https://juejin.cn/post/7352342892785352755) +21. [Next.js v14 如何为多个根布局自定义不同的 404 页面?竟然还有些麻烦!欢迎探讨](https://juejin.cn/post/7351321244125265930) +22. [(技巧)当 Next.js 遇到频繁重复的数据库操作时,记住使用 React 的 cache 函数](https://juejin.cn/post/7348643498117038099) +23. [Next.js v14 实现乐观更新,面向未来的 UI 更新方式,你可以不去做,但你不应该不了解](https://juejin.cn/post/7347957960884355113) +24. [如何用 Next.js v14 实现一个 Streaming 接口?](https://juejin.cn/post/7344089411983802394) +25. [Next.js v14 的模板(template.js)到底有啥用?](https://juejin.cn/post/7343569488744300553) + +## React 系列 + +1. [React 之元素与组件的区别](https://juejin.cn/post/7161320926728945701) +2. [React 之 Refs 的使用和 forwardRef 的源码解读](https://juejin.cn/post/7161719602652086308) +3. [React 之 Context 的变迁与背后实现](https://juejin.cn/post/7162002168529027079) +4. [React 之 Race Condition](https://juejin.cn/post/7163202327594139679) +5. [React 之 Suspense](https://juejin.cn/post/7163934860694781989) +6. [React 之从视觉暂留到 FPS、刷新率再到显卡、垂直同步再到16ms的故事](https://juejin.cn/post/7164394153848078350) +7. [React 之 requestAnimationFrame 执行机制探索](https://juejin.cn/post/7165780929439334437) +8. [React 之 requestIdleCallback 来了解一下](https://juejin.cn/post/7166547963517337614) +9. [React 之从 requestIdleCallback 到时间切片](https://juejin.cn/post/7167335700424196127) +10. [React 之最小堆(min heap)](https://juejin.cn/post/7168283003037155359) +11. [React 之如何调试源码](https://juejin.cn/post/7168821587251036167) +12. [React 之 Scheduler 源码解读(上)](https://juejin.cn/post/7171000978278187038) +13. [React 之 Scheduler 源码解读(下)](https://juejin.cn/post/7171319288849137694) +14. [React 之 Scheduler 源码中的三个小知识点,看看你知不知道?](https://juejin.cn/post/7171633315336683528) +15. [300 行代码实现 React 的调度器 Scheduler](https://juejin.cn/post/7171728961473347614) + +## 冴羽答读者问 + +1. [30 岁了, 现在开始努力,晚吗?](https://github.com/mqyqingfeng/Blog/issues/280) +2. [何时能够像你一样优秀?](https://github.com/mqyqingfeng/Blog/issues/281) +3. [怎么才能像你一样写文章如喝水?](https://github.com/mqyqingfeng/Blog/issues/283) +4. [怎么才能像你一样长到180?](https://github.com/mqyqingfeng/Blog/issues/284) +5. [冴羽哥哥 额爱你](https://github.com/mqyqingfeng/Blog/issues/285) +6. [啦啦啦啦啦啦](https://github.com/mqyqingfeng/Blog/issues/286) +7. [除代码外,就没别的优先级很高的爱好了吗?](https://github.com/mqyqingfeng/Blog/issues/287) +8. [钱和成长,哪个更重要?](https://github.com/mqyqingfeng/Blog/issues/288) +9. [悄悄过来蹭个回答](https://github.com/mqyqingfeng/Blog/issues/289) +10. [怎么才能不焦虑?](https://github.com/mqyqingfeng/Blog/issues/292) +11. [功利性学习的心态,你是否也会有?](https://github.com/mqyqingfeng/Blog/issues/293) +12. [人生低谷时,如何快速调整、重回正轨?](https://github.com/mqyqingfeng/Blog/issues/294) +13. [人生的意义是什么?](https://github.com/mqyqingfeng/Blog/issues/295) +14. [你是怎么理解知行合一的?](https://github.com/mqyqingfeng/Blog/issues/296) +15. [如何快速找到一个聊得来的人生伴侣?](https://github.com/mqyqingfeng/Blog/issues/297) +16. [怎么平衡工作与生活?](https://github.com/mqyqingfeng/Blog/issues/298) +17. [如果有机会,你会选择脱产学习深造吗?](https://github.com/mqyqingfeng/Blog/issues/299) +18. [如何在工作中打造影响力,带动同事?](https://github.com/mqyqingfeng/Blog/issues/306) +19. [如何学习更有计划性、提升更稳更快?](https://github.com/mqyqingfeng/Blog/issues/308) +20. [过程比结果重要吗?](https://github.com/mqyqingfeng/Blog/issues/309) +21. [冴羽,你为什么写起了鸡汤?](https://github.com/mqyqingfeng/Blog/issues/310) + +## TypeScript 系列 + +### 翻译 + +1. 翻译并搭建了中文站点:[TypeScript 中文文档](https://ts.yayujs.com/) + +### 专栏 + +1. [TypeScript之基础入门](https://github.com/mqyqingfeng/Blog/issues/227) +2. [TypeScript之常见类型(上)](https://github.com/mqyqingfeng/Blog/issues/228) +3. [TypeScript之常见类型(下)](https://github.com/mqyqingfeng/Blog/issues/229) +4. [TypeScript之类型收窄](https://github.com/mqyqingfeng/Blog/issues/218) +5. [TypeScript之函数](https://github.com/mqyqingfeng/Blog/issues/220) +6. [TypeScript之对象类型](https://github.com/mqyqingfeng/Blog/issues/221) +7. [TypeScript之泛型](https://github.com/mqyqingfeng/Blog/issues/222) +8. [TypeScript之Keyof 操作符](https://github.com/mqyqingfeng/Blog/issues/223) +9. [TypeScript之Typeof 操作符](https://github.com/mqyqingfeng/Blog/issues/224) +10. [TypeScript之索引访问类型](https://github.com/mqyqingfeng/Blog/issues/225) +11. [TypeScript之条件类型](https://github.com/mqyqingfeng/Blog/issues/226) +12. [TypeScript之映射类型](https://github.com/mqyqingfeng/Blog/issues/230) +13. [TypeScript之模板字面量类型](https://github.com/mqyqingfeng/Blog/issues/231) +14. [TypeScript之类(上)](https://github.com/mqyqingfeng/Blog/issues/232) +15. [TypeScript之类(下)](https://github.com/mqyqingfeng/Blog/issues/233) +16. [TypeScript之模块](https://github.com/mqyqingfeng/Blog/issues/234) + +## 博客搭建 + +1. [一篇带你用 VuePress + GitHub Pages 搭建博客](https://github.com/mqyqingfeng/Blog/issues/235) +2. [一篇教你代码同步 GitHub 和 Gitee](https://github.com/mqyqingfeng/Blog/issues/236) +3. [还不会用 GitHub Actions ?看看这篇](https://github.com/mqyqingfeng/Blog/issues/237) +4. [Gitee 如何自动部署 Pages?还是用 GitHub Actions!](https://github.com/mqyqingfeng/Blog/issues/238) +5. [一份前端够用的 Linux 命令](https://github.com/mqyqingfeng/Blog/issues/239) +6. [一份简单够用的 Nginx Location 配置讲解](https://github.com/mqyqingfeng/Blog/issues/242) +7. [一篇教你博客如何部署到自己的服务器](https://github.com/mqyqingfeng/Blog/issues/243) +8. [一篇域名从购买到备案到解析的详细教程](https://github.com/mqyqingfeng/Blog/issues/247) +9. [VuePress 博客优化之 last updated 最后更新时间如何设置](https://github.com/mqyqingfeng/Blog/issues/244) +10. [VuePress 博客优化之添加数据统计功能](https://github.com/mqyqingfeng/Blog/issues/245) +11. [VuePress 博客优化之开启 HTTPS](https://github.com/mqyqingfeng/Blog/issues/246) +12. [VuePress 博客优化之开启 Gzip 压缩](https://github.com/mqyqingfeng/Blog/issues/248) +13. [从零实现一个 VuePress 插件](https://github.com/mqyqingfeng/Blog/issues/250) +14. [VuePress 博客优化之拓展 Markdown 语法](https://github.com/mqyqingfeng/Blog/issues/251) +15. [markdown-it 原理解析](https://github.com/mqyqingfeng/Blog/issues/252) +16. [markdown-it 插件如何写(一)](https://github.com/mqyqingfeng/Blog/issues/253) +17. [markdown-it 插件如何写(二)](https://github.com/mqyqingfeng/Blog/issues/254) +18. [markdown-it 插件如何写(三)](https://github.com/mqyqingfeng/Blog/issues/255) +19. [有的时候我觉得我不会 Markdown](https://github.com/mqyqingfeng/Blog/issues/256) +20. [VuePress 博客优化之中文锚点跳转问题](https://github.com/mqyqingfeng/Blog/issues/259) +21. [搭建 VuePress 博客,你可能会用到的一些插件](https://github.com/mqyqingfeng/Blog/issues/261) +22. [VuePress 博客如何开启本地 HTTPS 访问](https://github.com/mqyqingfeng/Blog/issues/262) +23. [VuePress 博客优化之兼容 PWA](https://github.com/mqyqingfeng/Blog/issues/263) +24. [VuePress 博客优化之开启 Algolia 全文搜索](https://github.com/mqyqingfeng/Blog/issues/267) +25. [VuePress 博客优化之增加 Valine 评论功能](https://github.com/mqyqingfeng/Blog/issues/268) +26. [VuePress 博客优化之增加 Vssue 评论功能](https://github.com/mqyqingfeng/Blog/issues/270) +27. [VuePress 博客之 SEO 优化(一)sitemap 与搜索引擎收录](https://github.com/mqyqingfeng/Blog/issues/272) +28. [VuePress 博客之 SEO 优化(二)重定向](https://github.com/mqyqingfeng/Blog/issues/273) +29. [VuePress 博客之 SEO 优化(三)标题、链接优化](https://github.com/mqyqingfeng/Blog/issues/274) +30. [VuePress 博客之 SEO 优化(四) Open Graph protocol](https://github.com/mqyqingfeng/Blog/issues/275) +31. [VuePress 博客之 SEO 优化(五)添加 JSON-LD 数据](https://github.com/mqyqingfeng/Blog/issues/276) +32. [VuePress 博客之 SEO 优化(六)站长工具](https://github.com/mqyqingfeng/Blog/issues/277) +33. [搭建 VuePress 站点必做的 10 个优化](https://github.com/mqyqingfeng/Blog/issues/278) +34. [VuePress 博客搭建系列 33 篇正式完结!](https://github.com/mqyqingfeng/Blog/issues/279) + +## 一些单篇 1. [浏览器系列之 Cookie 和 SameSite 属性](https://github.com/mqyqingfeng/Blog/issues/157) +1. [聊聊 npm 的语义化版本(Semver)](https://github.com/mqyqingfeng/Blog/issues/312) -## 面试相关 +## 面试系列 1. [淘系前端校招负责人元彦直播答疑文字实录](https://github.com/mqyqingfeng/Blog/issues/167) 2. [业务前端的困境](https://github.com/mqyqingfeng/Blog/issues/172) 3. [前端,社招,面淘宝,指南](https://github.com/mqyqingfeng/Blog/issues/198) 4. [前端,校招,面淘宝,指南](https://github.com/mqyqingfeng/Blog/issues/200) -## 深入系列目录 +## 深入系列 1. [JavaScript深入之从原型到原型链](https://github.com/mqyqingfeng/Blog/issues/2) 2. [JavaScript深入之词法作用域和动态作用域](https://github.com/mqyqingfeng/Blog/issues/3) @@ -58,7 +360,7 @@ React 系列还在懒惰中...... 18. [JavaScript深入之头疼的类型转换(上)](https://github.com/mqyqingfeng/Blog/issues/159) 19. [JavaScript深入之头疼的类型转换(下)](https://github.com/mqyqingfeng/Blog/issues/164) -## 专题系列目录 +## 专题系列 1. [JavaScript专题之跟着underscore学防抖](https://github.com/mqyqingfeng/Blog/issues/22) 2. [JavaScript专题之跟着underscore学节流](https://github.com/mqyqingfeng/Blog/issues/26) @@ -83,7 +385,7 @@ React 系列还在懒惰中...... 21. [JavaScript专题系列20篇正式完结!](https://github.com/mqyqingfeng/Blog/issues/53) 22. [JavaScript专题之花式表示26个字母](https://github.com/mqyqingfeng/Blog/issues/166) -## underscore 系列目录 +## underscore 系列 1. [underscore 系列之如何写自己的 underscore](https://github.com/mqyqingfeng/Blog/issues/56) 2. [underscore 系列之链式调用](https://github.com/mqyqingfeng/Blog/issues/57) @@ -95,7 +397,7 @@ React 系列还在懒惰中...... 8. [underscore 系列之字符实体与 _.escape](https://github.com/mqyqingfeng/Blog/issues/77) 9. [underscore 的源码该如何阅读?](https://github.com/mqyqingfeng/Blog/issues/79) -## ES6 系列目录 +## ES6 系列 1. [ES6 系列之 let 和 const](https://github.com/mqyqingfeng/Blog/issues/82) 2. [ES6 系列之模板字符串](https://github.com/mqyqingfeng/Blog/issues/84) @@ -118,10 +420,6 @@ React 系列还在懒惰中...... 19. [ES6 系列之私有变量的实现](https://github.com/mqyqingfeng/Blog/issues/110) 20. [ES6 完全使用手册](https://github.com/mqyqingfeng/Blog/issues/111) -## 注意 - -深入系列文章部分是有先后顺序的,按照目录结构顺序阅读效果最好。 - ## 勘误及提问 如果有疑问或者发现错误,可以在相应的 issues 进行提问或勘误。 diff --git a/demos/VuePress/vuepress-plugin-code-copy/CodeCopy.vue b/demos/VuePress/vuepress-plugin-code-copy/CodeCopy.vue new file mode 100644 index 00000000..0341c763 --- /dev/null +++ b/demos/VuePress/vuepress-plugin-code-copy/CodeCopy.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/demos/VuePress/vuepress-plugin-code-copy/clientRootMixin.js b/demos/VuePress/vuepress-plugin-code-copy/clientRootMixin.js new file mode 100644 index 00000000..4bb91eb6 --- /dev/null +++ b/demos/VuePress/vuepress-plugin-code-copy/clientRootMixin.js @@ -0,0 +1,18 @@ +import CodeCopy from './CodeCopy.vue' +import Vue from 'vue' + +export default { + updated() { + setTimeout(() => { + document.querySelectorAll('div[class*="language-"] pre').forEach(el => { + if (el.classList.contains('code-copy-added')) return + let ComponentClass = Vue.extend(CodeCopy) + let instance = new ComponentClass() + instance.code = el.innerText + instance.$mount() + el.classList.add('code-copy-added') + el.appendChild(instance.$el) + }) + }, 100) + } +} diff --git a/demos/VuePress/vuepress-plugin-code-copy/index.js b/demos/VuePress/vuepress-plugin-code-copy/index.js new file mode 100644 index 00000000..efa72e55 --- /dev/null +++ b/demos/VuePress/vuepress-plugin-code-copy/index.js @@ -0,0 +1,12 @@ +const path = require('path'); + +module.exports = (options, ctx) => { + return { + name: 'vuepress-plugin-code-copy', + define: { + copybuttonText: options.copybuttonText || 'copy', + copiedButtonText: options.copiedButtonText || "copied!" + }, + clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js') + } + } \ No newline at end of file diff --git a/demos/VuePress/vuepress-plugin-code-copy/package.json b/demos/VuePress/vuepress-plugin-code-copy/package.json new file mode 100644 index 00000000..99195920 --- /dev/null +++ b/demos/VuePress/vuepress-plugin-code-copy/package.json @@ -0,0 +1,11 @@ +{ + "name": "vuepress-plugin-code-copy", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +}

AltStyle によって変換されたページ (->オリジナル) /