site ver1.0.

.eleventy.js

@@ -8,9 +8,9 @@ module.exports = (config) => {
 
     config.addPassthroughCopy('css');
     config.addPassthroughCopy('static');
-    config.addPassthroughCopy("posts/pictures");
-    config.addPassthroughCopy("extensions/pictures");
-  
+    config.addPassthroughCopy({"pictures/posts": "posts/pictures/posts"});
+    config.addPassthroughCopy({"pictures/extensions": "extensions/pictures/extensions"});
+
     config.setDataDeepMerge(true);
 
     config.addFilter('htmlDateString', (dateObj) => {

README.md

@@ -1,66 +1,5 @@
-# Eleventy + Stylus Blog theme
+VS Code网，针对大学生初识VS Code的一个小网站。
 
-[![Netlify Status](https://api.netlify.com/api/v1/badges/a180e099-11d2-49d4-9697-910d56980343/deploy-status)](https://app.netlify.com/sites/eleventy-stylus-blog-theme/deploys)
-[![Build Status](https://travis-ci.com/ar363/eleventy-stylus-blog-theme.svg?branch=main)](https://travis-ci.com/ar363/eleventy-stylus-blog-theme)
-[![Vercel Status](https://vercel-badge-ar363.vercel.app/?app=eleventy-stylus-blog-theme)](https://github.com/ar363/eleventy-stylus-blog-theme/deployments/activity_log?environment=Production)
+功能尚不齐全，仍待开发。
 
-A theme repository that contains a blog built with [Eleventy](https://github.com/11ty/eleventy) and [Stylus](https://stylus-lang.com/)
-
-## Features
- - 100% Lighthouse scores
- - Toggleable dark theme (PS. theme preference is also stored in `localStorage`)
- - Tags as taxonomy
- - Stylus CSS preprocessor
- - Integrated with Eleventy's official [navigation plugin](https://www.11ty.dev/docs/plugins/navigation/)
- - Also generates Atom RSS Feed with Eleventy's official [RSS plugin](https://www.11ty.dev/docs/plugins/rss/)
- - Sitemap generation
- - Non-post pages support (eg. About page, Contact page)
- - Modular type scale implemented in with Stylus
-
-## Demos
-
- - Vercel: https://eleventy-stylus-blog-theme.vercel.app/
- - Netlify: https://eleventy-stylus-blog-theme.netlify.app/
- - Github Pages: https://ar363.github.io/eleventy-stylus-blog-theme/
-
-## Screenshots
-
-Light theme
-![light theme website homepage screenshot](screenshot.png?raw=true)
-
-Dark theme
-![dark theme website homepage screenshot](screenshot-dark.png?raw=true)
-
-## Deploy this template to your own site
-
-Get your site up and running with a few clicks
-
- - [Deploy on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/ar363/eleventy-stylus-blog-theme)
- - [Deploy on Vercel](https://vercel.com/import/project?template=ar363%2Feleventy-stylus-blog-theme)
-
-## Prerequisites for local development
-[Node.js LTS](https://nodejs.org/en/)
-
-## Getting started locally
-
-1. Clone this repo
-```
-git clone https://github.com/ar363/eleventy-stylus-blog-theme my-blog
-```
-
-2. Navigate to the blog directory
-```
-cd my-blog
-```
-
-3. Install dependencies
-```
-npm i
-```
-4. Edit `_data/site.js` according to your site preferences
-
-5. Also optionally modify `stylus/abstracts/variables.styl` according to your preference
-
-To watch for changes in Eleventy and Stylus, use `npm run dev`
-
-To build without watching for changes, use `npm run build`
+使用了[Eleventy + Stylus Blog theme](https://github.com/ar363/eleventy-stylus-blog-theme)。

_includes/components/extensionslist.njk

@@ -1,18 +1,19 @@
 <div class="card-grid">
-  {% for extension in extensions %}
-    <div class="card">
-      <h3 class="card__title">
-        <a href="{{ extension.url | url }}">{{ extension.data.title }}</a>
-      </h3>
-      <p class="card__date">{{ extension.date | readableDate }}</p>
-      <p class="card__description">{{ extension.data.description }}</p>
-      <p class="card__subtitle">分类:</p>
-      <div class="card__categories">
-        {% for category in extension.data.categories %}
-          <a href="{{ '/categories/' | url }}{{ category }}">{{ category }}</a>
-          {%- if not loop.last %}, {% endif %}
-        {% endfor %}
-      </div>
-    </div>
-  {% endfor %}
+    {% for extension in extensions %}
+        <div class="card">
+        <h3 class="card__title">
+            <img src="/extensions/{{ extension.data.icon }}" alt="{{ extension.data.title }} icon" class="card__icon">
+            <a href="{{ extension.url | url }}">{{ extension.data.title }}</a>
+        </h3>
+        <p class="card__description">{{ extension.data.description }}</p>
+        <p class="card__subtitle">分类:</p>
+        <div class="card__categories">
+            {% for category in extension.data.categories %}
+                {% if category != "extensions" %}
+                    <a href="{{ '/categories/' | url }}{{ category }}">{{ category }}</a>
+                {% endif %}
+            {% endfor %}
+        </div>
+        </div>
+    {% endfor %}
 </div>

allextensions.njk

@@ -0,0 +1,37 @@
+---
+layout: layouts/base.njk
+permalink: /extensions/
+title: 所有推荐扩展
+eleventyNavigation:
+  key: 扩展
+  weight: 1
+
+---
+
+<div class="container">
+    <h1>所有推荐扩展</h1>
+    <div class="card-grid">
+        {% for post in collections.all %}
+            {% if post.data.icon %}
+                <div class="card">
+                    <img src="/extensions/{{ post.data.icon }}" alt="{{ post.data.title }} icon" class="card__icon">
+                    <h2 class="card__title">
+                        <a href="{{ post.url }}">{{ post.data.title }}</a>
+                    </h2>
+                    <div class="card__categories">
+                    {% for category in post.data.categories %}
+                        {% if category != "extensions" %}
+                            {% if loop.index <= 4 %}
+                                <a href="/categorieslist/{{ category }}" class="card__category">{{ category }}</a>
+                            {% endif %}
+                        {% endif %}
+                    {% endfor %}
+                    {% if post.data.categories.length > 4 %}
+                        <a href="/categorieslist/" class="card__category">更多...</a>
+                    {% endif %}
+                    </div>
+                </div>
+            {% endif %}
+        {% endfor %}
+    </div>
+</div>

categories.njk

@@ -12,19 +12,19 @@ pagination:
     - categoryList
   addAllPagesToCollections: true
 eleventyComputed:
-  title: Categorized “{{ category.categoryName }}”
-permalink: /categories/{{ category.categoryName }}/
+  title: “{{ category.categoryName }}”扩展
+permalink: /categorieslist/{{ category.categoryName }}/
 ---
 
 {% block content %}
 
 <div class="container">
-  <h1>归属于“{{ category.categoryName }}” 分类</h1>
+  <h1>“{{ category.categoryName }}” 分类</h1>
 
   {% set extensions = category.posts %}
   {% include 'components/extensionslist.njk' %}
 
-  <p>查看<a href="{{ '/extensions/' | url }}">所有的分类</a>.</p>
+  <p>查看<a href="{{ '/categorieslist/' | url }}">所有的分类</a>。</p>
 </div>
 
 {% endblock %}

categorieslist.njk

@@ -1,10 +1,7 @@
 ---
 title: 扩展
 layout: layouts/base.njk
-permalink: /extensions/
-eleventyNavigation:
-  key: 扩展
-  weight: 1
+permalink: /categorieslist/
 ---
 
 <div class="container">
@@ -13,7 +10,7 @@ eleventyNavigation:
     {% for category in collections.categoryList %}
       <div class="card">
         <h2 class="card__title">
-          <a href="{{ '/categories/' | url }}{{ category.categoryName }}">{{ category.categoryName }}</a>
+          <a href="{{ '/categorieslist/' | url }}{{ category.categoryName }}">{{ category.categoryName }}</a>
           <span class="card__count">({{ category.categoryCount }} 个扩展)</span>
         </h2>
         <ul>

extensions/AutoRenameTag.md

@@ -1,10 +1,15 @@
 ---
     title: Auto Rename Tag
-    categories: ["HTML","标签","自动修改"]
-    date: 2024-03-20
-    icon: "/pictures/icons/AutoRenameTag.png"
+    categories: ["前端","标签","自动修改"]
+    icon: "/pictures/extensions/icons/AutoRenameTag.png"
 ---
 
-该扩展修改HTML标签时，自动修改匹配的标签。
+顾名思义，本扩展会自动重命名源码中的标签。
 
-![修改](../pictures/operations/autoRenameTag_change.gif)
+修改*HTML/XML标签*时，它会自动修改匹配的标签，使原本匹配的两个标签始终保持匹配。
+
+这在进行包含复杂文本的代码修改时很有用，它能节省你寻找匹配标签并修改的时间——毕竟，有了它，你只要修改成对标签中的任何一个就行了。
+
+![修改](../pictures/extensions/others/AutoRenameTag_change.gif)
+
+它的[官方介绍页面](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)。

extensions/BetterComments.md

@@ -0,0 +1,11 @@
+---
+    title: Better Comments
+    categories: ["注释"]
+    icon: "/pictures/extensions/icons/BetterComments.png"
+---
+
+Better Comments 允许您根据不同类型的注释突出显示您的注释，从而将其提升到一个新的水平,支持的类型是警报、查询、TODO 和突出显示。它也可以通过您可能需要的其他内容的注释样式进行扩展。  
+![1](../pictures/extensions/others/BetterComments_1.jpg)
+![2](../pictures/extensions/others/BetterComments_2.webp)
+
+更多介绍详见它的[官方介绍界面](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)。

extensions/BracketPairColorizationToggler.md

@@ -0,0 +1,18 @@
+---
+    title: Bracket Pair Colorization Toggler
+    categories: ["匹配","大括号"]
+    icon: "/pictures/extensions/icons/BracketPairColorizationToggler.png"
+---
+
+当你处理嵌套和逻辑条件时，情况会变得很糟。大括号对着色器通过给每个大括号对附加不同的颜色，解决了代码中大括号对猎取的问题。
+
+***强烈推荐安装使用，因为实在是太好用了。***
+
+对于制作出这个扩展的理由，作者是这这么讲的：“这是一个有趣的小项目，每个人都会有需要它的那些时候的。”
+> A fun little project. Everyone needs one of those once in a while 🙃
+
+![1](../pictures/extensions/others/BracketPairColorizationToggler_1.jpg)
+![2](../pictures/extensions/others/BracketPairColorizationToggler_2.webp)
+这意味着，如果你有多个大括号，为了我们的方便和代码效率，它很容易被配上颜色。
+
+它的[官方介绍界面](https://marketplace.visualstudio.com/items?itemName=dzhavat.bracket-pair-toggler)。

extensions/CSSPeek.md

@@ -0,0 +1,12 @@
+---
+    title: CSS Peek
+    categories: ["前端","定位","CSS"]
+    icon: "/pictures/extensions/icons/CSSPeek.png"
+---
+
+该插件可以利用css的特性，从HTML文件中以cssID或类字符串为起点定位到其正确的定义位置上。  
+![1](../pictures/extensions/others/CSSPeek_1.jpg)  
+
+![2](../pictures/extensions/others/CSSPeek_2.webp)  
+
+更多功能详见它的[官方介绍页面](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)。

extensions/CodeRunner.md

@@ -0,0 +1,11 @@
+---
+    title: Code Runner
+    categories: ["代码调试","代码块"]
+    icon: "/pictures/extensions/icons/CodeRunner.png"
+---
+
+有时，你不需要运行你的整个项目，只需要其中的一小段。这就是Code Runner的用武之地。这个VS Code插件支持多种语言，可以通过预定义的键盘快捷键或在鼠标的帮助下运行高亮的代码。
+![1](../pictures/extensions/others/CodeRunner_1.jpg)
+![2](../pictures/extensions/others/CodeRunner_2.webp)
+
+更多介绍详见它的[官方介绍界面](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)。

extensions/Codelf.md

@@ -0,0 +1,16 @@
+---
+    title: Codelf
+    categories: ["变量","命名"]
+    icon: "/pictures/extensions/icons/Codelf.png"
+---
+
+本扩展一个变量命名建议器，感谢某位王姓已毕业学长的推荐。
+
+虽然自己在编写程序、建立代码块的时候各人有各人的命名习惯，但在此基础上，运用什么样的翻译和字母组合来表达出你想要体现的变量或函数是个学问。它则可以在这个方面上帮到你。
+
+形式是一个网页。故本扩展运行时依赖互联网连接。
+
+用法：选中相应文本->鼠标右击->Codelf
+![1-6-21](../pictures/extensions/others/Codelf.png)
+
+更多介绍详见它的[官方介绍界面](https://marketplace.visualstudio.com/items?itemName=unbug.codelf)。

extensions/ESLint.md

@@ -0,0 +1,11 @@
+---
+    title: ESLint
+    categories: ["前端","JavaScript","勘误"]
+    icon: "/pictures/extensions/icons/ESLint.png"
+---
+
+ESLint是一个JavaScript代码inter，可以发现并修复你的JavaScript代码中的问题。它可以很好地检测出你的代码中可能存在的问题模式，并帮助你修复它们，以避免不一致和避免bug。
+![1-6-16](../pictures/extensions/others/ESLint_1.jpg)
+![1-6-17](../pictures/extensions/others/ESLint_2.webp)
+
+更多介绍详见它的[官方介绍界面](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)。

extensions/HTML_CSS_Support.md

@@ -0,0 +1,11 @@
+---
+    title: HTML CSS Support
+    categories: ["前端","HTML","CSS"]
+    icon: "/pictures/extensions/icons/HTML_CSS_Support.png"
+---
+
+HTML CSS Support 是在VS Code中对HTML和CSS的终极智能感应。其功能包括id和class属性的完成，链接和嵌入样式表，继承和CSS选择器的验证。
+![1-6-18](../pictures/extensions/others/HTML_CSS_Support_1.jpg)
+![1-6-19](../pictures/extensions/others/HTML_CSS_Support_2.webp)
+
+本网站不对其进行详细讲解。更多介绍详见它的[官方介绍界面](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)。

extensions/ImagePreview.md

@@ -0,0 +1,15 @@
+---
+    title: Image Preview
+    categories: ["图片","预览","调试"]
+    icon: "/pictures/extensions/icons/ImagePreview.png"
+---
+
+预览图片,图片是否正确引入的显示工具，鼠标悬浮在引用图片的链接上即可看见是否正确找到路径下的图片文件。  
+![1](../pictures/extensions/others/ImagePreview_1.jpg)
+
+同样地,在有引用图片链接的行的行号边上也会以缩略图的形式显示你所引用的图片。如果存在这样的目标，它将正常显示图片；否则不会有任何显示，也不会影响项目编写。  
+![2](../pictures/extensions/others/ImagePreview_2.jpg)
+
+这个扩展在你检查你的图片引用代码时非常管用。
+
+更多介绍详见它的[官方介绍界面](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)。

extensions/LiveServer.md

@@ -0,0 +1,16 @@
+---
+    title: Live Server
+    categories: ["前端","服务器","本地搭建"]
+    icon: "/pictures/extensions/icons/LiveServer.png"
+---
+
+启动具有静态和动态页面的实时重新加载功能的开发本地服务器，前端开发利好。
+![1](../pictures/extensions/others/LiveServer_1.jpg)
+
+扩展安装完成后打开一个html文档，右键单击空白处即可找到 ``Open with Live Server`` ，或在窗口右下角点击 <img src="../pictures/extensions/others/LiveServer_2.jpg" alt="扩展" style="width: 90px; height: auto;"> 启动。  
+![3](../pictures/extensions/others/LiveServer_3.jpg)
+
+将VS Code与浏览器像下图这样并排，便可实时显示HTML内容。当VS Code保存 ( `Ctrl+S` ) 一次右侧页面便会更新——**没错，它是实时、热更新的。**
+![4](../pictures/extensions/others/LiveServer_4.jpg)
+
+它的更多介绍详见它的[官方介绍页面](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)。

extensions/MithrilEmmet.md

@@ -0,0 +1,13 @@
+---
+    title: Mithril Emmet
+    categories: ["HyperScript","mithril.js"]
+    icon: "/pictures/extensions/icons/MithrilEmmet.png"
+---
+
+**注意**：一般情况下Code是自带Emmet相关功能的。如果只是一般情况下其实不需要安装该扩展。作者也给出了建议：如果你*不是在使用mithril.js或者HyperScript*，请卸载本扩展。
+
+一般情况下的Emmet教程：[这个网址](https://www.cnblogs.com/leeke98/p/11208878.html)。它常用得多。
+
+但是有使用本扩展的例外：*当你用到HyperScript或者mithril.js的时候*。
+
+它的[官方介绍网址](https://marketplace.visualstudio.com/items?itemName=FallenMax.mithril-emmet)。

extensions/OpenInBrowser.md

@@ -0,0 +1,23 @@
+---
+    title: open in browser
+    categories: ["前端","快捷启动"]
+    icon: "/pictures/extensions/icons/OpenInBrowser.png"
+---
+
+它原本的功能是方便快捷地使用你的***默认设置浏览器***打开你的html文件，以进行快速预览和调试。
+
+![1](../pictures/extensions/others/OpenInBrowser.jpg)  
+当然它的***默认设置浏览器***是可以在它的设置里更改的。
+
+另外，它已经不再局限于打开html文件了（源自官方扩展介绍页面）。用官方原话来讲，你可以借助它在Code的工作区内直接用默认软件打开***任何***能够被执行或修改的文件。
+
+我只能说，这真的挺方便的，不用我们另外在资源管理器再打开一次工作路径，能节省步骤。
+
+它的一些快捷键：
+
+|按键|命令|
+|:-:|:-:|
+|`Alt`+`B`|使用默认浏览器打开|
+|`Shift`+`Alt`+`B`|使用指定浏览器打开|
+
+它的[官方介绍页面](https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser)。