diff --git a/settings.yaml b/settings.yaml
index 2e1bee6..3451921 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -4,6 +4,14 @@ metadata:
   name: theme-default-setting
 spec:
   forms:
+    - group: sidebar
+      label: 侧边栏
+      formSchema:
+        - $formkit: textarea
+          name: widgets
+          label: 小部件
+          value: "profile,popular-posts,latest-comments,categories,tags"
+          help: "目前提供的小部件有：profile（站点资料）, popular-posts（热门文章）, latest-comments（最新评论）, categories（文章分类）, tags（文章标签）。你可以随意组合或排序，以逗号隔开。"
     - group: content
       label: 内容设置
       formSchema:
diff --git a/templates/modules/sidebar.html b/templates/modules/sidebar.html
index fe0af7d..bad013d 100644
--- a/templates/modules/sidebar.html
+++ b/templates/modules/sidebar.html
@@ -1,273 +1,9 @@
 <aside class="col-span-1 hidden h-full flex-col gap-6 sm:flex">
-  <div
-    class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
+  <th:block
+    th:with="widgets = ${#strings.listSplit(theme.config.sidebar.widgets,',')} "
   >
-    <div class="flex flex-col items-center justify-center gap-4">
-      <div class="relative h-24 w-24">
-        <img src="https://halo.run/logo" class="h-full w-full rounded-full" />
-        <span
-          class="absolute right-0 bottom-0 flex h-7 w-7 items-center justify-center rounded-full border bg-white p-0.5"
-        >
-          🌚
-        </span>
-      </div>
-      <div><h1 class="text-2xl font-medium" th:text="${site.title}"></h1></div>
-      <div>
-        <p
-          class="text-center text-sm text-gray-700"
-          th:text="${site.subtitle}"
-        ></p>
-      </div>
-      <div class="grid grid-cols-4 gap-5">
-        <div class="inline-flex flex-col items-center">
-          <span class="text-xl font-medium tabular-nums text-gray-900">97</span
-          ><span class="text-xs font-light text-gray-600">文章数</span>
-        </div>
-        <div class="inline-flex flex-col items-center">
-          <span class="text-xl font-medium tabular-nums text-gray-900">18</span
-          ><span class="text-xs font-light text-gray-600">分类数</span>
-        </div>
-        <div class="inline-flex flex-col items-center">
-          <span class="text-xl font-medium tabular-nums text-gray-900">117</span
-          ><span class="text-xs font-light text-gray-600">评论数</span>
-        </div>
-        <div class="inline-flex flex-col items-center">
-          <span class="text-xl font-medium tabular-nums text-gray-900"
-            >92392</span
-          ><span class="text-xs font-light text-gray-600">访问量</span>
-        </div>
-      </div>
-      <div class="grid grid-cols-6 items-center gap-5">
-        <div
-          class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
-        >
-          <span
-            data-icon="simple-icons:wechat"
-            class="iconify text-[#07C160]"
-          ></span>
-        </div>
-        <div
-          class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
-        >
-          <span
-            data-icon="simple-icons:bilibili"
-            class="iconify text-[#00A1D6]"
-          ></span>
-        </div>
-        <div
-          class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
-        >
-          <span
-            data-icon="simple-icons:github"
-            class="iconify text-[#181717]"
-          ></span>
-        </div>
-        <div
-          class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
-        >
-          <span
-            data-icon="simple-icons:twitter"
-            class="iconify text-[#1DA1F2]"
-          ></span>
-        </div>
-        <div
-          class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
-        >
-          <span
-            data-icon="simple-icons:telegram"
-            class="iconify text-[#26A5E4]"
-          ></span>
-        </div>
-        <div
-          class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
-        >
-          <span
-            data-icon="simple-icons:feedly"
-            class="iconify text-[#2BB24C]"
-          ></span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
-  >
-    <h2 class="inline-flex items-center gap-2 text-base">
-      <span
-        data-icon="tabler:stairs-up"
-        class="iconify text-lg text-red-600"
-      ></span>
-      热门文章
-    </h2>
-    <div>
-      <ul
-        role="list"
-        class="divide-y divide-gray-100"
-        th:with="posts = ${postFinder.list(1,10)}"
-      >
-        <li class="py-3" th:each="post : ${posts}">
-          <div class="flex items-center justify-between">
-            <div class="flex flex-col gap-1">
-              <h3
-                class="text-sm font-medium hover:text-gray-500 hover:underline"
-              >
-                <a
-                  th:text="${post.spec.title}"
-                  th:href="${post.status.permalink}"
-                ></a>
-              </h3>
-              <p
-                class="text-xs tabular-nums text-gray-500"
-                th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')+' 发布'}"
-              ></p>
-            </div>
-            <div class="inline-flex items-center gap-1 text-xs text-gray-600">
-              <span data-icon="tabler:eye" class="iconify"></span>
-              <span th:text="${post.stats.visit}" class="tabular-nums"> </span>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-  <div
-    class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
-  >
-    <h2 class="inline-flex items-center gap-2 text-base">
-      <span data-icon="tabler:message-circle" class="iconify text-lg"></span>
-      最新评论
-    </h2>
-    <div>
-      <ul role="list" class="divide-y divide-gray-100">
-        <li class="py-3">
-          <div class="flex space-x-3">
-            <img
-              class="h-6 w-6 rounded-full"
-              src="https://loremflickr.com/640/480/cats"
-              alt=""
-            />
-            <div class="flex-1 space-y-1">
-              <div class="flex items-center justify-between">
-                <h3 class="text-sm font-medium">Phyllis McKenzie</h3>
-                <p class="text-sm text-gray-500">1h</p>
-              </div>
-              <p class="text-sm text-gray-500">
-                Fugit quae nam dolores impedit quia fuga pariatur dignissimos
-                recusandae.
-              </p>
-            </div>
-          </div>
-        </li>
-        <li class="py-3">
-          <div class="flex space-x-3">
-            <img
-              class="h-6 w-6 rounded-full"
-              src="https://loremflickr.com/640/480/cats"
-              alt=""
-            />
-            <div class="flex-1 space-y-1">
-              <div class="flex items-center justify-between">
-                <h3 class="text-sm font-medium">Willard Labadie I</h3>
-                <p class="text-sm text-gray-500">1h</p>
-              </div>
-              <p class="text-sm text-gray-500">
-                Officiis quis quos repudiandae quam delectus impedit quidem amet
-                ut.
-              </p>
-            </div>
-          </div>
-        </li>
-        <li class="py-3">
-          <div class="flex space-x-3">
-            <img
-              class="h-6 w-6 rounded-full"
-              src="https://loremflickr.com/640/480/cats"
-              alt=""
-            />
-            <div class="flex-1 space-y-1">
-              <div class="flex items-center justify-between">
-                <h3 class="text-sm font-medium">Miss Leonard Sporer</h3>
-                <p class="text-sm text-gray-500">1h</p>
-              </div>
-              <p class="text-sm text-gray-500">Nesciunt dolores et debitis.</p>
-            </div>
-          </div>
-        </li>
-        <li class="py-3">
-          <div class="flex space-x-3">
-            <img
-              class="h-6 w-6 rounded-full"
-              src="https://loremflickr.com/640/480/cats"
-              alt=""
-            />
-            <div class="flex-1 space-y-1">
-              <div class="flex items-center justify-between">
-                <h3 class="text-sm font-medium">Tyrone Fisher</h3>
-                <p class="text-sm text-gray-500">1h</p>
-              </div>
-              <p class="text-sm text-gray-500">
-                Et nesciunt dolorem eum ut corporis.
-              </p>
-            </div>
-          </div>
-        </li>
-        <li class="py-3">
-          <div class="flex space-x-3">
-            <img
-              class="h-6 w-6 rounded-full"
-              src="https://loremflickr.com/640/480/cats"
-              alt=""
-            />
-            <div class="flex-1 space-y-1">
-              <div class="flex items-center justify-between">
-                <h3 class="text-sm font-medium">Angie Braun V</h3>
-                <p class="text-sm text-gray-500">1h</p>
-              </div>
-              <p class="text-sm text-gray-500">
-                Autem labore ipsam earum reiciendis eum omnis.
-              </p>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-  <div
-    class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
-  >
-    <h2 class="inline-flex items-center gap-2 text-base">
-      <span data-icon="tabler:category" class="iconify text-lg"></span>
-      分类目录
-    </h2>
-    <div class="mt-2" th:with="categories = ${categoryFinder.listAsTree()}">
-      <ul class="space-y-1">
-        <li
-          th:replace="modules/category-tree :: single(categories=${categories})"
-        />
-      </ul>
-    </div>
-  </div>
-  <div
-    class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
-  >
-    <h2 class="inline-flex items-center gap-2 text-base">
-      <span data-icon="tabler:tags" class="iconify text-lg"></span>
-      标签
-    </h2>
-    <div
-      class="mt-2 flex flex-wrap gap-2"
-      th:with="tags = ${tagFinder.listAll()}"
-    >
-      <a
-        th:each="tag : ${tags}"
-        th:href="${tag.status.permalink}"
-        th:title="${tag.spec.displayName}"
-        class="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-900 hover:bg-gray-200"
-        href="#"
-      >
-        <th:block th:text="'#'+${tag.spec.displayName}" />
-        <sup th:text="${tag.status.postCount}"></sup>
-      </a>
-    </div>
-  </div>
+    <th:block th:each="widget : ${widgets}">
+      <th:block th:replace="'modules/widgets/'+${widget}" />
+    </th:block>
+  </th:block>
 </aside>
diff --git a/templates/modules/widgets/categories.html b/templates/modules/widgets/categories.html
new file mode 100644
index 0000000..02596b7
--- /dev/null
+++ b/templates/modules/widgets/categories.html
@@ -0,0 +1,15 @@
+<div
+  class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
+>
+  <h2 class="inline-flex items-center gap-2 text-base">
+    <span data-icon="tabler:category" class="iconify text-lg"></span>
+    分类目录
+  </h2>
+  <div class="mt-2" th:with="categories = ${categoryFinder.listAsTree()}">
+    <ul class="space-y-1">
+      <li
+        th:replace="modules/category-tree :: single(categories=${categories})"
+      />
+    </ul>
+  </div>
+</div>
diff --git a/templates/modules/widgets/latest-comments.html b/templates/modules/widgets/latest-comments.html
new file mode 100644
index 0000000..64b9735
--- /dev/null
+++ b/templates/modules/widgets/latest-comments.html
@@ -0,0 +1,102 @@
+<div
+  class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
+>
+  <h2 class="inline-flex items-center gap-2 text-base">
+    <span data-icon="tabler:message-circle" class="iconify text-lg"></span>
+    最新评论
+  </h2>
+  <div>
+    <ul role="list" class="divide-y divide-gray-100">
+      <li class="py-3">
+        <div class="flex space-x-3">
+          <img
+            class="h-6 w-6 rounded-full"
+            src="https://ryanc.cc/avatar"
+            alt=""
+          />
+          <div class="flex-1 space-y-1">
+            <div class="flex items-center justify-between">
+              <h3 class="text-sm font-medium">Phyllis McKenzie</h3>
+              <p class="text-sm text-gray-500">1h</p>
+            </div>
+            <p class="text-sm text-gray-500">
+              Fugit quae nam dolores impedit quia fuga pariatur dignissimos
+              recusandae.
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="py-3">
+        <div class="flex space-x-3">
+          <img
+            class="h-6 w-6 rounded-full"
+            src="https://ryanc.cc/avatar"
+            alt=""
+          />
+          <div class="flex-1 space-y-1">
+            <div class="flex items-center justify-between">
+              <h3 class="text-sm font-medium">Willard Labadie I</h3>
+              <p class="text-sm text-gray-500">1h</p>
+            </div>
+            <p class="text-sm text-gray-500">
+              Officiis quis quos repudiandae quam delectus impedit quidem amet
+              ut.
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="py-3">
+        <div class="flex space-x-3">
+          <img
+            class="h-6 w-6 rounded-full"
+            src="https://ryanc.cc/avatar"
+            alt=""
+          />
+          <div class="flex-1 space-y-1">
+            <div class="flex items-center justify-between">
+              <h3 class="text-sm font-medium">Miss Leonard Sporer</h3>
+              <p class="text-sm text-gray-500">1h</p>
+            </div>
+            <p class="text-sm text-gray-500">Nesciunt dolores et debitis.</p>
+          </div>
+        </div>
+      </li>
+      <li class="py-3">
+        <div class="flex space-x-3">
+          <img
+            class="h-6 w-6 rounded-full"
+            src="https://ryanc.cc/avatar"
+            alt=""
+          />
+          <div class="flex-1 space-y-1">
+            <div class="flex items-center justify-between">
+              <h3 class="text-sm font-medium">Tyrone Fisher</h3>
+              <p class="text-sm text-gray-500">1h</p>
+            </div>
+            <p class="text-sm text-gray-500">
+              Et nesciunt dolorem eum ut corporis.
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="py-3">
+        <div class="flex space-x-3">
+          <img
+            class="h-6 w-6 rounded-full"
+            src="https://ryanc.cc/avatar"
+            alt=""
+          />
+          <div class="flex-1 space-y-1">
+            <div class="flex items-center justify-between">
+              <h3 class="text-sm font-medium">Angie Braun V</h3>
+              <p class="text-sm text-gray-500">1h</p>
+            </div>
+            <p class="text-sm text-gray-500">
+              Autem labore ipsam earum reiciendis eum omnis.
+            </p>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
diff --git a/templates/modules/widgets/popular-posts.html b/templates/modules/widgets/popular-posts.html
new file mode 100644
index 0000000..28bb8f9
--- /dev/null
+++ b/templates/modules/widgets/popular-posts.html
@@ -0,0 +1,39 @@
+<div
+  class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
+>
+  <h2 class="inline-flex items-center gap-2 text-base">
+    <span
+      data-icon="tabler:stairs-up"
+      class="iconify text-lg text-red-600"
+    ></span>
+    热门文章
+  </h2>
+  <div>
+    <ul
+      role="list"
+      class="divide-y divide-gray-100"
+      th:with="posts = ${postFinder.list(1,10)}"
+    >
+      <li class="py-3" th:each="post : ${posts}">
+        <div class="flex items-center justify-between">
+          <div class="flex flex-col gap-1">
+            <h3 class="text-sm font-medium hover:text-gray-500 hover:underline">
+              <a
+                th:text="${post.spec.title}"
+                th:href="${post.status.permalink}"
+              ></a>
+            </h3>
+            <p
+              class="text-xs tabular-nums text-gray-500"
+              th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')+' 发布'}"
+            ></p>
+          </div>
+          <div class="inline-flex items-center gap-1 text-xs text-gray-600">
+            <span data-icon="tabler:eye" class="iconify"></span>
+            <span th:text="${post.stats.visit}" class="tabular-nums"> </span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
diff --git a/templates/modules/widgets/profile.html b/templates/modules/widgets/profile.html
new file mode 100644
index 0000000..af3e24b
--- /dev/null
+++ b/templates/modules/widgets/profile.html
@@ -0,0 +1,89 @@
+<div
+  class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
+>
+  <div class="flex flex-col items-center justify-center gap-4">
+    <div class="relative h-24 w-24">
+      <img src="https://halo.run/logo" class="h-full w-full rounded-full" />
+      <span
+        class="absolute right-0 bottom-0 flex h-7 w-7 items-center justify-center rounded-full border bg-white p-0.5"
+      >
+        🌚
+      </span>
+    </div>
+    <div><h1 class="text-2xl font-medium" th:text="${site.title}"></h1></div>
+    <div>
+      <p
+        class="text-center text-sm text-gray-700"
+        th:text="${site.subtitle}"
+      ></p>
+    </div>
+    <div class="grid grid-cols-4 gap-5">
+      <div class="inline-flex flex-col items-center">
+        <span class="text-xl font-medium tabular-nums text-gray-900">97</span
+        ><span class="text-xs font-light text-gray-600">文章数</span>
+      </div>
+      <div class="inline-flex flex-col items-center">
+        <span class="text-xl font-medium tabular-nums text-gray-900">18</span
+        ><span class="text-xs font-light text-gray-600">分类数</span>
+      </div>
+      <div class="inline-flex flex-col items-center">
+        <span class="text-xl font-medium tabular-nums text-gray-900">117</span
+        ><span class="text-xs font-light text-gray-600">评论数</span>
+      </div>
+      <div class="inline-flex flex-col items-center">
+        <span class="text-xl font-medium tabular-nums text-gray-900">92392</span
+        ><span class="text-xs font-light text-gray-600">访问量</span>
+      </div>
+    </div>
+    <div class="grid grid-cols-6 items-center gap-5">
+      <div
+        class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
+      >
+        <span
+          data-icon="simple-icons:wechat"
+          class="iconify text-[#07C160]"
+        ></span>
+      </div>
+      <div
+        class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
+      >
+        <span
+          data-icon="simple-icons:bilibili"
+          class="iconify text-[#00A1D6]"
+        ></span>
+      </div>
+      <div
+        class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
+      >
+        <span
+          data-icon="simple-icons:github"
+          class="iconify text-[#181717]"
+        ></span>
+      </div>
+      <div
+        class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
+      >
+        <span
+          data-icon="simple-icons:twitter"
+          class="iconify text-[#1DA1F2]"
+        ></span>
+      </div>
+      <div
+        class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
+      >
+        <span
+          data-icon="simple-icons:telegram"
+          class="iconify text-[#26A5E4]"
+        ></span>
+      </div>
+      <div
+        class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
+      >
+        <span
+          data-icon="simple-icons:feedly"
+          class="iconify text-[#2BB24C]"
+        ></span>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/templates/modules/widgets/tags.html b/templates/modules/widgets/tags.html
new file mode 100644
index 0000000..deff61d
--- /dev/null
+++ b/templates/modules/widgets/tags.html
@@ -0,0 +1,23 @@
+<div
+  class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
+>
+  <h2 class="inline-flex items-center gap-2 text-base">
+    <span data-icon="tabler:tags" class="iconify text-lg"></span>
+    标签
+  </h2>
+  <div
+    class="mt-2 flex flex-wrap gap-2"
+    th:with="tags = ${tagFinder.listAll()}"
+  >
+    <a
+      th:each="tag : ${tags}"
+      th:href="${tag.status.permalink}"
+      th:title="${tag.spec.displayName}"
+      class="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-900 hover:bg-gray-200"
+      href="#"
+    >
+      <th:block th:text="'#'+${tag.spec.displayName}" />
+      <sup th:text="${tag.status.postCount}"></sup>
+    </a>
+  </div>
+</div>