From b78d4ac43980d857b1649a9436bf3ecaab84c290 Mon Sep 17 00:00:00 2001
From: wcx <2738076308@qq.com>
Date: Sat, 24 Sep 2022 22:32:41 +0800
Subject: [PATCH] =?UTF-8?q?2022-09-24=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 404.html                   |  4 +--
 content.json               | 13 +++++++---
 content/md/2022-09-24$1.md | 29 ++++++++++++++++++++++
 css/highlight.css          | 16 +++++++++++-
 css/index.css              |  5 ++--
 css/myui.css               | 23 ++++++++++++++----
 index.html                 |  4 +--
 js/index.js                | 37 +++++++++-------------------
 js/initialize.js           | 35 ++++++++++++++++++++++++--
 js/preview.js              | 50 +++++++++++++++++++++++---------------
 js/view.js                 |  3 ---
 preview.html               |  4 +--
 12 files changed, 155 insertions(+), 68 deletions(-)
 create mode 100644 content/md/2022-09-24$1.md
diff --git a/404.html b/404.html
index a7c855e..9effb23 100644
--- a/404.html
+++ b/404.html
@@ -10,12 +10,12 @@ permalink: /404.html
 	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 	<link rel="stylesheet" href="css/index.css">
 	<link rel="stylesheet" href="css/myui.css">
-	<title>LAOZHONGYI BLOG</title>
+	<title>无处安心</title>
 </head>
 
 <body>
 	<div class="container clearfix">
-		<div id="blog-title">AHPU 老中医的博客</div>
+		<div id="blog-title">无处安心</div>
 		<input type="checkbox" id="menu-control">
 		<div class="menu-container">
 			<ul>
diff --git a/content.json b/content.json
index 47b3211..94db4b9 100644
--- a/content.json
+++ b/content.json
@@ -2,21 +2,26 @@
 	{
 		"title": "笔记1：首字下沉的技巧",
 		"date": "2019-09-19$1",
-		"hasCode": false
+		"type": "html"
 	},
 	{
 		"title": "笔记2：让新版Chrome支持本地跨域请求调试",
 		"date": "2019-09-20$1",
-		"hasCode": false
+		"type": "html"
 	},
 	{
 		"title":"笔记3：console下文字颜色的实现",
 		"date":"2019-12-29$1",
-		"hasCode": false
+		"type": "html"
 	},
 	{
 		"title":"笔记4：Visual Studio Code快捷键小总结",
 		"date":"2021-03-27$1",
-		"hasCode": false
+		"type": "html"
+	},
+	{
+		"title":"MarkDown 加入测试",
+		"date":"2022-09-24$1",
+		"type":"markdown"
 	}
 ]
\ No newline at end of file
diff --git a/content/md/2022-09-24$1.md b/content/md/2022-09-24$1.md
new file mode 100644
index 0000000..0d10721
--- /dev/null
+++ b/content/md/2022-09-24$1.md
@@ -0,0 +1,29 @@
+# 博客重新更新了
+
+## 2022-09-24 记录
+博客新加入了Markdown的支持，以后也只会使用Markdown来记录笔记。简单记录几个常用的语法
+
+### 标题
+``` MarkDown
+# 一级标题
+## 二级标题
+
+<!-- 也可以这样表示 -->
+
+一级标题
+========
+
+二级标题
+--------
+```
+
+### 段落
+``` MarkDown
+使用一段或多段空白行进行段落分行
+直接打字即可
+```
+
+### 换行
+``` MarkDown
+使用<br>标签换行
+```
diff --git a/css/highlight.css b/css/highlight.css
index be2b685..945876a 100644
--- a/css/highlight.css
+++ b/css/highlight.css
@@ -11,8 +11,22 @@ pre {
 	color:whitesmoke;
 	padding: 5px 15px;
 	font-size: medium;
+	border-radius: 5px;
 }
 
 code {
-	font-family: 'Menlo', 'Monaco', 'Consolas'
+	font-family: 'Menlo', 'Monaco', 'Consolas';
+	padding-right: 15px;
+}
+
+li {
+	padding-left: 15px;
+	padding-right: 15px;
+	border-left: 1px solid grey;
+	line-height: 1.5em;
+}
+
+b.name {
+	color: orange;
+	font-size: larger;
 }
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index f6233fb..43772d7 100644
--- a/css/index.css
+++ b/css/index.css
@@ -22,14 +22,15 @@ div.sidebar div:nth-of-type(n+1) a{
 	box-shadow: 1px 1px 2px #999;
 	min-height: 50px;
 	padding:15px 5px;
+	color: white
 }
 
 div.sidebar div:nth-of-type(n+1) a:visited{
-	color:black
+	color: white
 }
 
 div.sidebar div:nth-of-type(n+1) a:hover{
-	color:green;
+	color:rgb(190, 0, 190);
 	box-shadow: 2px 2px 5px #999;
 	transform:scale(1.05)
 }
diff --git a/css/myui.css b/css/myui.css
index 03b58e3..9b0b925 100644
--- a/css/myui.css
+++ b/css/myui.css
@@ -180,7 +180,8 @@ body {
 .content {
 	min-height: 200px;
 	max-width: 1000px;
-	background-color: rgba(255, 255, 255, .8);
+	background-color: rgba(100, 100, 100, .3);
+	backdrop-filter: blur(8px);
 	border-radius: 15px;
 	opacity: 1;
 	transition: opacity .5s ease, transform .5s ease;
@@ -189,9 +190,14 @@ body {
 	margin-bottom: 25px;
 	text-overflow: ellipsis;
 	z-index: 1;
+	color: rgb(233, 233, 233);
 	/* text-align: center */
 }
 
+.content h1 {
+	text-align: center;
+}
+
 .content:hover {
 	opacity: 1;
 }
@@ -218,7 +224,7 @@ body {
 	font-weight: bold
 }
 
-.content>p~p {
+.content p {
 	text-indent: 36px;
 }
 
@@ -371,10 +377,12 @@ body {
 	position: relative;
 	display: block;
 	width: 100%;
-	background-color: rgba(255, 255, 255, .8);
+	background-color: rgba(100, 100, 100, .3);
 	border-radius: 15px;
 	padding: 15px;
-	cursor: default
+	cursor: default;
+	color: rgb(233,233,233);
+	backdrop-filter: blur(8px);
 }
 
 .sidebar div:first-child {
@@ -383,6 +391,11 @@ body {
 	margin-bottom: 10px
 }
 
+.sidebar div:nth-of-type(n+1) a {
+	border: 1px solid grey;
+	border-radius: 5px
+}
+
 .loading {
 	display: block;
 	position: absolute;
@@ -587,7 +600,7 @@ body {
 	}
 
 	.sidebar div:nth-of-type(n+1) a {
-		border: 1px solid black;
+		border: 1px solid rgb(255, 255, 255);
 		border-radius: 5px
 	}
 }
diff --git a/index.html b/index.html
index d4a1267..340fae2 100644
--- a/index.html
+++ b/index.html
@@ -8,12 +8,12 @@
 	<link rel="stylesheet" href="css/index.css">
 	<link rel="stylesheet" href="css/myui.css">
 	<link rel="stylesheet" href="css/highlight.css">
-	<title>LAOZHONGYI BLOG</title>
+	<title>无处安心</title>
 </head>
 
 <body>
 	<div class="container clearfix">
-		<div id="blog-title">05412博客</div>
+		<div id="blog-title">无处安心</div>
 		<input type="checkbox" id="menu-control">
 		<div class="menu-container">
 			<ul>
diff --git a/js/index.js b/js/index.js
index bda1bf3..60aa7cc 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,15 +1,3 @@
-// $.ajax({
-// 	type:"GET",
-// 	url:"https://javacloud.bmob.cn/0104a7ae840e3555/counter?name=wcx",
-// 	async:true,
-// 	success:function(res){
-// 		message.alert('提示',res);
-// 	},
-// 	error:function(){
-// 		message.alert('提示','error!');
-// 	}
-// });
-
 var index = getQueryString('i');
 $.ajax({
 	type: "GET",
@@ -24,19 +12,18 @@ $.ajax({
 
 		listContent(response, lastIndex);
 
-		if (response[lastIndex]['hasCode'])
-			loadScript('content/js/' + response[lastIndex]['date'] + '.js');
-
-		$.ajax({
-			type: "GET",
-			url: 'content/html/' + response[lastIndex]['date'] + '.html',
-			success: function (res) {
-				appendContent(res);
-			},
-			error: function () {
-				message.alert('出错了!', '网络连接出错了，请稍后再试');
-			}
-		});
+		if (response[lastIndex]['type']=='html') {
+			$.ajax({
+				type: "GET",
+				url: 'content/html/' + response[lastIndex]['date'] + '.html',
+				success: function (res) {
+					appendContent(res);
+				},
+				error: function () {
+					message.alert('出错了!', '网络连接出错了，请稍后再试');
+				}
+			});
+		}
 	},
 	error: function () {
 		message.alert('出错了!', '网络连接出错了，请稍后再试');
diff --git a/js/initialize.js b/js/initialize.js
index 72df93a..c8c4fa0 100644
--- a/js/initialize.js
+++ b/js/initialize.js
@@ -8,7 +8,7 @@ $(function () {
 	toggleTop();
 	$('.msg-header').Drag($('.msg-container'));
 	$('.menu-container ul li span').on('click', function () {
-		message.alert('这里是', '<div style="text-align:right"><div style="font-size:28px;height:70px;padding-top:20px;text-align:center">AHPU-老中医</div>的博客&nbsp;&nbsp;&nbsp;</div>');
+		message.alert('这里是', '<div style="text-align:right"><div style="font-size:28px;height:70px;padding-top:20px;text-align:center">无处安心</div>的博客&nbsp;&nbsp;&nbsp;</div>');
 	});
 	topElem.on('click', function () {
 		$('html,body').animate({
@@ -167,14 +167,45 @@ function listContent(json, num) {
 		sidebar = $('.sidebar');
 	for (; i <= len; i++) {
 		index = len - i;
+		type = json[index]['type'];
 		if (index != num) {
-			sidebar.append($('<div>').append($('<a>').attr('href', 'view.html?i=' + index).append(json[index]['title'])));
+			sidebar.append(
+				$('<div>').append($('<a>')
+					.attr('href', `${type == 'html' ? 'view' : 'preview'}.html?i=${index}&type=${type}&date=${json[index]['date']}`)
+					.append(json[index]['title']))
+			);
 		} else {
 			sidebar.append($('<div>').append($('<span>').append(' · ' + json[index]['title'])));
 		}
 	}
 }
 
+function deployContentList() {
+
+	let index = window.parseInt(getQueryString('i')) || window.parseInt(getQueryString('date'));
+	if (window.isNaN(index)) {
+		message.alert('发生错误', '缺少参数或参数类型不正确，请检查URL是否正确', function () {
+			window.location.replace('/');
+		});
+		return;
+	}
+	$.ajax({
+		type: "GET",
+		url: "content.json?timestamp=" + (new Date()).valueOf(),
+		dataType: "json",
+		success: function (response) {
+
+			if (response.length <= index)
+				return;
+			listContent(response, index);
+		},
+		error: function () {
+			message.alert('出错了!', '网络连接出错了，请稍后再试');
+		}
+	});
+}
+
+
 function getQueryString(param) {
 	var reg = new RegExp("(^|&)" + param + "=([^&]*)(&|$)");
 	var r = window.location.search.substring(1).match(reg);
diff --git a/js/preview.js b/js/preview.js
index a4b265a..33c9683 100644
--- a/js/preview.js
+++ b/js/preview.js
@@ -1,34 +1,44 @@
 (function () {
     let md = window.markdownit({
         html: true,
-        breaks:true,
+        breaks: true,
         highlight: function (str, lang) {
             if (lang && hljs.getLanguage(lang)) {
-              try {
-                return hljs.highlight(str, { language: lang }).value;
-              } catch (e) {}
+                try {
+                    const preCode = hljs.highlight(str, { language: lang }).value;
+                    // 以换行进行分割
+                    const lines = preCode.split(/\n/).slice(0, -1)
+                    // 添加自定义行号
+                    let html = lines.map((item, index) => {
+                        return '<li><span class="line-num"></span>' + item + '</li>'
+                    }).join('')
+                    html = '<ol>' + html + '</ol>'
+                    // 添加代码语言
+                    if (lines.length) {
+                        html += '<b class="name">' + lang + '</b>'
+                    }
+                    return '<pre><code>' +
+                        html +
+                        '</code></pre>'
+                } catch (e) { }
             }
-        
             return ''; // use external default escaping
         }
-    })
-
+    });
+    deployContentList();
     $.ajax({
-		type: "GET",
-		url: "readme.md?timestamp=" + (new Date().valueOf()),
-		dataType: "text",
-		success: function (response) {
+        type: "GET",
+        url: 'content/md/' + getQueryString('date') + '.md?timestamp=' + (new Date().valueOf()),
+        dataType: "text",
+        success: function (response) {
 
             let res = md.render(response);
             appendContent(res);
             loadCss('js/highlight/styles/atom-one-light.min.css')
-            
-	        loadCss("css/highlight.css");
-            
-		
-		},
-		error: function () {
-			message.alert('出错了!', '网络连接出错了，请稍后再试');
-		}
-	});
+            loadCss("css/highlight.css");
+        },
+        error: function () {
+            message.alert('出错了!', '网络连接出错了，请稍后再试');
+        }
+    });
 })()
diff --git a/js/view.js b/js/view.js
index bd965c8..dba571a 100644
--- a/js/view.js
+++ b/js/view.js
@@ -16,9 +16,6 @@
 				return;
 			listContent(response, index);
 
-			if (response[index]['hasCode'])
-				loadScript('content/js/' + response[index]['date'] + '.js');
-
 			$.ajax({
 				type: "GET",
 				url: 'content/html/' + response[index]['date'] + '.html',
diff --git a/preview.html b/preview.html
index 0c5ee3a..f3d60fe 100644
--- a/preview.html
+++ b/preview.html
@@ -12,7 +12,7 @@
 
 <body>
 	<div class="container clearfix">
-		<div id="blog-title">AHPU 老中医的博客</div>
+		<div id="blog-title">无处安心</div>
 		<input type="checkbox" id="menu-control">
 		<div class="menu-container">
 			<ul>
@@ -56,7 +56,7 @@
 	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 	<script src="js/drag.js"></script>
 	<script src="js/initialize.js"></script>
-    <script src="js/markdown-it.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/markdown-it/13.0.1/markdown-it.min.js"></script>
     <script src="js/highlight/highlight.min.js"></script>
     <script src="js/preview.js"></script>
 </body>
