From 144e19871a37433d8fad686c18cddc0ba65f7b4d Mon Sep 17 00:00:00 2001 From: Chocolate1999 <2816778271@qq.com> Date: Sun, 11 Sep 2022 19:12:56 +0800 Subject: [PATCH] feat: new blog page --- src/components/content/blog/BlogCard.tsx | 65 ++++++-------- src/components/layout/Icon.tsx | 4 +- src/contents/blog/02-didi copy.mdx | 110 +++++++++++++++++++++++ src/contents/blog/03 test copy.mdx | 10 +++ src/contents/blog/03 test.mdx | 10 +++ src/pages/blog.tsx | 32 ++++--- 6 files changed, 181 insertions(+), 50 deletions(-) create mode 100644 src/contents/blog/02-didi copy.mdx create mode 100644 src/contents/blog/03 test copy.mdx create mode 100644 src/contents/blog/03 test.mdx diff --git a/src/components/content/blog/BlogCard.tsx b/src/components/content/blog/BlogCard.tsx index 566d175..8b056e5 100644 --- a/src/components/content/blog/BlogCard.tsx +++ b/src/components/content/blog/BlogCard.tsx @@ -4,7 +4,6 @@ import { HiOutlineClock, HiOutlineEye } from 'react-icons/hi'; import Accent from '@/components/Accent'; import Tag from '@/components/content/Tag'; -import CloudinaryImg from '@/components/images/CloudinaryImg'; import UnstyledLink from '@/components/links/UnstyledLink'; import { BlogFrontmatter, InjectedMeta } from '@/types/frontmatters'; @@ -36,20 +35,36 @@ export default function BlogCard({ className='block h-full rounded-md focus:outline-none focus-visible:ring focus-visible:ring-primary-300' href={`/blog/${post.slug}`} > -
- +
+ {/* blog_info */} +
+

{post.title}

+

+ + {format( + new Date(post.lastUpdated ?? post.publishedAt), + 'MMMM dd, yyyy' + )} + +

+

+ {post.description} +

+
+
+ + {post.readingTime.text} +
+
+ + {post?.views?.toLocaleString() ?? '-'} views +
+
+
+ {/* tags */}
@@ -64,30 +79,6 @@ export default function BlogCard({ ))}
-
-

{post.title}

-
-
- - {post.readingTime.text} -
-
- - {post?.views?.toLocaleString() ?? '-'} views -
-
-

- - {format( - new Date(post.lastUpdated ?? post.publishedAt), - 'MMMM dd, yyyy' - )} - -

-

- {post.description} -

-
); diff --git a/src/components/layout/Icon.tsx b/src/components/layout/Icon.tsx index 644e889..dcb78da 100644 --- a/src/components/layout/Icon.tsx +++ b/src/components/layout/Icon.tsx @@ -3,7 +3,7 @@ import { SiBilibili } from 'react-icons/si'; import ThemeButton from '@/components/buttons/ThemeButton'; -const Logo = () => { +const Icon = () => { return (
{ ); }; -export default Logo; +export default Icon; diff --git a/src/contents/blog/02-didi copy.mdx b/src/contents/blog/02-didi copy.mdx new file mode 100644 index 0000000..c05e734 --- /dev/null +++ b/src/contents/blog/02-didi copy.mdx @@ -0,0 +1,110 @@ +--- +title: '滴滴-橙心优选2' +publishedAt: '2022-12-20' +description: '滴滴-橙心优选前端秋招面试总结与复盘' +banner: 'didi_l7o0am.jpg' +tags: 'interview,vue,react' +--- + +## 介绍 + +先说一下最终结果吧，第三面凉了。9 月 5 号下午 1 点开始，一直到下午 4 点 20 样子，持续三轮面试，最终倒在了第三轮。感受与总结我就放在最后吧。总体来说问的比较基础，没有深度挖掘知识点。另外，已经过了一天了，还是三面一起来的，可能会有问题遗漏掉，一般来说遗漏掉的都是比较简单，能轻松说出来的那种。 + +## 一面 + +- 1、自我介绍 +- 2、JS 基本数据类型（怎么判断基本数据类型） +- 3、说说你对原型和原型链的理解 +- 4、水平垂直居中的几种方式，说一说 +- 5、说说你对深浅拷贝的理解（要求手撕深拷贝） +- 6、输入一个 URL 到渲染页面的整个过程 +- 7、浏览器缓存有了解过嘛？说说看 +- 8、说一个你熟悉的排序算法，然后手写一下（简单写了一个冒泡） + +### 感受 + +一面问的比较基础，也是比较顺利收到了二面通知 + +## 二面 + +- 1、自我介绍 +- 2、CSS 选择器优先级的理解 +- 3、CSS 定位的几种方式 +- 4、CSS 怎么清除浮动 +- 5、display 几种属性说一说 +- 6、水平垂直居中的几种方式 +- 7、父容器已知宽高，子容器宽高未知，怎样让子容器水平垂直居中 +- 8、css modules 你有了解过吗 +- 9、如果组件 css 命名冲突，你怎么解决 +- 10、设计模式你有了解过吗？说说单例模式 +- 11、call、apply、bind 的区别 +- 12、普通函数和箭头函数的区别 +- 13、项目中有用到 `debounce`，那你写一下防抖吧 +- 14、实现如下效果：当点击 `aaa` 时输出 0 ，当点击 `bbb` 输出 1，当点击`ccc` 输出 2 + +```javascript +
    +
  • aaa
    • +
  • bbb
    • +
  • ccc
    • +
+``` + +- 15、for 遍历时，如果用 `var` 来声明变量 `i` 会有什么问题，怎么解决这个问题？ +- 16、浏览器缓存你了解多少，说说看 +- 17、谈谈你对 `cookie` 的理解，`cookie` 有哪些字段，说说看 +- 18、`cookie` 和 `session` 的区别 + +### 感受 + +感觉有些问题，答的不是很好，但过了二面，手撕那块没啥问题。 + +## 三面 + +- 1、自我介绍 +- 2、聊大学经历 +- 3、你觉得学的最好的一门课 + +> 因为网络这块知识准备的比较充足，就选了计算机网络，其它的与前端不太挂钩，也不太好扯。 + +- 4、面试官对网络这门课教学方式很感兴趣，于是扯了挺久，扯到了网络建设项目（校运动会举行），扯到了最后排名，与第一名的差距在哪 +- 5、如果要你给一个非科班的人，讲网络这门课，你会怎么讲？ +- 6、网络里面你认为的最熟悉的章节（说了 HTTP、TCP 这块） +- 7、那你说一下对称加密和非对称加密。为什么非对称加密更好，现在还是有用对称加密，你能说出原因吗？最好举一下生活中的例子 +- 8、你算法和数据结构咋样，做一道题吧 + +> 上来就来了一道动态规划的题，想了一下，没啥思路，面试官就换了一道题 + +- 9、算法题：求两个数组的交集 + +### 感受 + +10 分钟后收到了感谢信，这效率是真高啊。原以为秋招以收到滴滴意向书结束，但没想到还是倒在了三面这最后一步了。收到后不甘心是当然的，但是面试后的复盘是很重要的，接下来写一下对本次面试的总结吧 + +## 总结 + +`我很强，但是我很傲。` 从下午 1 点开始面，一直面到下午 4 点 20 左右，也是我第一次经历。面试完后，都感觉脑袋空荡荡的，啥也记不起来了。开头这句话，是我收到面试结果后想到的一句话。`我很强`：这或许就是面试失败后对自己的安慰吧，我很强，不要因为这个丢失了信心。 + +`但是我很傲`：连面的过程是挺兴奋的，我从春招从未收到二面开始，到现在居然到了三面，就感觉离成功就差那么一步了。三面面完后，休息时间段期间，我甚至比较自信自己快要拿到滴滴意向书了。与实习公司同事还聊了一会，他们说自己也是聊天，聊着聊着就凉了。我还是对自己比较有信心，还例举了自己问了哪些问题。 + +世界就是这样，永远不要笑别人，因为保不准那天你就成了故事里的主人公，成为了被笑的那个。 + +没错，我也终究成为了那一个，甚至怀疑是不是弄错了，但过了一天后，复盘过后，发现确实有些地方没有到位。 + +至于这个 `傲`，我还去查了查狮子座男生性格特点： + +> 在十二星座中，狮子座是最具有权威感与支配能力的星座。通常有一种贵族气息或是王者风范。受人尊重，做事相当独立，知道如何运用能力和权术以达到目的。本质是阳刚、钻制、具有太阳般的生气、宽宏大量、乐观、海派、光明磊落、不拘小节、心胸开阔。不过也会有顽固、傲慢、独裁的一面。同时，他们天生怀抱着崇高的理想，能够全力以赴、发挥旺盛的生命力为周遭的人、为弱者或正义而战。对弱者有慈悲心及同情心，对自己很有自信，擅长组织事务，喜欢有秩序;能够发挥创造的才华，使成果具有建设性、原创性，是个行动派。 + +在过去，可能对星座这一块不太了解，也不会相信所说的性格特点啥的，但是现在回过头来看，这些性格特点真差不了太多。 + +其实，这或许就是大家常在嘴边说起的年轻人吧，那种傲气，能力不够，简单事又不愿意做。 + +尽管这次面试依旧凉了，但还是继续努力，在这里整理一下 9 月份规划： + +- 适当慢下来，整理复盘一下 8 月份面试出现的问题，及时查漏补缺 +- 亡羊补牢，将基础知识学的更扎实一点 +- 算法那一块也要坚持下去，保证让自己 9 月份刷完一轮专题路线 + +至于对于面试其它感受，在此就不继续书写了，因为看到的文章并不一定能体会到我的过程。就好像读者看到的是一张风景照片，但可能没法体验到沿途的风景的那段过程。 + +> 2020.9.6 晚有感而发，希望 9 月对自己更温柔一点。加油！ diff --git a/src/contents/blog/03 test copy.mdx b/src/contents/blog/03 test copy.mdx new file mode 100644 index 0000000..d471f5c --- /dev/null +++ b/src/contents/blog/03 test copy.mdx @@ -0,0 +1,10 @@ +--- +title: 'test2020' +publishedAt: '2020-10-20' +description: '滴滴-橙心优选前端秋招面试总结与复盘' +tags: 'interview' +--- + +## 介绍 + +先说一下最终结果吧，第三面凉了。9 月 5 号下午 1 点开始，一直到下午 4 点 20 样子，持续三轮面试，最终倒在了第三轮。感受与总结我就放在最后吧。总体来说问的比较基础，没有深度挖掘知识点。另外，已经过了一天了，还是三面一起来的，可能会有问题遗漏掉，一般来说遗漏掉的都是比较简单，能轻松说出来的那种。 diff --git a/src/contents/blog/03 test.mdx b/src/contents/blog/03 test.mdx new file mode 100644 index 0000000..3e00c08 --- /dev/null +++ b/src/contents/blog/03 test.mdx @@ -0,0 +1,10 @@ +--- +title: 'test2020-2' +publishedAt: '2020-10-20' +description: '滴滴-橙面试总结与复盘' +tags: 'interview' +--- + +## 介绍 + +先说一下最终结果吧，第三面凉了。9 月 5 号下午 1 点开始，一直到下午 4 点 20 样子，持续三轮面试，最终倒在了第三轮。感受与总结我就放在最后吧。总体来说问的比较基础，没有深度挖掘知识点。另外，已经过了一天了，还是三面一起来的，可能会有问题遗漏掉，一般来说遗漏掉的都是比较简单，能轻松说出来的那种。 diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx index 19a1f10..ac95f17 100644 --- a/src/pages/blog.tsx +++ b/src/pages/blog.tsx @@ -16,25 +16,35 @@ export default function IndexPage({ }: InferGetStaticPropsType) { const isLoaded = useLoaded(); + const getYear = (a: Date | string | number) => new Date(a).getFullYear(); + + const isSameYear = (a: Date | string | number, b: Date | string | number) => + a && b && getYear(a) === getYear(b); + return ( -
-
-
-

- Blog -

-

- Thoughts, skill, and tutorials about front-end development. -

-
    +
    +
    +
      {posts.length > 0 ? ( - posts.map((post) => ) + posts.map((post, index) => ( + <> + {!isSameYear( + post.publishedAt, + posts[index - 1]?.publishedAt + ) && ( + + {getYear(post.publishedAt)} + + )} + + + )) ) : ( )}