修改markdown,和markdown列表
This commit is contained in:
jmal
parent
fe1409a619
commit
99703156f9
BIN
src/assets/img/back.jpeg
Normal file
BIN
src/assets/img/back.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/img/widget-img.jpeg
Normal file
BIN
src/assets/img/widget-img.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
src/assets/img/widget-img1.jpg
Normal file
BIN
src/assets/img/widget-img1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
@ -65,7 +65,7 @@
|
||||
this.container.addEventListener('scroll', this.throttledScrollHandler);
|
||||
|
||||
window.onbeforeunload = function () {
|
||||
var scrollPos;
|
||||
let scrollPos;
|
||||
if (typeof window.pageYOffset != 'undefined') {
|
||||
scrollPos = window.pageYOffset;
|
||||
}
|
||||
@ -138,3 +138,6 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
1
src/icons/svg/release.svg
Normal file
1
src/icons/svg/release.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1584110061302" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1546" width="32" height="32"><path d="M922.4 102C908 109.8 295 444 124.3 537c-19.1 13.8-41.1 24.6-0.3 38.7 50.6 17.4 133.8 45.9 184.7 63.4 36.8 13.7 48.9 13.6 68.2-8.2 105.9-102.7 525.7-509.7 545-528.4C900.3 128.9 564 538.7 474.3 648c-7.4 10.4-13.8 26.1 0.3 32.4 64.2 16.7 249.9 65.1 313.9 81.8 10.4 3.3 22 0.8 26-18.2 20.1-119.2 108.6-642.7 108.6-642.7s-0.3 0.2-0.7 0.7zM443.6 743.2c-0.7 18.7 0.7 125.6 0 169.2-0.7 43.6 91.1-62.8 91.1-84.6s-90.4-103.3-91.1-84.6z" p-id="1547"></path></svg>
|
||||
|
After Width: | Height: | Size: 606 B |
1
src/icons/svg/widget-email.svg
Normal file
1
src/icons/svg/widget-email.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1584092773170" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1208" width="32" height="32"><path d="M1024.001 220.64v574.32c0 5.76-0.736 11.456-1.824 17.072v0.064l-0.224 0.944A84.336 84.336 0 0 1 939.297 880H101.09a102.72 102.72 0 0 1-82.512-40.832A95.904 95.904 0 0 1 0.017 781.92V236.256a74.08 74.08 0 0 1 52.064-70.784l0.736-0.208 0.208-0.08A127.648 127.648 0 0 1 89.665 160H973.09c1.328 0.512 2.64 1.232 4.032 1.44 25.52 4.32 40.592 19.152 45.344 44.496v0.08c0.88 4.816 1.536 9.712 1.536 14.608z m-512 370.592L963.153 211.76c-66.272-3.888-888.48-1.728-897.84 2.368L512.001 591.2v0.064z m133.856-45.152l-114.112 96.144c-13.76 11.52-25.6 11.664-39.2 0.208l-48.272-40.752-63.84-53.936L81.025 825.28l1.024 2.304h873.328L645.793 546.08h0.064zM340.993 514.4l-289.2-244.368v512.48l289.28-268.096h-0.08z m344.352-1.648l287.088 260.96V270.944L685.345 512.768z" p-id="1209"></path></svg>
|
||||
|
After Width: | Height: | Size: 935 B |
1
src/icons/svg/widget-github.svg
Normal file
1
src/icons/svg/widget-github.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1584092622380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="664" width="32" height="32"><path d="M347.8 794.8c0 4-4.6 7.2-10.4 7.2-6.6 0.6-11.2-2.6-11.2-7.2 0-4 4.6-7.2 10.4-7.2 6-0.6 11.2 2.6 11.2 7.2z m-62.2-9c-1.4 4 2.6 8.6 8.6 9.8 5.2 2 11.2 0 12.4-4s-2.6-8.6-8.6-10.4c-5.2-1.4-11 0.6-12.4 4.6z m88.4-3.4c-5.8 1.4-9.8 5.2-9.2 9.8 0.6 4 5.8 6.6 11.8 5.2 5.8-1.4 9.8-5.2 9.2-9.2-0.6-3.8-6-6.4-11.8-5.8zM505.6 16C228.2 16 16 226.6 16 504c0 221.8 139.6 411.6 339 478.4 25.6 4.6 34.6-11.2 34.6-24.2 0-12.4-0.6-80.8-0.6-122.8 0 0-140 30-169.4-59.6 0 0-22.8-58.2-55.6-73.2 0 0-45.8-31.4 3.2-30.8 0 0 49.8 4 77.2 51.6 43.8 77.2 117.2 55 145.8 41.8 4.6-32 17.6-54.2 32-67.4-111.8-12.4-224.6-28.6-224.6-221 0-55 15.2-82.6 47.2-117.8-5.2-13-22.2-66.6 5.2-135.8 41.8-13 138 54 138 54 40-11.2 83-17 125.6-17s85.6 5.8 125.6 17c0 0 96.2-67.2 138-54 27.4 69.4 10.4 122.8 5.2 135.8 32 35.4 51.6 63 51.6 117.8 0 193-117.8 208.4-229.6 221 18.4 15.8 34 45.8 34 92.8 0 67.4-0.6 150.8-0.6 167.2 0 13 9.2 28.8 34.6 24.2C872.4 915.6 1008 725.8 1008 504 1008 226.6 783 16 505.6 16zM210.4 705.8c-2.6 2-2 6.6 1.4 10.4 3.2 3.2 7.8 4.6 10.4 2 2.6-2 2-6.6-1.4-10.4-3.2-3.2-7.8-4.6-10.4-2z m-21.6-16.2c-1.4 2.6 0.6 5.8 4.6 7.8 3.2 2 7.2 1.4 8.6-1.4 1.4-2.6-0.6-5.8-4.6-7.8-4-1.2-7.2-0.6-8.6 1.4z m64.8 71.2c-3.2 2.6-2 8.6 2.6 12.4 4.6 4.6 10.4 5.2 13 2 2.6-2.6 1.4-8.6-2.6-12.4-4.4-4.6-10.4-5.2-13-2z m-22.8-29.4c-3.2 2-3.2 7.2 0 11.8 3.2 4.6 8.6 6.6 11.2 4.6 3.2-2.6 3.2-7.8 0-12.4-2.8-4.6-8-6.6-11.2-4z" p-id="665"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
src/icons/svg/widget-music.svg
Normal file
1
src/icons/svg/widget-music.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1584092721709" class="icon" viewBox="0 0 1103 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="938" width="32" height="32"><path d="M911.538273 1021.732613a101.31386 101.31386 0 0 0 103.223641-103.223641v-275.247126a103.223641 103.223641 0 0 0-206.399537 0v275.247126a101.457094 101.457094 0 0 0 103.175896 103.223641zM85.940126 918.556717v-275.247127a103.223641 103.223641 0 0 1 206.399537 0v275.247127a103.223641 103.223641 0 1 1-206.399537 0zM0 591.745514C0 275.247127 251.088402 0 550.398765 0s550.398765 278.684732 550.398764 591.745514v343.760506h-51.564076v-343.760506c0-288.997547-227.025167-543.523555-498.834688-543.523554S51.564076 302.747967 51.564076 591.745514v343.760506H0z" fill="#A6C437" p-id="939"></path></svg>
|
||||
|
After Width: | Height: | Size: 750 B |
1
src/icons/svg/widget-subscription.svg
Normal file
1
src/icons/svg/widget-subscription.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1584092796523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1343" width="32" height="32"><path d="M257.051715 851.293097a84.949661 84.949661 0 1 0-84.949661-84.949661 84.949661 84.949661 0 0 0 84.949661 84.949661z m-28.319563-339.798642c156.547509 0 283.132434 126.675201 283.132434 283.719227a56.634612 56.634612 0 1 0 113.269223 0c0-219.587199-177.283893-396.988451-396.401657-396.988451a56.634612 56.634612 0 0 0 0 113.269224z m0-226.529419c281.660936 0 509.82435 228.181469 509.82435 509.950736a56.634612 56.634612 0 1 0 113.269223 0c0-344.330495-278.898492-623.219959-623.084545-623.21996a56.634612 56.634612 0 0 0 0 113.269224z" p-id="1344"></path></svg>
|
||||
|
After Width: | Height: | Size: 716 B |
4422
src/styles/articles.scss
Normal file
4422
src/styles/articles.scss
Normal file
File diff suppressed because it is too large
Load Diff
@ -39,8 +39,8 @@
|
||||
/* border-bottom: 1px solid #201c29; */
|
||||
-webkit-transition: all 350ms ease-in-out;
|
||||
transition: all 350ms ease-in-out;
|
||||
-webkit-box-shadow: 0 0 30px #000;
|
||||
box-shadow: 0 0 30px #000;
|
||||
-webkit-box-shadow: 4px -11px 20px #000;
|
||||
box-shadow: 4px -11px 20px #000;
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: rgba(255,255,255,0.72);
|
||||
@ -102,6 +102,52 @@
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
|
||||
.body-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1080px;
|
||||
min-height: 1000px;
|
||||
margin: 0 auto;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/deep/ .v-note-wrapper {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.l_main {
|
||||
padding: 70px 16px 16px;
|
||||
}
|
||||
|
||||
.l_main {
|
||||
width: calc(100% - 1 * 285px);
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px){
|
||||
.l_main {
|
||||
width: calc(100% - 1 * 240px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
.l_main {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 425px){
|
||||
.l_main {
|
||||
padding: 70px 0 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/deep/ .right-bj {
|
||||
//top: 70px;
|
||||
//background: rgba(255, 255, 255, 0.8);
|
||||
@ -406,5 +452,26 @@
|
||||
border-radius: 8px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
pre code {
|
||||
background: unset;
|
||||
color: unset;
|
||||
opacity: unset;
|
||||
padding: unset;
|
||||
}
|
||||
.hljs code {
|
||||
background: unset;
|
||||
color: unset;
|
||||
opacity: unset;
|
||||
padding: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.pre-numbering {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 425px){
|
||||
.pre-numbering {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
||||
|
||||
<div class="title-container">
|
||||
<h3 class="title">Login Form</h3>
|
||||
<h3 class="title">登录 jmalCloud</h3>
|
||||
</div>
|
||||
|
||||
<el-form-item prop="username">
|
||||
@ -43,10 +43,10 @@
|
||||
|
||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
|
||||
|
||||
<div class="tips">
|
||||
<span style="margin-right:20px;">username: admin</span>
|
||||
<span> password: any</span>
|
||||
</div>
|
||||
<!--<div class="tips">-->
|
||||
<!--<span style="margin-right:20px;">username: admin</span>-->
|
||||
<!--<span> password: any</span>-->
|
||||
<!--</div>-->
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
@ -74,8 +74,8 @@ export default {
|
||||
}
|
||||
return {
|
||||
loginForm: {
|
||||
username: 'jmal',
|
||||
password: '123456'
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
<div id="top" style="display: block;" class="animateIn">
|
||||
<div class="bar" style="width: 0;"></div>
|
||||
<div class="navigation animated fadeIn fast delay-1s">
|
||||
<svg-icon id="home-icon" class="icon-home" icon-class="tab-folder" ></svg-icon>
|
||||
<a href="/public/articles"><svg-icon id="home-icon" class="icon-home" icon-class="home" ></svg-icon></a>
|
||||
<div id="play-icon" title="Play/Pause" class="iconfont icon-play"></div>
|
||||
<h3 class="subtitle" style="display: block;">深入理解JVM</h3>
|
||||
<h3 class="subtitle" style="display: block;">{{pageTitle}}</h3>
|
||||
</div>
|
||||
<div class="scrollbar gradient-bg-rev" style="width: 0;"></div>
|
||||
</div>
|
||||
@ -41,6 +41,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="clearfix">
|
||||
<div class="copyright"><p><a href="http://blog.jmal.top">Copyright © 2020 jmal</a></p></div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -55,7 +58,7 @@
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
pageTitle: "文章列表",
|
||||
pageTitle: "文章",
|
||||
showList: true,
|
||||
toolbars: null,
|
||||
toolbarsFlag: true,
|
||||
@ -83,16 +86,17 @@
|
||||
markdownApi.getMarkdown({
|
||||
mark: this.$route.query.mark
|
||||
}).then((res) => {
|
||||
this.pageTitle = res.data.name
|
||||
const filename = res.data.name
|
||||
this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1)
|
||||
this.content = res.data.contentText
|
||||
setTimeout(function () {
|
||||
// 刷新界面 回到上次滚动条的位置
|
||||
if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
|
||||
const arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
|
||||
document.documentElement.scrollTop = parseInt(arr[1]);
|
||||
document.body.scrollTop = parseInt(arr[1]);
|
||||
}
|
||||
},10)
|
||||
// setTimeout(function () {
|
||||
// // 刷新界面 回到上次滚动条的位置
|
||||
// if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
|
||||
// const arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
|
||||
// document.documentElement.scrollTop = parseInt(arr[1]);
|
||||
// document.body.scrollTop = parseInt(arr[1]);
|
||||
// }
|
||||
// },10)
|
||||
|
||||
this.$nextTick(()=>{ // DOM更新之后获取子元素
|
||||
|
||||
@ -173,10 +177,10 @@
|
||||
let $root = $('html, body');
|
||||
$('.j-titleList li').on("click", function () {
|
||||
console.log(typeof($(this).attr("first"))!=="undefined")
|
||||
let top = 20
|
||||
let top = 70
|
||||
if (typeof($(this).attr("first"))!=="undefined") {
|
||||
// 点击第一个目录
|
||||
top = 50
|
||||
top = 100
|
||||
}
|
||||
$root.animate({
|
||||
scrollTop: $($.attr(this.querySelector("a"), 'href')).offset().top - top
|
||||
@ -187,7 +191,11 @@
|
||||
|
||||
const _this = this
|
||||
setTimeout(function () {
|
||||
addCodeBtn();
|
||||
// 添加行数
|
||||
const clientWidth = document.documentElement.clientWidth;
|
||||
if(clientWidth > 425){
|
||||
addCodeBtn();
|
||||
}
|
||||
_this.isLoading = false
|
||||
},150)
|
||||
})
|
||||
@ -204,37 +212,11 @@
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "src/styles/markdown";
|
||||
|
||||
.body-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
@import "src/styles/articles";
|
||||
/deep/ .el-backtop {
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(1px);
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
color: #272936;
|
||||
}
|
||||
|
||||
/deep/ .v-note-wrapper {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.l_main {
|
||||
width: calc(100% - 1 * 285px);
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px){
|
||||
.l_main {
|
||||
width: calc(100% - 1 * 240px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
.l_main {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,172 +1,293 @@
|
||||
<template>
|
||||
<div v-wechat-title="pageTitle">
|
||||
<div class="articles" v-wechat-title="pageTitle">
|
||||
<transition name="fade">
|
||||
<al-loading v-if="isLoading"></al-loading>
|
||||
</transition>
|
||||
<al-back-top></al-back-top>
|
||||
<div class="content">
|
||||
<el-row :gutter="0">
|
||||
<el-col :xs="0" :sm="1" :md="4" :lg="5" :xl="6"><div style="color: white">c</div></el-col>
|
||||
<el-col :xs="24" :sm="22" :md="16" :lg="14" :xl="12">
|
||||
<el-main class="main-content">
|
||||
<mavon-editor
|
||||
ref="md"
|
||||
v-if="!showList"
|
||||
v-model="content"
|
||||
:subfield="false"
|
||||
:boxShadow="true"
|
||||
:toolbarsFlag="false"
|
||||
defaultOpen="preview"
|
||||
/>
|
||||
</el-main>
|
||||
</el-col>
|
||||
<el-col :xs="0" :sm="1" :md="4" :lg="5" :xl="6">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-show="titleList.length > 0" class="right-bj">
|
||||
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 662px;">
|
||||
<div class="right-menu" id="inner-content-div" style="overflow: hidden; width: auto; height: 662px;">
|
||||
<div class="toc-content">
|
||||
<header class="toc-header"><svg-icon icon-class="contents"></svg-icon><span>目录</span></header>
|
||||
</div>
|
||||
<div class="j-titleList titleList">
|
||||
<div class="j-bj" style="height: 40px; top: 0px;"></div>
|
||||
<div class="cover-wrapper">
|
||||
<div class="cover half" style="position: relative; z-index: 0; background-image: none;">
|
||||
<div class="cover-body">
|
||||
<div class="a">
|
||||
<p class="title">jmal</p>
|
||||
<p class="subtitle">「清空你的杯子, 方能再行注满」</p>
|
||||
</div>
|
||||
<div class="b">
|
||||
<div class="m_search">
|
||||
<form name="searchform" class="form u-search-form">
|
||||
<input type="text" class="input u-search-input" placeholder=""> <i class="icon fas fa-search fa-fw"> <svg-icon icon-class="search" /></i>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="backstretch">
|
||||
<img src="~@/assets/img/widget-img1.jpg">
|
||||
<!--<el-image :src="backImageSrc">-->
|
||||
<!--</el-image>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l_body">
|
||||
<div class="body-wrapper">
|
||||
<el-main class="l_main">
|
||||
<section class="post-list">
|
||||
<div v-for="article in articleList" class="post-wrapper">
|
||||
<article class="post white-box shadow reveal">
|
||||
<section class="meta">
|
||||
<div class="meta" id="header-meta">
|
||||
<h2 class="title">
|
||||
<a :href="$route.path+'/article?mark='+article.id" @click="clearCooike">{{article.name}}</a>
|
||||
</h2>
|
||||
<div class="new-meta-box">
|
||||
<div class="new-meta-item author">
|
||||
<a href="http://blog.jmal.com" rel="nofollow">
|
||||
<img :src="article.avatar" :data-original="article.avatar">
|
||||
<p>{{article.username}}</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="new-meta-item date">
|
||||
<a class="notlink">
|
||||
<svg-icon icon-class="release"></svg-icon>
|
||||
<p>发布于 {{article.uploadTime}}</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
</section>
|
||||
<section class="article typo">
|
||||
<div class="article-entry" itemprop="articleBody">
|
||||
<!--<p><img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/2019/88ff47f8-e8f5-3691-cff2-ab0e042dd752.jpg.png" data-original="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/2019/88ff47f8-e8f5-3691-cff2-ab0e042dd752.jpg.png" alt=""></p>-->
|
||||
<p></p>
|
||||
<div class="button readmore"><a :href="$route.path+'/article?mark='+article.id">阅读全文 <i class="fas fa-chevron-right"></i></a></div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</el-main>
|
||||
|
||||
<aside class="l_side">
|
||||
<section class="widget blogger shadow desktop">
|
||||
<div class="content">
|
||||
<div class="avatar">
|
||||
<img class="avatar" src="~@/assets/img/widget-img.jpeg">
|
||||
</div>
|
||||
<div class="social-wrapper">
|
||||
<a href="" class="social fas fa-rss flat-btn waves-effect waves-button" target="_blank" rel="external nofollow noopener noreferrer">
|
||||
<svg-icon icon-class="widget-subscription"></svg-icon>
|
||||
</a>
|
||||
<a href="mailto:zhushilun163@084.com" class="social fas fa-envelope flat-btn waves-effect waves-button" target="_blank" rel="external nofollow noopener noreferrer">
|
||||
<svg-icon icon-class="widget-email"></svg-icon>
|
||||
</a>
|
||||
<a href="https://github.com/jamebal" class="social fab fa-github flat-btn waves-effect waves-button" target="_blank" rel="external nofollow noopener noreferrer">
|
||||
<svg-icon icon-class="widget-github"></svg-icon>
|
||||
</a>
|
||||
<a href="https://music.163.com/#/user/home?id=60353124" class="social fas fa-headphones-alt flat-btn waves-effect waves-button" target="_blank" rel="external nofollow noopener noreferrer">
|
||||
<svg-icon icon-class="widget-music"></svg-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--<section class="widget category shadow desktop">-->
|
||||
<!--<header>-->
|
||||
<!--<a href="/blog/categories/">-->
|
||||
<!--<i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>-->
|
||||
<!--<span class="name">文章分类</span>-->
|
||||
<!--</a>-->
|
||||
<!--</header>-->
|
||||
<!--<div class="content">-->
|
||||
<!--<ul class="entry navigation">-->
|
||||
<!--<li>-->
|
||||
<!--<a class="flat-box waves-effect waves-block" title="/blog/categories/dev/" href="/blog/categories/dev/" id="blogcategoriesdev">-->
|
||||
<!--<div class="name">Dev</div>-->
|
||||
<!--<div class="badge">(34)</div>-->
|
||||
<!--</a>-->
|
||||
<!--</li>-->
|
||||
<!--<li>-->
|
||||
<!--<a class="flat-box child waves-effect waves-block" title="/blog/categories/dev/cocoa/" href="/blog/categories/dev/cocoa/" id="blogcategoriesdevcocoa">-->
|
||||
<!--<div class="name">Cocoa</div>-->
|
||||
<!--<div class="badge">(30)</div>-->
|
||||
<!--</a>-->
|
||||
<!--</li>-->
|
||||
<!--<li>-->
|
||||
<!--<a class="flat-box child waves-effect waves-block" title="/blog/categories/dev/git/" href="/blog/categories/dev/git/" id="blogcategoriesdevgit">-->
|
||||
<!--<div class="name">Git</div>-->
|
||||
<!--<div class="badge">(2)</div>-->
|
||||
<!--</a>-->
|
||||
<!--</li>-->
|
||||
<!--<li>-->
|
||||
<!--<a class="flat-box child waves-effect waves-block" title="/blog/categories/dev/hexo/" href="/blog/categories/dev/hexo/" id="blogcategoriesdevhexo">-->
|
||||
<!--<div class="name">Hexo</div>-->
|
||||
<!--<div class="badge">(1)</div>-->
|
||||
<!--</a>-->
|
||||
<!--</li>-->
|
||||
<!--<li>-->
|
||||
<!--<a class="flat-box child waves-effect waves-block" title="/blog/categories/dev/windows/" href="/blog/categories/dev/windows/" id="blogcategoriesdevwindows">-->
|
||||
<!--<div class="name">Windows</div>-->
|
||||
<!--<div class="badge">(1)</div>-->
|
||||
<!--</a>-->
|
||||
<!--</li>-->
|
||||
<!--<li>-->
|
||||
<!--<a class="flat-box waves-effect waves-block" title="/blog/categories/essay/" href="/blog/categories/essay/" id="blogcategoriesessay">-->
|
||||
<!--<div class="name">Essay</div>-->
|
||||
<!--<div class="badge">(2)</div>-->
|
||||
<!--</a>-->
|
||||
<!--</li>-->
|
||||
<!--</ul>-->
|
||||
<!--</div>-->
|
||||
<!--</section>-->
|
||||
<!--<section class="widget tagcloud shadow desktop">-->
|
||||
<!--<header>-->
|
||||
<!--<a href="/blog/tags/">-->
|
||||
<!--<i class="fas fa-tags fa-fw" aria-hidden="true"></i>-->
|
||||
<!--<span class="name">热门标签</span>-->
|
||||
<!--</a>-->
|
||||
<!--</header>-->
|
||||
<!--<div class="content">-->
|
||||
<!--<a href="/blog/tags/alamofire/" style="font-size:14px;color:#999">Alamofire</a>-->
|
||||
<!--<a href="/blog/tags/ble/" style="font-size:14px;color:#999">BLE</a>-->
|
||||
<!--<a href="/blog/tags/cocoapods/" style="font-size:15.67px;color:#8e8e8e">CocoaPods</a>-->
|
||||
<!--<a href="/blog/tags/framework/" style="font-size:14px;color:#999">Framework</a>-->
|
||||
<!--<a href="/blog/tags/gcd/" style="font-size:14px;color:#999">GCD</a>-->
|
||||
<!--<a href="/blog/tags/git/" style="font-size:17.33px;color:#828282">Git</a>-->
|
||||
<!--<a href="/blog/tags/hexo/" style="font-size:14px;color:#999">Hexo</a>-->
|
||||
<!--<a href="/blog/tags/objc/" style="font-size:19px;color:#777">ObjC</a>-->
|
||||
<!--<a href="/blog/tags/reactivecocoa/" style="font-size:14px;color:#999">ReactiveCocoa</a>-->
|
||||
<!--<a href="/blog/tags/runtime/" style="font-size:15.67px;color:#8e8e8e">Runtime</a>-->
|
||||
<!--<a href="/blog/tags/socket/" style="font-size:14px;color:#999">Socket</a>-->
|
||||
<!--<a href="/blog/tags/swift/" style="font-size:20.67px;color:#6c6c6c">Swift</a>-->
|
||||
<!--<a href="/blog/tags/ios/" style="font-size:24px;color:#555">iOS</a>-->
|
||||
<!--<a href="/blog/tags/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BC%96%E7%A8%8B/" style="font-size:14px;color:#999">响应式编程</a>-->
|
||||
<!--<a href="/blog/tags/%E5%BC%80%E6%BA%90%E5%BA%93/" style="font-size:22.33px;color:#606060">开源库</a>-->
|
||||
<!--<a href="/blog/tags/%E6%9E%B6%E6%9E%84/" style="font-size:14px;color:#999">架构</a>-->
|
||||
<!--<a href="/blog/tags/%E6%B2%99%E7%9B%92/" style="font-size:14px;color:#999">沙盒</a>-->
|
||||
<!--<a href="/blog/tags/%E7%BC%93%E5%AD%98/" style="font-size:14px;color:#999">缓存</a>-->
|
||||
<!--<a href="/blog/tags/%E8%A7%A3%E8%80%A6/" style="font-size:14px;color:#999">解耦</a>-->
|
||||
<!--<a href="/blog/tags/%E9%9D%99%E6%80%81%E5%BA%93/" style="font-size:14px;color:#999">静态库</a>-->
|
||||
<!--</div>-->
|
||||
<!--</section>-->
|
||||
<!--<section class="widget text shadow desktop">-->
|
||||
<!--<header>-->
|
||||
<!--<a href="https://github.com/xaoxuu/" target="_blank" rel="external nofollow noopener noreferrer">-->
|
||||
<!--<i class="fab fa-widget-github.svg fa-fw" aria-hidden="true"></i>-->
|
||||
<!--<span class="name">近期项目</span>-->
|
||||
<!--</a>-->
|
||||
<!--</header>-->
|
||||
<!--<div class="content">-->
|
||||
<!--<p>这些是近期更新的 iOS 开源库，如果喜欢请点个赞支持一下。</p>-->
|
||||
<!--<p>-->
|
||||
<!--<a href="https://github.com/xaoxuu/ProHUD" target="_blank" rel="external nofollow noopener noreferrer">-->
|
||||
<!--<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" data-original="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">-->
|
||||
<!--</a>-->
|
||||
<!--</p>-->
|
||||
<!--<p><a href="https://github.com/xaoxuu/ValueX" target="_blank" rel="external nofollow noopener noreferrer"><img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" data-original="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px"></a></p>-->
|
||||
<!--<p><a href="https://github.com/xaoxuu/Inspire" target="_blank" rel="external nofollow noopener noreferrer"><img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" data-original="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px"></a></p>-->
|
||||
<!--</div>-->
|
||||
<!--</section>-->
|
||||
</aside>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<footer class="clearfix">
|
||||
<br><br><br>
|
||||
<div class="copyright"><p><a href="http://blog.jmal.top">Copyright © 2020 journey magical AL</a></p></div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlBackTop from "@/components/backtop/AlBackTop";
|
||||
import AlLoading from "@/components/loading/AlLoading";
|
||||
import markdownApi from '@/api/markdown-api'
|
||||
import $ from 'jquery'
|
||||
export default {
|
||||
components: { AlBackTop },
|
||||
components: { AlBackTop, AlLoading },
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
pageTitle: "文章列表",
|
||||
showList: true,
|
||||
toolbars: null,
|
||||
toolbarsFlag: true,
|
||||
content:'',
|
||||
html:'',
|
||||
titleList: []
|
||||
articleList: [],
|
||||
backImageSrc: "~@/assets/img/widget-img1.jpg",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(777)
|
||||
if(this.$route.query.mark){
|
||||
this.getMarkDown()
|
||||
this.showList = false
|
||||
this.getMarkDown()
|
||||
|
||||
const that = this
|
||||
window.onresize = function() {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearCooike() {
|
||||
// let name = "scrollTop"
|
||||
// var exp = new Date();
|
||||
// exp.setTime(exp.getTime() - 1);
|
||||
// var cval=getCookie(name);
|
||||
// if(cval!=null){
|
||||
// document.cookie= name + "="+cval+";expires="+exp.toGMTString();
|
||||
// }
|
||||
document.cookie = "scrollTop=" + scrollPos
|
||||
alert(document.cookie)
|
||||
},
|
||||
getCookie (name){
|
||||
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
|
||||
if(arr=document.cookie.match(reg))
|
||||
return unescape(arr[2]);
|
||||
else
|
||||
return null;
|
||||
},
|
||||
onScroll() {
|
||||
// console.log(document.documentElement.scrollTop)
|
||||
},
|
||||
getMarkDown() {
|
||||
markdownApi.getMarkdown({
|
||||
mark: this.$route.query.mark
|
||||
}).then((res) => {
|
||||
this.pageTitle = res.data.name
|
||||
this.content = res.data.contentText
|
||||
const _this = this
|
||||
setTimeout(function () {
|
||||
if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
|
||||
var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
|
||||
document.documentElement.scrollTop = parseInt(arr[1]);
|
||||
document.body.scrollTop = parseInt(arr[1]);
|
||||
}
|
||||
},10)
|
||||
|
||||
this.$nextTick(()=>{ // DOM更新之后获取子元素
|
||||
|
||||
const hTag = document.querySelector("h1");
|
||||
if(hTag){
|
||||
this.pageTitle = hTag.innerText
|
||||
}
|
||||
|
||||
let a = $('.el-main').html().match(/<h1.*?<\/h1>|<h2.*?<\/h2>/g);
|
||||
if(a && a.length >0 ){
|
||||
a = a.splice(a.length/2,a.length)
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
a[i] = a[i].replace(/id="/g, 'href="#')
|
||||
if (a[i].indexOf('h2') != -1) {
|
||||
a[i] = '<li class="pl">' + a[i].replace(/<h2>|<\/h2>/g, '') + '</li>'
|
||||
} else {
|
||||
a[i] = '<li>' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
||||
}
|
||||
this.titleList.push(i)
|
||||
}
|
||||
$('.j-titleList').prepend(a)
|
||||
|
||||
//获取id数组
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
a[i] = a[i].replace(/.*?#(.*)".*/g, '$1')
|
||||
}
|
||||
$(window).on("scroll",function () {
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
if ($(window).scrollTop() > $('#' + a[i]).offset().top - 100 || $(this).scrollTop() + $(this).height() == $(document).height()) {
|
||||
$('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active');
|
||||
$('.j-bj').css('top', i * 44)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
let $root = $('html, body');
|
||||
$('.j-titleList li').on("click", function () {
|
||||
$root.animate({
|
||||
scrollTop: $($.attr(this.querySelector("a"), 'href')).offset().top - 20
|
||||
}, 400);
|
||||
return false
|
||||
});
|
||||
}
|
||||
|
||||
markdownApi.getMarkdown().then((res) => {
|
||||
this.articleList = res.data
|
||||
this.$nextTick(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
|
||||
// const doc = document.querySelector(".v-show-content");
|
||||
// document.addEventListener("scroll", _this.onScroll);
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "src/styles/markdown";
|
||||
|
||||
/deep/ .v-note-wrapper {
|
||||
position: unset;
|
||||
@import "src/styles/articles";
|
||||
.l_side {
|
||||
width: 285px;
|
||||
float: right;
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px){
|
||||
.el-main {
|
||||
padding: 20px 0px 20px 0px;
|
||||
@media screen and (max-width: 1440px){
|
||||
.l_side {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px){
|
||||
.el-main {
|
||||
padding: 20px;
|
||||
}
|
||||
.widget.blogger {
|
||||
transition: all .28s ease;
|
||||
-moz-transition: all .28s ease;
|
||||
-webkit-transition: all .28s ease;
|
||||
-o-transition: all .28s ease;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px){
|
||||
.el-main {
|
||||
padding: 20px;
|
||||
}
|
||||
.widget.desktop {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px){
|
||||
.el-main {
|
||||
padding: 20px;
|
||||
}
|
||||
.widget {
|
||||
z-index: 0;
|
||||
background: #fff;
|
||||
margin-top: 16px;
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px){
|
||||
.el-main {
|
||||
padding: 20px;
|
||||
}
|
||||
.articles {
|
||||
height: 100%;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -7,8 +7,8 @@ describe('Utils:validate', () => {
|
||||
expect(validUsername('xxxx')).toBe(false)
|
||||
})
|
||||
it('isExternal', () => {
|
||||
expect(isExternal('https://github.com/PanJiaChen/vue-element-admin')).toBe(true)
|
||||
expect(isExternal('http://github.com/PanJiaChen/vue-element-admin')).toBe(true)
|
||||
expect(isExternal('https://widget-github.svg.com/PanJiaChen/vue-element-admin')).toBe(true)
|
||||
expect(isExternal('http://widget-github.svg.com/PanJiaChen/vue-element-admin')).toBe(true)
|
||||
expect(isExternal('github.com/PanJiaChen/vue-element-admin')).toBe(false)
|
||||
expect(isExternal('/dashboard')).toBe(false)
|
||||
expect(isExternal('./dashboard')).toBe(false)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user