1、首页完善

2、update README.md
liupengzan · Jul 19, 2023 · dac934d · dac934d
1 parent f97410a
commit dac934d
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -134,3 +134,13 @@
 | axios        | 基于 Promise 的网络请求库       | 1.3.5   |
 | Echarts      | 百度开源的数据可视化图表库      | 5.4.2   |
 
+## 数据库初始化脚本
+
+初始化脚本位于入口模块 `weblog-web` 中的 `sql` 目录下：
+
+![](https://img.quanxiaoha.com/quanxiaoha/168972702174332)
+
+小伙伴们在部署时，请先新建一个名为 `weblog` 的库，然后依次执行 `schema.sql` 和 `data.sql` 即可：
+
+- `schema.sql` : 表结构脚本；
+- `data.sql` : 初始化数据脚本，如登录用户信息、博客基本设置信息等；
diff --git a/weblog-vue3/src/pages/frontend/article-detail.vue b/weblog-vue3/src/pages/frontend/article-detail.vue
@@ -36,12 +36,6 @@
                     <article>
                         <h1 class="title mt-2">{{ article.title }}</h1>
                         <div class="text-gray-400 text-sm flex items-center article-mata">
-                            <!-- <svg t="1682495071994" class="icon mr-2" viewBox="0 0 1024 1024" version="1.1"
-                                xmlns="http://www.w3.org/2000/svg" p-id="14886" width="16" height="16">
-                                <path
-                                    d="M736 544H512c-17.6 0-32-14.4-32-32V224c0-17.6 14.4-32 32-32s32 14.4 32 32v256h192c17.6 0 32 14.4 32 32s-14.4 32-32 32z m161.6-153.6c-17.6 0-32-14.4-32-32V185.6c0-17.6 14.4-32 32-32s32 14.4 32 32v172.8c0 17.6-14.4 32-32 32zM512 960C265.6 960 64 758.4 64 512S265.6 64 512 64c184 0 347.2 110.4 416 281.6 6.4 16-1.6 35.2-17.6 41.6-16 6.4-35.2-1.6-41.6-17.6C809.6 222.4 670.4 128 512 128c-211.2 0-384 172.8-384 384s172.8 384 384 384c158.4 0 297.6-94.4 356.8-241.6 6.4-16 25.6-24 41.6-17.6 16 6.4 24 25.6 17.6 41.6C859.2 849.6 696 960 512 960z"
-                                    fill="#8a8a8a" p-id="14887"></path>
-                            </svg> -->
                             <svg class="inline w-3 h-3 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
                                 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -262,8 +256,17 @@ const goTagArticleListPage = (id, name) => {
     background: #21252b;
     color: #f8f8f2;
     border-radius: 5px;
-    padding: 32px 0 0;
+    padding: 10px 0 0;
     font-size: 17px;
+    padding-left: 15px;
+}
+
+:deep(pre code.hljs) {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+    padding-left: 0!important;
+    padding-top: 25px!important;
 }
 
 :deep(pre:before) {
@@ -272,7 +275,7 @@ const goTagArticleListPage = (id, name) => {
     box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
     content: ' ';
     height: 10px;
-    margin-top: -20px;
+    margin-top: 5px;
     position: absolute;
     width: 10px;
 }
@@ -315,12 +318,6 @@ const goTagArticleListPage = (id, name) => {
     text-align: center;
 }
 
-:deep(pre) {
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-bottom: 10px;
-}
-
 :deep(code:not(pre code)) {
     padding: 2px 4px;
     margin: 0 2px;

diff --git a/weblog-vue3/src/pages/frontend/index.vue b/weblog-vue3/src/pages/frontend/index.vue
@@ -7,23 +7,40 @@
             <div class="col-span-4 px-3 md:col-span-3 sm:col-span-4">
                 <!-- 文章列表 -->
                 <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 gap-4">
+
                     <div v-for="(article, index) in articles" :key="index"
                         class="bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                         <a @click="goArticleDetail(article.id)" class="cursor-pointer">
                             <img class="rounded-t-lg h-50 w-full" :src="article.titleImage" />
                         </a>
                         <div class="p-5">
+                            <!-- 标签 -->
+                            <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in article.tags"
+                                :key="index"
+                                class="mb-3 inline-block bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-green-200 hover:text-green-900 dark:hover:bg-green-800 dark:hover:text-green-300 dark:bg-green-900 dark:text-green-300">
+                                {{ item.name }}
+                            </div>
                             <a @click="goArticleDetail(article.id)" class="cursor-pointer">
                                 <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{
                                     article.title }}</h2>
                             </a>
                             <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">{{ article.description }}</p>
-                            <p>
-                            <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in article.tags"
-                                :key="index"
-                                class="inline-block bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-green-200 hover:text-green-900 dark:hover:bg-green-800 dark:hover:text-green-300 dark:bg-green-900 dark:text-green-300">
-                                {{ item.name }}
-                            </div>
+                            <!-- meta 信息 -->
+                            <p class="text-gray-400 text-sm flex items-center article-mata">
+                                <svg class="inline w-3 h-3 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
+                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
+                            </svg>
+                            {{ article.createTime }}
+
+                            <svg class="inline w-3 h-3 ml-5 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
+                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H1Z" />
+                            </svg>
+                            <a @click="goCatagoryArticleListPage(article.category.id, article.category.name)"
+                                class="text-gray-400 hover:underline">{{ article.category.name }}</a>
                             </p>
                         </div>
                     </div>
@@ -55,9 +72,8 @@
                         <li v-for="page in pages" :key="page">
                             <a @click="getArticles(page)"
                                 class="flex items-center border-gray-300 justify-center px-4 h-10 leading-tight bg-white border dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
-                                :class="[page == current ? 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700' : 'text-gray-500  hover:bg-gray-100 hover:text-gray-700']"
-                                >
-
+                                :class="[page == current ? 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700' : 'text-gray-500  hover:bg-gray-100 hover:text-gray-700']">
+
                                 {{ page }}
                             </a>
                         </li>
@@ -92,7 +108,8 @@
                     <UserInfoCard></UserInfoCard>
 
                     <!-- 文章分类 -->
-                    <div class="mb-3 w-full font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
+                    <div
+                        class="mb-3 w-full font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                         <h2 class="mb-2 font-bold text-gray-900 uppercase dark:text-white">分类</h2>
                         <div
                             class="text-sm font-medium text-gray-900 bg-white rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">