a periodical summary.

.editorconfig

@@ -0,0 +1,3 @@
+root=true
+indent_style = space
+indent_size = 4

.eleventy.js

@@ -2,6 +2,7 @@ const { DateTime } = require('luxon')
 const navigationPlugin = require('@11ty/eleventy-navigation')
 const rssPlugin = require('@11ty/eleventy-plugin-rss')
 
+
 module.exports = (config) => {
   config.addPlugin(navigationPlugin);
   config.addPlugin(rssPlugin);

_data/site.js

@@ -1,20 +1,20 @@
 module.exports = {
   meta: {
-    title: "My Purple Blog",
-    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    title: "VS Code网",
+    description: "VS Code，便利你的代码生活。",
     lang: "en",
     siteUrl: "https://example.com/",
   },
   feed: { // used in feed.xml.njk
-    subtitle: "Lorem ipsum dolor sit amet consecuteor",
+    subtitle: "Good!",
     filename: "atom.xml",
     path: "/atom.xml",
     id: "https://example.com/",
-    authorName: "John Doe",
-    authorEmail: "johndoe@example.com"
+    authorName: "Ice Flow",
+    authorEmail: "iceflow0798@outlook.com"
   },
   hero: { // used in hero section of main page ie. index.html.njk
-    title: "Welcome to my purple blog",
-    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores accusantium deserunt odio esse."
+    title: "欢迎来到VS Code网！",
+    description: "VS Code，便利你的代码生活。 它是你的必须调味品。"
   }
 }

_includes/layouts/post.njk

@@ -2,13 +2,13 @@
 layout: layouts/base.njk
 ---
 
-<div class="container-sm">
+<div class="container">
   <h1>{{ title }}</h1>
   {{ content | safe }}
 
   <br><hr>
   {% if not hideTagsList %}
-    <b>Tags: </b>
+    <b>标签: </b>
     {% for tag in tags %}
       {% if tag != 'post' %}
         <a href="{{ '/tags/' | url }}{{ tag | slug }}">{{ tag }}</a>
@@ -17,5 +17,5 @@ layout: layouts/base.njk
     {% endfor %}
   {% endif %}
   <br><br>
-  <a href="{{ '/' | url }}">&larr; Back home</a>
+  <a href="{{ '/' | url }}">&larr; 回到主页</a>
 </div>

index.njk

@@ -1,6 +1,6 @@
 ---
 eleventyComputed:
-  title: "{% if pagination.pageNumber > 0 %}Page {{ pagination.pageNumber + 1 }}{% else %}Homepage{% endif %}"
+  title: "{% if pagination.pageNumber > 0 %}Page {{ pagination.pageNumber + 1 }}{% else %}主页{% endif %}"
 layout: layouts/base.njk
 permalink: /{% if pagination.pageNumber > 0 %}page-{{ pagination.pageNumber + 1 }}/{% endif %}
 pagination:
@@ -9,7 +9,7 @@ pagination:
   alias: posts
   reverse: true
 eleventyNavigation:
-  key: Home
+  key: 主页
   weight: 0
 ---
 
@@ -33,7 +33,7 @@ eleventyNavigation:
   </div>
 
   <h2 class="section-title">
-    Latest Posts
+    Recent Posts
     {%- if pagination.pageNumber != 0 %} - Page {{ pagination.pageNumber + 1 }}{% endif %}
   </h2>
   {% include "components/postslist.njk" %}

package.json

@@ -16,6 +16,7 @@
     "build:11ty": "eleventy",
     "watch:11ty": "eleventy --serve",
     "build": "npm run build:stylus && npm run build:11ty",
-    "dev": "concurrently -n stylus,11ty \"npm:watch:stylus\" \"npm:watch:11ty\""
+    "dev": "concurrently -n stylus,11ty \"npm:watch:stylus\" \"npm:watch:11ty\"",
+    "start": "npx @11ty/eleventy --serve"
   }
 }

pages/about.md

@@ -1,32 +1,21 @@
 ---
-title: About Me
-description: All about me in this page
+title: 关于VS Code网
+description: 对VS Code网的一点（真的只有一点）介绍
 layout: layouts/post.njk
 hideTagsList: true
 eleventyNavigation:
-  key: About
+  key: 关于
   weight: 2
 ---
 
+</br>
 
-consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id nibh tortor id aliquet lectus. Sit amet consectetur adipiscing elit duis. A diam maecenas sed enim ut. Dolor sit amet consectetur adipiscing elit pellentesque habitant. Gravida neque convallis a cras semper auctor. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Dolor sed viverra ipsum nunc aliquet bibendum. Netus et malesuada fames ac turpis egestas sed tempus. Nunc sed augue lacus viverra. Potenti nullam ac tortor vitae. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. 
+#### 这是什么网站？
+    如你所见，这就是一个VS Code网。
 
-## Erat pellentesque adipiscing commodo elit at imperdiet.
+    本网站建立的目的是“从一个学习者的角度向他人（尤其是初学者）介绍VS Code，让接触VS Code的大家少走点弯路”。
+</br>
 
-Ultrices in iaculis nunc sed augue lacus viverra vitae. Porttitor leo a diam sollicitudin. Nunc congue nisi vitae suscipit. Odio morbi quis commodo odio aenean sed adipiscing diam donec. 
-
-### Urna neque viverra justo nec ultrices. 
-
-Vitae aliquet nec ullamcorper sit amet risus. Neque viverra justo nec ultrices dui sapien eget mi. At consectetur lorem donec massa sapien faucibus et molestie. Mauris cursus mattis molestie a. Risus nec feugiat in fermentum posuere urna nec. Egestas sed sed risus pretium. 
-
-#### quam vulputate dignissim suspendisse in.
-
-Nulla aliquet porttitor lacus luctus accumsan tortor. Malesuada pellentesque elit eget gravida cum sociis natoque. Amet luctus venenatis lectus magna fringilla. Accumsan tortor posuere ac ut consequat semper. Varius duis at consectetur lorem. Condimentum id venenatis a condimentum. Vulputate ut pharetra sit amet. Dolor sit amet consectetur adipiscing. Odio eu feugiat pretium nibh ipsum consequat nisl. Amet cursus sit amet dictum sit amet justo donec. Nibh sed pulvinar proin gravida hendrerit. Eget egestas purus viverra accumsan in nisl nisi. Arcu risus quis varius quam quisque id diam vel. Ut tortor pretium.
-
-##### viverra suspendisse potenti nullam ac tortor.
-
-Facilisis gravida neque convallis a cras semper auctor. Turpis massa tincidunt dui ut ornare lectus. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Feugiat vivamus at augue eget arcu dictum. Posuere urna nec tincidunt praesent. Ipsum consequat nisl vel pretium lectus quam id leo in. Nulla malesuada pellentesque elit eget gravida cum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Mattis aliquam faucibus purus in massa. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Odio ut sem nulla pharetra diam sit amet nisl. Penatibus et magnis dis parturient montes nascetur ridiculus mus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Risus nullam eget felis eget nunc lobortis mattis. Lectus magna fringilla urna porttitor rhoncus dolor. Lorem ipsum dolor sit amet 
-
-###### consectetur adipiscing elit duis.
-
-Molestie a iaculis at erat pellentesque adipiscing commodo. Ullamcorper velit sed ullamcorper morbi. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Integer vitae justo eget magna fermentum iaculis. Odio tempor orci dapibus ultrices in iaculis nunc. Purus sit amet luctus venenatis lectus magna fringilla urna. Iaculis nunc sed augue lacus viverra vitae congue eu. Id velit ut tortor pretium viverra suspendisse. Tellus elementum sagittis vitae et leo. Nulla malesuada pellentesque elit eget gravida cum sociis. Eget aliquet nibh praesent tristique magna sit amet. Purus sit amet volutpat consequat mauris nunc congue nisi. Sit amet aliquam id diam maecenas ultricies. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Quis ipsum suspendisse ultrices gravida dictum fusce. Ut consequat semper viverra nam libero justo laoreet. Iaculis at erat pellentesque adipiscing commodo. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent.
+#### 接下来的计划是？
+    从最开始的安装和部署开始，先整理所有人都绕不开的问题，建立文档。
+    接着就是另起页面，进行插件拓展的推荐。

posts/1-1.md

@@ -0,0 +1,21 @@
+---
+title: 引入
+date: 2023-11-01
+tags:
+  - introduction
+  - beginning
+categories:
+  - vscode
+---
+
+这是一个引入。嗯对，**引入**。
+
+> 我们不是古希腊掌管VSCode的神，但我会尽力协助你上手VSCode。
+
+**Microsoft Visual Studio Code** ，简称  **VS Code** 或者 **Code** 。
+
+有什么疑问或者补充的点，请通过邮箱
+
+[email protected]
+
+联系我。

posts/1-2.md

@@ -0,0 +1,56 @@
+---
+title: 安装教程
+date: 2023-11-06
+tags:
+  - installation
+categories:
+  - vscode
+---
+
+
+## 下载VSCode安装文件
+
+官方网址：https://code.visualstudio.com/download#
+
+## 根据自己的操作系统来选择对应的VSCode版本。
+
+在Windows系统下，一般选择x64的安装包就行(除非你用的是32位系统，但现在理论上已经不存在了。)
+需要注意的是：如果你后来对你的电脑进行了一些**大动根基**的操作，如：
+在Windows环境下，因为本地账户名是中文导致各种开发工作受阻而**重装系统**并由此建立了个英文名的本地**管理员账户，**并使用该**管理员账户**活动的话，请注意你下载的安装包类型。
+
+在管理员账户下，应该是只能用System Installer安装的（用User Installer安装会出现错误不让安装）。
+
+![1-2-1.png](../pictures/1-2/1-2-1.png)
+> 这是以前Code官网多系统的下载界面
+
+![1-2-2.png](../pictures/1-2/1-2-2.png)
+> 这是当下(图截于2023.12)最新的安装界面，因为后续在x86平台和Arm平台上的Windows（从11开始）仅支持64位系统，所以只提供了x64和Arm64的安装包。
+
+## 安装
+
+1.**在文件夹中打开刚下好的安装包，这里我使用的是64位的操作系统，注意对应自己电脑操作系统下载**
+
+![1-2-3.png](../pictures/1-2/1-2-3.png)
+
+2.**勾选“我同意此协议”，点击“下一步"**
+
+![1-2-4.png](../pictures/1-2/1-2-4.png)
+> 此示例是用的User Installer包，使用System Installer包同理。
+
+
+3.**选择安装位置，可根据自己习惯更改，由于我已经装了VSCode，安装包自动跳过这一过程，个人建议放在C盘之外，点击“下一步”**
+
+![1-2-5.png](../pictures/1-2/1-2-5.png)
+
+4.**这里可以根据自己需求勾选，值得注意的是，如果你勾选了“添加到PATH（重启后生效）”，那么重启之后系统会帮你自动配置好环境变量，当然你也可以选择自己配置**
+
+![1-2-6.png](../pictures/1-2/1-2-6.png)
+
+5.**点击“安装”，等待安装进度条拉满，点击“完成”**
+
+![1-2-7.png](../pictures/1-2/1-2-7.png)
+
+![1-2-8.png](../pictures/1-2/1-2-8.png)
+
+6.**恭喜你成功安装VSCode！**
+![1-2-11.png](../pictures/1-2/1-2-11.png)

posts/1-3.md

@@ -0,0 +1,108 @@
+---
+title: 初步了解Code长啥样，有什么
+date: 2023-11-12
+tags:
+  - layout
+categories:
+  - vscode
+---
+
+
+**事先准备**（习惯英文界面可忽略）
+
+打开vscode，在左侧的![扩展](../pictures/1-3/1-3-0.jpg) (扩展，``Ctrl+Shift+X``)搜Chinese中文包进行安装，之后重启vscode。
+
+![1-2-9.png](../pictures/1-2/1-2-9.png)
+
+![1-2-10.png](../pictures/1-2/1-2-10.png)
+
+## VSCode的学习网址
+
+Mac OS官方教程：https://code.visualstudio.com/docs/setup/mac
+
+个人推荐的使用教程：https://geek-docs.com/vscode/vscode-tutorials/what-is-vscode.html
+
+如何简单的找到官方教程？
+![1-3-1.jpg](../pictures/1-3/1-3-1.jpg)
+
+## 简单配置
+
+**更改颜色主题**  
+点击左下角管理，点击颜色主题
+![1-3-2.jpg](../pictures/1-3/1-3-2.jpg)
+
+根据自己的需求进行修改
+![1-3-3.jpg](../pictures/1-3/1-3-3.jpg)
+
+**更改字体设置**  
+点击管理中的设置选项
+![1-3-4.jpg](../pictures/1-3/1-3-4.jpg)
+
+“Font Size”控制字体大小，“Font Family”控制字体系列，这里根据个人喜好设置
+![1-3-5.jpg](../pictures/1-3/1-3-5.jpg)
+
+**自动保存**  
+点击管理中的设置
+![1-3-6.jpg](../pictures/1-3/1-3-6.jpg)
+
+**搜索自动保存**  
+将设置里的“Auto Save”配置修改为``afterDelay``，并设置时间，这里我设置的是1000毫秒
+![1-3-7.jpg](.././pictures/1-3/1-3-7.jpg)
+
+## 工作台介绍
+
+**面板栏**
+命令面板是VSCode快捷键的主要交互界面，你可以通过``F1``或者``Ctrl+Shift+P``打开。你可以在命令面板中快速搜索命令并且执行。如果你的 VSCode 是简体中文版，那么你可以在命令面板里使用中文或者英文来搜索命令。VSCode 的绝大多数命令都可以在命令面板里搜到，所以熟练使用命令面板，你就可以摆脱鼠标，完全通过键盘操作来完成全部编码工作。
+![1-3-8.jpg](../pictures/1-3/1-3-8.jpg)
+
+**活动栏**
+最左侧的一列，包括资源管理器、查找、源代码管理、debug调式（一般用于后端的调理）、插件安装![1-3-9.jpg](./pictures/1-3/1-3-9.jpg)
+
+**状态栏**  
+显示代码状态和调试状态；是否处于调试状态，代码是否在编辑状态等
+![1-3-10.jpg](![../pictures/1-3/1-3-10.jpg](image.png))
+
+**编辑栏**
+编写代码的区域
+![1-3-11.jpg](../pictures/1-3/1-3-11.jpg)
+
+**侧边栏**
+新建项目文件和文件夹，一般用于整体浏览项目布局![1-3-12.jpg](../pictures/1-3/1-3-12.jpg)
+
+## 打开项目文件
+点击左上角文件，打开文件夹
+![1-3-13.jpg](../pictures/1-3/1-3-13.jpg)
+
+选择你需要打开的项目目录即可
+![1-3-14.jpg](../pictures/1-3/1-3-14.jpg)
+
+当然你也可以选择新建文件或者文件夹
+![1-3-15.jpg](../pictures/1-3/1-3-15.jpg)
+
+之后你就可以对项目文件进行编辑了~
+
+## 常用命令
+
+常用快捷键:
+
+1. ``Alt+Shift+F`` 代码格式化
+2. ``Alt+↑`` 向上移动一行代码
+3. ``Alt+↓`` 向下移动一行代码
+4. ``Alt+Shift+↑`` 向上复制一行
+5. ``Alt+Shift+↓`` 向下复制一行
+6. ``Ctrl+F`` 查询
+7. ``Ctrl+H`` 查找并替换
+8. ``Ctrl+/`` 单行注释
+9. ``Shift+Alt+A`` 多行注释
+10. ``Ctrl+Shift+K`` (``Ctrl+X``) 快速删除一行
+
+## 快速编写代码小技巧
+
+以HTML为例：
+
+1. ! ``Enter``，快速生成HTML基本骨架
+2. div*2 ``Enter`` 生成两个并列的div
+3. div.c1 ``Enter``
+4. div#d1 ``Enter``
+5. div{$}*数字 多个平级标签的排序
+6. ">"表示包含关系——ul >li*4 快速生成包含4个li的列表