wcx/wolegca.github.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2022-09-24更新

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
404.html
View File

@ -10,12 +10,12 @@ permalink: /404.html
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <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/index.css">
<link rel="stylesheet" href="css/myui.css"> <link rel="stylesheet" href="css/myui.css">
<title>LAOZHONGYI BLOG</title> <title>无处安心</title>
</head> </head>
<body> <body>
<div class="container clearfix"> <div class="container clearfix">
<div id="blog-title">AHPU 老中医的博客</div> <div id="blog-title">无处安心</div>
<input type="checkbox" id="menu-control"> <input type="checkbox" id="menu-control">
<div class="menu-container"> <div class="menu-container">
<ul> <ul>

13
content.json
View File

@ -2,21 +2,26 @@
{ {
"title": "笔记1：首字下沉的技巧", "title": "笔记1：首字下沉的技巧",
"date": "2019-09-19$1", "date": "2019-09-19$1",
"hasCode": false "type": "html"
}, },
{ {
"title": "笔记2：让新版Chrome支持本地跨域请求调试", "title": "笔记2：让新版Chrome支持本地跨域请求调试",
"date": "2019-09-20$1", "date": "2019-09-20$1",
"hasCode": false "type": "html"
}, },
{ {
"title":"笔记3：console下文字颜色的实现", "title":"笔记3：console下文字颜色的实现",
"date":"2019-12-29$1", "date":"2019-12-29$1",
"hasCode": false "type": "html"
}, },
{ {
"title":"笔记4：Visual Studio Code快捷键小总结", "title":"笔记4：Visual Studio Code快捷键小总结",
"date":"2021-03-27$1", "date":"2021-03-27$1",
"hasCode": false "type": "html"
},
{
"title":"MarkDown 加入测试",
"date":"2022-09-24$1",
"type":"markdown"
} }
] ]

29
content/md/2022-09-24$1.md Normal file
View File

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

16
css/highlight.css
View File

@ -11,8 +11,22 @@ pre {
color:whitesmoke; color:whitesmoke;
padding: 5px 15px; padding: 5px 15px;
font-size: medium; font-size: medium;
border-radius: 5px;
} }
code { 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;
} }

5
css/index.css
View File

@ -22,14 +22,15 @@ div.sidebar div:nth-of-type(n+1) a{
box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999;
min-height: 50px; min-height: 50px;
padding:15px 5px; padding:15px 5px;
color: white
} }
div.sidebar div:nth-of-type(n+1) a:visited{ div.sidebar div:nth-of-type(n+1) a:visited{
color:black color: white
} }
div.sidebar div:nth-of-type(n+1) a:hover{ div.sidebar div:nth-of-type(n+1) a:hover{
color:green; color:rgb(190, 0, 190);
box-shadow: 2px 2px 5px #999; box-shadow: 2px 2px 5px #999;
transform:scale(1.05) transform:scale(1.05)
} }

23
css/myui.css
View File

@ -180,7 +180,8 @@ body {
.content { .content {
min-height: 200px; min-height: 200px;
max-width: 1000px; max-width: 1000px;
background-color: rgba(255, 255, 255, .8); background-color: rgba(100, 100, 100, .3);
backdrop-filter: blur(8px);
border-radius: 15px; border-radius: 15px;
opacity: 1; opacity: 1;
transition: opacity .5s ease, transform .5s ease; transition: opacity .5s ease, transform .5s ease;
@ -189,9 +190,14 @@ body {
margin-bottom: 25px; margin-bottom: 25px;
text-overflow: ellipsis; text-overflow: ellipsis;
z-index: 1; z-index: 1;
color: rgb(233, 233, 233);
/* text-align: center */ /* text-align: center */
} }
.content h1 {
text-align: center;
}
.content:hover { .content:hover {
opacity: 1; opacity: 1;
} }
@ -218,7 +224,7 @@ body {
font-weight: bold font-weight: bold
} }
.content>p~p { .content p {
text-indent: 36px; text-indent: 36px;
} }
@ -371,10 +377,12 @@ body {
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
background-color: rgba(255, 255, 255, .8); background-color: rgba(100, 100, 100, .3);
border-radius: 15px; border-radius: 15px;
padding: 15px; padding: 15px;
cursor: default cursor: default;
color: rgb(233,233,233);
backdrop-filter: blur(8px);
} }
.sidebar div:first-child { .sidebar div:first-child {
@ -383,6 +391,11 @@ body {
margin-bottom: 10px margin-bottom: 10px
} }
.sidebar div:nth-of-type(n+1) a {
border: 1px solid grey;
border-radius: 5px
}
.loading { .loading {
display: block; display: block;
position: absolute; position: absolute;
@ -587,7 +600,7 @@ body {
} }
.sidebar div:nth-of-type(n+1) a { .sidebar div:nth-of-type(n+1) a {
border: 1px solid black; border: 1px solid rgb(255, 255, 255);
border-radius: 5px border-radius: 5px
} }
} }

4
index.html
View File

@ -8,12 +8,12 @@
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/myui.css"> <link rel="stylesheet" href="css/myui.css">
<link rel="stylesheet" href="css/highlight.css"> <link rel="stylesheet" href="css/highlight.css">
<title>LAOZHONGYI BLOG</title> <title>无处安心</title>
</head> </head>
<body> <body>
<div class="container clearfix"> <div class="container clearfix">
<div id="blog-title">05412博客</div> <div id="blog-title">无处安心</div>
<input type="checkbox" id="menu-control"> <input type="checkbox" id="menu-control">
<div class="menu-container"> <div class="menu-container">
<ul> <ul>

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

35
js/initialize.js
View File

@ -8,7 +8,7 @@ $(function () {
toggleTop(); toggleTop();
$('.msg-header').Drag($('.msg-container')); $('.msg-header').Drag($('.msg-container'));
$('.menu-container ul li span').on('click', function () { $('.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 () { topElem.on('click', function () {
$('html,body').animate({ $('html,body').animate({
@ -167,14 +167,45 @@ function listContent(json, num) {
sidebar = $('.sidebar'); sidebar = $('.sidebar');
for (; i <= len; i++) { for (; i <= len; i++) {
index = len - i; index = len - i;
type = json[index]['type'];
if (index != num) { 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 { } else {
sidebar.append($('<div>').append($('<span>').append(' · ' + json[index]['title']))); 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) { function getQueryString(param) {
var reg = new RegExp("(^|&)" + param + "=([^&]*)(&|$)"); var reg = new RegExp("(^|&)" + param + "=([^&]*)(&|$)");
var r = window.location.search.substring(1).match(reg); var r = window.location.search.substring(1).match(reg);

30
js/preview.js
View File

@ -1,31 +1,41 @@
(function () { (function () {
let md = window.markdownit({ let md = window.markdownit({
html: true, html: true,
breaks:true, breaks: true,
highlight: function (str, lang) { highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) { if (lang && hljs.getLanguage(lang)) {
try { try {
return hljs.highlight(str, { language: lang }).value; const preCode = hljs.highlight(str, { language: lang }).value;
} catch (e) {} // 以换行进行分割
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 return ''; // use external default escaping
} }
}) });
deployContentList();
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: "readme.md?timestamp=" + (new Date().valueOf()), url: 'content/md/' + getQueryString('date') + '.md?timestamp=' + (new Date().valueOf()),
dataType: "text", dataType: "text",
success: function (response) { success: function (response) {
let res = md.render(response); let res = md.render(response);
appendContent(res); appendContent(res);
loadCss('js/highlight/styles/atom-one-light.min.css') loadCss('js/highlight/styles/atom-one-light.min.css')
loadCss("css/highlight.css"); loadCss("css/highlight.css");
}, },
error: function () { error: function () {
message.alert('出错了!', '网络连接出错了，请稍后再试'); message.alert('出错了!', '网络连接出错了，请稍后再试');

3
js/view.js
View File

@ -16,9 +16,6 @@
return; return;
listContent(response, index); listContent(response, index);
if (response[index]['hasCode'])
loadScript('content/js/' + response[index]['date'] + '.js');
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: 'content/html/' + response[index]['date'] + '.html', url: 'content/html/' + response[index]['date'] + '.html',

4
preview.html
View File

@ -12,7 +12,7 @@
<body> <body>
<div class="container clearfix"> <div class="container clearfix">
<div id="blog-title">AHPU 老中医的博客</div> <div id="blog-title">无处安心</div>
<input type="checkbox" id="menu-control"> <input type="checkbox" id="menu-control">
<div class="menu-container"> <div class="menu-container">
<ul> <ul>
@ -56,7 +56,7 @@
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/drag.js"></script> <script src="js/drag.js"></script>
<script src="js/initialize.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/highlight/highlight.min.js"></script>
<script src="js/preview.js"></script> <script src="js/preview.js"></script>
</body> </body>