2022-09-24更新

This commit is contained in:
wcx 2022-09-24 22:32:41 +08:00
parent 72ced7496e
commit b78d4ac439
12 changed files with 155 additions and 68 deletions

View File

@ -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>

View File

@ -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":"笔记3console下文字颜色的实现",
"date":"2019-12-29$1",
"hasCode": false
"type": "html"
},
{
"title":"笔记4Visual Studio Code快捷键小总结",
"date":"2021-03-27$1",
"hasCode": false
"type": "html"
},
{
"title":"MarkDown 加入测试",
"date":"2022-09-24$1",
"type":"markdown"
}
]

View File

@ -0,0 +1,29 @@
# 博客重新更新了
## 2022-09-24 记录
博客新加入了Markdown的支持以后也只会使用Markdown来记录笔记。简单记录几个常用的语法
### 标题
``` MarkDown
# 一级标题
## 二级标题
<!-- 也可以这样表示 -->
一级标题
========
二级标题
--------
```
### 段落
``` MarkDown
使用一段或多段空白行进行段落分行
直接打字即可
```
### 换行
``` MarkDown
使用<br>标签换行
```

View File

@ -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;
}

View File

@ -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)
}

View File

@ -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
}
}

View File

@ -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>

View File

@ -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,9 +12,7 @@ $.ajax({
listContent(response, lastIndex);
if (response[lastIndex]['hasCode'])
loadScript('content/js/' + response[lastIndex]['date'] + '.js');
if (response[lastIndex]['type']=='html') {
$.ajax({
type: "GET",
url: 'content/html/' + response[lastIndex]['date'] + '.html',
@ -37,6 +23,7 @@ $.ajax({
message.alert('出错了!', '网络连接出错了,请稍后再试');
}
});
}
},
error: function () {
message.alert('出错了!', '网络连接出错了,请稍后再试');

View File

@ -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);

View File

@ -5,27 +5,37 @@
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(str, { language: lang }).value;
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()),
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('出错了!', '网络连接出错了,请稍后再试');

View File

@ -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',

View File

@ -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>