Merge pull request #116 from Justin3go/preview

Preview

README.md

@@ -3,7 +3,7 @@
 <div align="center">
 
 <a href="https://justin3go.com" target="blank">
-  <img src="https://justin3go.com/bg.jpg" height="100px" alt="logo" style="border-radius: 20px"/>
+  <img src="https://justin3go.com/ava.png" height="100px" alt="logo"/>
 </a>
 
 # Justin3go Blog

README.zh.md

@@ -3,7 +3,7 @@
 <div align="center">
 
 <a href="https://justin3go.com" target="blank">
-  <img src="https://justin3go.com/bg.jpg" height="100px" alt="logo" style="border-radius: 20px"/>
+  <img src="https://justin3go.com/ava.png" height="100px" alt="logo"/>
 </a>
 
 # Justin3go Blog

docs/.vitepress/config/en.ts

@@ -11,7 +11,8 @@ export default defineConfig({
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-			{ text: "Home", link: "/en/" },
+			{ text: "Blog", link: "/en/" },
+      { text: "Archive", link: "/en/archive/", activeMatch: '/en/archive/' },
 			{ text: "Notes", link: "/en/notes/", activeMatch: '/en/notes/' },
 			{ text: "About", link: "/en/about", activeMatch: '/en/about' },
     ],

docs/.vitepress/config/zh.ts

@@ -1,4 +1,4 @@
-import { DefaultTheme, defineConfig } from 'vitepress'
+import { type DefaultTheme, defineConfig } from 'vitepress'
 
 import { createSideBarZH } from "../theme/utils/createSideBar";
 
@@ -11,7 +11,8 @@ export default defineConfig({
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-			{ text: "首页", link: "/" },
+			{ text: "博客", link: "/" },
+			{ text: "归档", link: "/archive", activeMatch: '/archive' },
 			{ text: "笔记", link: "/notes/", activeMatch: '/notes/' },
 			{ text: "关于", link: "/about", activeMatch: '/about' },
     ],

docs/.vitepress/theme/components/GoBack.vue

@@ -11,7 +11,7 @@
 	</t-button>
 </template>
 <script setup lang="ts">
-import { computed } from "vue";
+import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useRoute, useData } from "vitepress";
 import { RollbackIcon } from "tdesign-icons-vue-next";
 
@@ -24,9 +24,21 @@ function goBack() {
 	if (window.history.length <= 1) {
 		location.href = "/";
 	} else {
-		window.history.back();
+		window.history.go(hashChangeCount.value);
+		hashChangeCount.value = -1;
 	}
 }
+
+const hashChangeCount = ref(-1);
+onMounted(() => {
+	window.onhashchange = () => {
+		hashChangeCount.value--;
+	}
+})
+
+onUnmounted(() => {
+	window.onhashchange = null;
+})
 </script>
 <style scoped>
 .img-container {

docs/.vitepress/theme/posts-en.data.mts

@@ -6,6 +6,8 @@ interface Post {
   date: {
     time: number
     string: string
+    year: string 
+    monthDay: string
   }
   tags: string[]
   excerpt: string | undefined
@@ -41,6 +43,13 @@ function formatDate(raw: string): Post['date'] {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit'
+    }),
+    year: date.toLocaleDateString('en-US', {
+      year: 'numeric'
+    }),
+    monthDay: date.toLocaleDateString('en-US', {
+      month: '2-digit',
+      day: '2-digit'
     })
   }
 }

docs/.vitepress/theme/posts.data.mts

@@ -6,6 +6,8 @@ interface Post {
   date: {
     time: number
     string: string
+    year: string 
+    monthDay: string
   }
   tags: string[]
   excerpt: string | undefined
@@ -41,6 +43,13 @@ function formatDate(raw: string): Post['date'] {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit'
+    }),
+    year: date.toLocaleDateString('zh-Hans', {
+      year: 'numeric'
+    }),
+    monthDay: date.toLocaleDateString('zh-Hans', {
+      month: '2-digit',
+      day: '2-digit'
     })
   }
 }

docs/archive.md

@@ -0,0 +1,100 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: doc
+editLink: false
+lastUpdated: false
+isNoComment: true
+isNoBackBtn: true
+---
+
+<!-- 之所以将代码写在 md 里面，而非单独封装为 Vue 组件，因为 aside 不会动态刷新，参考 https://github.com/vuejs/vitepress/issues/2686 -->
+<template v-for="[year, postGroup] in postGroups" :key="year">
+  <h2 :id="year" class="post-title">
+    <a
+      class="header-anchor"
+      :href="`#${year}`"
+      :aria-label="`Permalink to &quot;${year}&quot;`"
+      >​</a
+    >
+    <div class="post-year hollow-text">{{ year }}</div>
+  </h2>
+  <div class="post-container" v-for="post in postGroup" :key="post.url">
+    <a :href="post.url">{{ post.title }}</a>
+    <span class="post-date">
+      {{ post.date.monthDay }}
+    </span>
+  </div> 
+</template>
+
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+// 非 Vue 组件需要手动引入
+import {
+	MessagePlugin,
+	PaginationProps,
+	Pagination as TPagination,
+  Tag as TTag,
+} from "tdesign-vue-next";
+import { TimeIcon } from "tdesign-icons-vue-next";
+
+import { data as posts } from "./.vitepress/theme/posts.data.mts";
+import { isMobile } from "./.vitepress/theme/utils/mobile.ts";
+
+const postGroups = computed(() => {
+  const groups = new Map<string, typeof posts>();
+  posts.forEach((post) => {
+    const year = post.date.year;
+    if (!groups.has(year)) {
+      groups.set(year, []);
+    }
+    groups.get(year)?.push(post);
+  });
+  return groups;
+});
+
+console.log('postGroups', postGroups.value);
+</script>
+<style lang="scss" scoped>
+
+.mr-2 {
+	margin-right: 2px;
+}
+
+.post-title {
+	margin-bottom: 6px;
+	border-top: 0px;
+	position: relative;
+	top: 0;
+	left: 0;
+
+	.post-year {
+		position: absolute;
+		top: -6px;
+		left: -10px;
+
+		z-index: -1;
+		opacity: .12;
+		font-size: 86px;
+		font-weight: 900;
+	}
+}
+
+.post-container {
+  display: flex;
+  justify-content: space-between;
+  margin: 12px 0;
+
+  .post-date {
+    opacity: .6;
+  }
+}
+
+.hollow-text {
+
+  /* 设置文本颜色为透明 */
+  color: var(--vp-c-bg);
+
+	-webkit-text-stroke: 1px var(--vp-c-text-1);
+}
+</style>

docs/en/archive.md

@@ -0,0 +1,100 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: doc
+editLink: false
+lastUpdated: false
+isNoComment: true
+isNoBackBtn: true
+---
+
+<!-- 之所以将代码写在 md 里面，而非单独封装为 Vue 组件，因为 aside 不会动态刷新，参考 https://github.com/vuejs/vitepress/issues/2686 -->
+<template v-for="[year, postGroup] in postGroups" :key="year">
+  <h2 :id="year" class="post-title">
+    <a
+      class="header-anchor"
+      :href="`#${year}`"
+      :aria-label="`Permalink to &quot;${year}&quot;`"
+      >​</a
+    >
+    <div class="post-year hollow-text">{{ year }}</div>
+  </h2>
+  <div class="post-container" v-for="post in postGroup" :key="post.url">
+    <a :href="post.url">{{ post.title }}</a>
+    <span class="post-date">
+      {{ post.date.monthDay }}
+    </span>
+  </div> 
+</template>
+
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+// 非 Vue 组件需要手动引入
+import {
+	MessagePlugin,
+	PaginationProps,
+	Pagination as TPagination,
+  Tag as TTag,
+} from "tdesign-vue-next";
+import { TimeIcon } from "tdesign-icons-vue-next";
+
+import { data as posts } from "../.vitepress/theme/posts-en.data.mts";
+import { isMobile } from "../.vitepress/theme/utils/mobile.ts";
+
+const postGroups = computed(() => {
+  const groups = new Map<string, typeof posts>();
+  posts.forEach((post) => {
+    const year = post.date.year;
+    if (!groups.has(year)) {
+      groups.set(year, []);
+    }
+    groups.get(year)?.push(post);
+  });
+  return groups;
+});
+
+console.log('postGroups', postGroups.value);
+</script>
+<style lang="scss" scoped>
+
+.mr-2 {
+	margin-right: 2px;
+}
+
+.post-title {
+	margin-bottom: 6px;
+	border-top: 0px;
+	position: relative;
+	top: 0;
+	left: 0;
+
+	.post-year {
+		position: absolute;
+		top: -6px;
+		left: -10px;
+
+		z-index: -1;
+		opacity: .12;
+		font-size: 86px;
+		font-weight: 900;
+	}
+}
+
+.post-container {
+  display: flex;
+  justify-content: space-between;
+  margin: 12px 0;
+
+  .post-date {
+    opacity: .6;
+  }
+}
+
+.hollow-text {
+
+  /* 设置文本颜色为透明 */
+  color: var(--vp-c-bg);
+
+	-webkit-text-stroke: 1px var(--vp-c-text-1);
+}
+</style>

docs/en/index.md

@@ -117,7 +117,7 @@ const onCurrentChange: PaginationProps["onCurrentChange"] = (
 		left: -10px;
 
 		z-index: -1;
-		opacity: .08;
+		opacity: .12;
 		font-size: 66px;
 		font-weight: 900;
 	}

docs/en/notes/算法与数据结构/12动态规划.md

@@ -4,7 +4,11 @@
 
 如果原问题是由交叠的子问题构成（递归调用），动态规划对每个子问题只求解一次，并把结果记录在表中，递推计算得到原始问题的解。
 
-> 主要它是只求一次子问题，所以相比于递归暴力求解就复杂度降低了
+> 它是只求一次子问题，所以相比于递归暴力求解就复杂度降低了
+
+但相对于记忆化搜索，时间复杂度是一样的，只是记忆化搜索需要用到递归，是一种“从顶到底”的方法，而动态规划是一种“从底到顶”的方法。
+
+动态规划为什么叫做动态规划，就是因为当前你需要做决策，而当前的决策会需要选择不同的以前的最优决策，这个规划是动态的。
 
 **解题步骤**
 
@@ -106,6 +110,12 @@ ChangeMaking2([1,3,4], 6)
 
 <img src="https://oss.justin3go.com/blogs/image-20211105151844839.png" alt="image-20211105151844839" style="zoom:80%;" />
 
+- 记忆化搜索是一种“从顶到底”的方法
+- 动态规划是一种“从底到顶”的方法
+
+两者的时间复杂度是一样的，只是记忆化搜索需要用到递归。
+
+
 ### 基本背包问题解法
 
 ```python
@@ -141,6 +151,11 @@ print(value[-1][-1])
 37
 ```
 
+注意，这里代码容易迷惑的地方就是：
+
+- `value[i - 1][j]`代表的就是前一项，dp表默认填充了0；
+- 而`w[i - 1]`和`v[i - 1]`代表的是当前项，这里的`i`是从 1 开始的，所以要减去 1。
+
 ### 回溯找组合
 
 <img src="https://oss.justin3go.com/blogs/image-20211105152058485.png" alt="image-20211105152058485" style="zoom:80%;" />

docs/en/posts/2023/01/08JavaScript专题-继承.md

@@ -110,7 +110,7 @@ console.log(instance2.colors); // "red, blue, green"
 
 ```
 
-这相当于新的`SubType`对象上运行了`SuperType()`函数中的所有初始化代码，结果就是子类的每个实例上都包含父类的属性和方法。在这里就是每个子实例都会拥有属于自己的`colors`属性，注意这与原型链实现的不同，原型链的方式是所有实例共享一个，而这里是为每个实例都新建了一个。
+这相当于新的`SubType`对象上运行了`SuperType()`函数中的所有初始化代码，结果就是子类的每个实例上都包含父类的属性。这种方法的优点是每个子类实例都有自己的属性副本，避免了引用类型属性被所有实例共享的问题。但缺点是没有继承原型，因此无法继承方法。在这里就是每个子实例都会拥有属于自己的`colors`属性，注意这与原型链实现的不同，原型链的方式是所有实例共享一个，而这里是为每个实例都新建了一个。
 
 并且还有一个优点就是可以在子类构造函数中向父类构造函数传参
 
@@ -166,7 +166,7 @@ instance2.sayAge();                // 27
 调用了两次父类的构造函数：
 
 1. `SuperType.call(this, name);`
-2. `let instance1 = new SubType("Nicholas", 29);`
+2. `SubType.prototype = new SuperType();`
 
 我们用白话描述一下这个过程：首先父类需要将方法写在原型上而不是作为自身的属性。然后通过盗用构造函数将所有的属性继承下来，最后通过原型链继承的方式将父类作为子类的原型，注意这里是将整个父类作为了子类的原型，并不是直接复制父类的原型。所以原型里面包含了父类的属性，即和子类的属性重复了，只不过这里是在原型，会被同名属性遮蔽而已，但也浪费了存储空间，增加了初始化的消耗