1、详情页代码高亮 Bug fixed

2、数据库连接池参数添加
3、前端添加环境配置文件

Author: weiwosuoai

weblog-springboot/weblog-web/src/main/java/com/quanxiaoha/weblog/web/service/impl/ArchiveServiceImpl.java

@@ -74,7 +74,7 @@ public Response queryArchive(QueryArchivePageListReqVO queryArchivePageListReqVO
     class MonthKeyComparator implements Comparator<String> {
         @Override
         public int compare(String o1, String o2) {
-            // 使用YearMonth类将字符串解析成日期，并根据日期进行倒序排序
+            // 使用 YearMonth 类将字符串解析成日期，并根据日期进行倒序排序
             YearMonth ym1 = YearMonth.parse(o1);
             YearMonth ym2 = YearMonth.parse(o2);
             return ym2.compareTo(ym1);

weblog-springboot/weblog-web/src/main/resources/application-dev.yaml

@@ -4,5 +4,14 @@ spring:
     url: jdbc:p6spy:mysql://127.0.0.1:3306/weblog?useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&useSSL=false&zeroDateTimeBehavior=convertToNull
     username: root
     password: 123456
+    hikari:
+      minimum-idle: 5
+      maximum-pool-size: 9
+      auto-commit: true
+      idle-timeout: 30000
+      pool-name: Weblog-HikariCP
+      max-lifetime: 1800000
+      connection-timeout: 30000
+      connection-test-query: SELECT 1
 
 

weblog-springboot/weblog-web/src/main/resources/application-prod.yaml

@@ -4,6 +4,15 @@ spring:
     url: jdbc:mysql://172.17.0.1:3306/weblog?useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&useSSL=false&zeroDateTimeBehavior=convertToNull
     username: root
     password: qwe123
+    hikari:
+      minimum-idle: 5
+      maximum-pool-size: 9
+      auto-commit: true
+      idle-timeout: 30000
+      pool-name: Weblog-HikariCP
+      max-lifetime: 1800000
+      connection-timeout: 30000
+      connection-test-query: SELECT 1
 
 #=================================================================
 # log

weblog-vue3/.env.development

@@ -0,0 +1 @@
+VITE_APP_BASE_API='/api'

weblog-vue3/.env.production

@@ -0,0 +1 @@
+VITE_APP_BASE_API='/api'

weblog-vue3/package-lock.json

@@ -29,6 +29,7 @@
     "universal-cookie": "^4.0.4",
     "v-viewer": "^3.0.11",
     "vue": "^3.2.47",
+    "vue-highlightjs": "^1.3.3",
     "vue-router": "^4.1.6",
     "vue3-highlightjs": "^1.0.5",
     "vuex": "^4.0.2"

weblog-vue3/package.json

@@ -6,8 +6,10 @@
 
 <script setup>
 import { defineComponent } from 'vue'
+
 import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 let locale = zhCn
+
 </script>
 
 <style>

weblog-vue3/src/App.vue

@@ -5,7 +5,7 @@ import store from "@/store";
 import { Console } from "windicss/utils";
 
 const instance = axios.create({
-    baseURL: '/api',
+    baseURL: import.meta.env.VITE_APP_BASE_API,
     // baseURL: '/',
     timeout: 7000
 });

weblog-vue3/src/axios.js

@@ -8,12 +8,12 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import store from './store'
 import "@/permission"
 
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+// import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 // 代码高亮
-import VueHighlightJS from 'vue3-highlightjs'
-import 'vue3-highlightjs/styles/monokai-sublime.css'
+import hljs from 'highlight.js'
+import 'highlight.js/styles/tokyo-night-dark.css'
 
-// 富文本图片预览
+// 富文本图片点击预览
 import "viewerjs/dist/viewer.css";
 import Viewer from "v-viewer";
 
@@ -22,7 +22,12 @@ const app = createApp(App)
 app.use(store)
 app.use(router)
 
-app.use(VueHighlightJS)
+app.directive('highlight',function (el) {
+  let highlight = el.querySelectorAll('pre code');
+  highlight.forEach((block)=>{
+      hljs.highlightBlock(block)
+  })
+});
 
 // 引入图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

weblog-vue3/src/main.js

@@ -6,7 +6,7 @@
             <!-- 左边栏 -->
             <div class="col-span-4 px-3 md:col-span-3 sm:col-span-4">
                 <div v-for="(item, index) in archives" :key="index"
-                    class="p-5 mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
+                    class="p-5 mb-4 border border-gray-200 rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700">
                     <time class="text-lg font-semibold text-gray-900 dark:text-white">{{ item.month }}</time>
                     <ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
                         <li v-for="(item2, index2) in item.articles" :key="index2">

weblog-vue3/src/pages/frontend/archive-list.vue

@@ -12,7 +12,7 @@
                         <ol class="inline-flex items-center space-x-1 md:space-x-3">
                             <li class="inline-flex items-center">
                                 <a @click="router.push('/')"
-                                    class="cursor-pointer inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
+                                    class="cursor-pointer inline-flex items-center text-sm font-medium text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                                     <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                         fill="currentColor" viewBox="0 0 20 20">
                                         <path
@@ -66,8 +66,9 @@
                             </svg> 阅读量 {{ article.readNum }}
                         </div>
 
-                        <div class="article-content" v-viewer v-html="article.content" v-highlightjs>
+                        <div class="article-content" v-viewer v-html="article.content" v-highlight>
                         </div>
+                        
                         <!-- 标签 -->
                         <div class="mt-5 mb-5">
                             <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in article.tags"
@@ -262,7 +263,7 @@ const goTagArticleListPage = (id, name) => {
     color: #f8f8f2;
     border-radius: 5px;
     padding: 32px 0 0;
-    font-size: 16px;
+    font-size: 17px;
 }
 
 :deep(pre:before) {
@@ -287,6 +288,20 @@ const goTagArticleListPage = (id, name) => {
     font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Arial, sans-serif;
 }
 
+:deep(.article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6)  {
+    margin: 30px 0 10px 0;
+    color: #292525;
+    line-height: 150%;
+    font-family: PingFang SC,Helvetica Neue,Helvetica,Hiragino Sans GB,Microsoft YaHei,"\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
+}
+
+:deep(.article-content h3) {
+    font-size: 20px;
+    margin-top: 40px;
+    margin-bottom: 16px;
+    font-weight: 600;
+}
+
 :deep(.image-caption) {
     min-width: 20%;
     max-width: 80%;
@@ -306,11 +321,22 @@ const goTagArticleListPage = (id, name) => {
     padding-bottom: 10px;
 }
 
-:deep(code) {
-    display: inline;
+:deep(code:not(pre code)) {
+    padding: 2px 4px;
+    margin: 0 2px;
+    font-size: 95%!important;
+    border-radius: 4px;
+    color: rgb(41, 128, 185);
+    background-color: rgba(27, 31, 35, 0.05);
     font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
-    border-radius: 2px;
-    padding: 5px;
+}
+
+:deep(pre code) {
+    display: block;
+    font-size: 95% !important;
+    background-color: rgba(27, 31, 35, 0.05);
+    font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
+    /* color: #fff; */
 }
 
 :deep(article ul) {
@@ -324,12 +350,7 @@ const goTagArticleListPage = (id, name) => {
     font-size: 16px;
 }
 
-:deep(pre code) {
-    display: block;
-    font-size: 95% !important;
-    background-color: rgba(27, 31, 35, 0.05);
-    font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
-}
+
 
 :deep(blockquote) {
     /* margin: 20px 0; */

weblog-vue3/src/pages/frontend/article-detail.vue

@@ -9,7 +9,7 @@ module.exports = {
     extend: {},
   },
   plugins: [
-    require('flowbite/plugin')
+    require('flowbite/plugin'),
   ],
   corePlugins: {
     // 取消 tailwindcss 的默认样式