修改：网站样式
This commit is contained in:
jmal
parent
6ee799c842
commit
345be49633
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -64,19 +64,19 @@
|
||||
this.throttledScrollHandler = throttle(300, this.onScroll);
|
||||
this.container.addEventListener('scroll', this.throttledScrollHandler);
|
||||
|
||||
window.onbeforeunload = function () {
|
||||
let scrollPos;
|
||||
if (typeof window.pageYOffset != 'undefined') {
|
||||
scrollPos = window.pageYOffset;
|
||||
}
|
||||
else if (typeof document.compatMode != 'undefined' && document.compatMode !== 'BackCompat') {
|
||||
scrollPos = document.documentElement.scrollTop;
|
||||
}
|
||||
else if (typeof document.body != 'undefined') {
|
||||
scrollPos = document.body.scrollTop;
|
||||
}
|
||||
document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
|
||||
}
|
||||
// window.onbeforeunload = function () {
|
||||
// let scrollPos;
|
||||
// if (typeof window.pageYOffset != 'undefined') {
|
||||
// scrollPos = window.pageYOffset;
|
||||
// }
|
||||
// else if (typeof document.compatMode != 'undefined' && document.compatMode !== 'BackCompat') {
|
||||
// scrollPos = document.documentElement.scrollTop;
|
||||
// }
|
||||
// else if (typeof document.body != 'undefined') {
|
||||
// scrollPos = document.body.scrollTop;
|
||||
// }
|
||||
// document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
|
||||
// }
|
||||
|
||||
},
|
||||
|
||||
@ -103,6 +103,9 @@
|
||||
this.scrollToTop();
|
||||
this.$emit('click', e);
|
||||
},
|
||||
nextPageScrollTop() {
|
||||
this.el.scrollTop = document.body.clientHeight * 0.7 - 150
|
||||
},
|
||||
scrollToTop() {
|
||||
const el = this.el;
|
||||
const beginTime = Date.now();
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<section class="app-main">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<router-view :key="key" />
|
||||
<keep-alive v-if="$route.meta.keepAlive">
|
||||
<router-view :key="key" />
|
||||
</keep-alive>
|
||||
<router-view v-else :key="key" />
|
||||
</transition>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -200,6 +200,8 @@ export const constantRoutes = [
|
||||
path: '',
|
||||
name: 'article',
|
||||
component: () => import('@/views/public/article/index'),
|
||||
hidden: true,
|
||||
meta: { keepAlive: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -209,7 +211,7 @@ export const constantRoutes = [
|
||||
children: [
|
||||
{
|
||||
path: `${document.location.protocol}//${window.location.host}/articles`,
|
||||
meta: { title: '关联博客', icon: 'link' }
|
||||
meta: { title: '关联博客', icon: 'link', keepAlive: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -261,7 +263,7 @@ export const constantRoutes = [
|
||||
path: '',
|
||||
name: 'articles',
|
||||
component: () => import('@/views/public/articles/index'),
|
||||
meta: { title: '文档列表', icon: 'md-list' }
|
||||
meta: { title: '文档列表', icon: 'md-list', keepAlive: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -330,7 +332,13 @@ export const dynamicRouters = [
|
||||
|
||||
const createRouter = () => new Router({
|
||||
mode: 'history', // require service support
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
// scrollBehavior (to, from, savedPosition) {
|
||||
// if (savedPosition) {
|
||||
// return savedPosition
|
||||
// } else {
|
||||
// return { x: 0, y: 0 }
|
||||
// }
|
||||
// },
|
||||
routes: constantRoutes
|
||||
})
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
@media not all, screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all {
|
||||
.blog-description.font-mono {
|
||||
font-family: Consolas,Menlo,Monaco,"lucida console","Liberation Mono","Courier New","andale mono",monospaceX,monospace,sans-serif;
|
||||
font-size: 1.1125rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,9 +76,7 @@
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.navbar>.container-fluid {
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
@ -88,6 +86,10 @@
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
//.blog-description {
|
||||
// font-size: .8125rem;
|
||||
//}
|
||||
|
||||
.cover-wrapper .cover .cover-body {
|
||||
padding-bottom: 68px;
|
||||
.title {
|
||||
@ -102,9 +104,7 @@
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.navbar>.container-fluid {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
||||
@ -218,6 +218,12 @@
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.animateLeft {
|
||||
transform: translateX(-10rem);
|
||||
}
|
||||
.animateRight {
|
||||
transform: translateX(0rem);
|
||||
}
|
||||
|
||||
.body-wrapper {
|
||||
position: relative;
|
||||
@ -500,19 +506,19 @@
|
||||
/deep/ .right-menu > div.titleList {
|
||||
.h-1 {
|
||||
padding-left: 10px;
|
||||
font-size: 1.3rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.h-2 {
|
||||
padding-left: 20px;
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.h-3 {
|
||||
padding-left: 30px;
|
||||
font-size: 1.125rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.h-4 {
|
||||
padding-left: 40px;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.925rem;
|
||||
}
|
||||
.h-5 {
|
||||
padding-left: 50px;
|
||||
@ -663,10 +669,11 @@
|
||||
|
||||
#toggle-nav {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: .625rem;
|
||||
left: .625rem;
|
||||
z-index: 891;
|
||||
font-size: .75rem;
|
||||
position: fixed;
|
||||
z-index: 899;
|
||||
-webkit-transition: 0.5s ease all;
|
||||
-moz-transition: 0.5s ease all;
|
||||
-ms-transition: 0.5s ease all;
|
||||
@ -675,10 +682,10 @@
|
||||
}
|
||||
|
||||
#sidebar-nav {
|
||||
width: 20rem;
|
||||
width: 17.5rem;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: -20rem;
|
||||
position: fixed;
|
||||
left: -17.5rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
@ -748,5 +755,9 @@
|
||||
}
|
||||
#toggle-nav {
|
||||
display: block;
|
||||
.nav-button {
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: #ffffffb3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-wechat-title="'编辑'+filename">
|
||||
<dir-tree ref="dirTree">
|
||||
<el-button slot="footer" size="small" type="primary" @click="confirmSelectDir">确 定</el-button>
|
||||
</dir-tree>
|
||||
|
||||
@ -53,9 +53,14 @@ export default {
|
||||
setting.operatingButtons.split(/[\n]/).forEach(button => {
|
||||
let operatingButton = {}
|
||||
const splitIndex = button.indexOf(":")
|
||||
operatingButton.fontHtml = button.substring(0, splitIndex)
|
||||
const ihtml = button.substring(0, splitIndex)
|
||||
// 获取标签里的内容
|
||||
let regLabel = /[^><]+(?=<\/i>)/img
|
||||
const title = ihtml.match(regLabel)
|
||||
operatingButton.title = title ? title[0] : ''
|
||||
// 去掉标签里的内容
|
||||
operatingButton.fontHtml = ihtml.replace(regLabel, '')
|
||||
operatingButton.url = button.substring(splitIndex + 1, button.length)
|
||||
operatingButton.title = button.match(/fa-(\S*?)"/)[1]
|
||||
this.operatingButtons.push(operatingButton)
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="toggle-nav">
|
||||
<el-button round @click="toggle">MENU</el-button>
|
||||
<el-button class="nav-button" round size="small" @click="toggle">MENU</el-button>
|
||||
</div>
|
||||
<div id="sidebar-nav">
|
||||
<div class="author navbar-header">
|
||||
@ -59,9 +59,14 @@ export default {
|
||||
setting.operatingButtons.split(/[\n]/).forEach(button => {
|
||||
let operatingButton = {}
|
||||
const splitIndex = button.indexOf(":")
|
||||
operatingButton.fontHtml = button.substring(0, splitIndex)
|
||||
const ihtml = button.substring(0, splitIndex)
|
||||
// 获取标签里的内容
|
||||
let regLabel = /[^><]+(?=<\/i>)/img
|
||||
const title = ihtml.match(regLabel)
|
||||
operatingButton.title = title ? title[0] : ''
|
||||
// 去掉标签里的内容
|
||||
operatingButton.fontHtml = ihtml.replace(regLabel, '')
|
||||
operatingButton.url = button.substring(splitIndex + 1, button.length)
|
||||
operatingButton.title = button.match(/fa-(\S*?)"/)[1]
|
||||
this.operatingButtons.push(operatingButton)
|
||||
})
|
||||
}
|
||||
@ -77,9 +82,9 @@ export default {
|
||||
toggleNav.style.transform = ''
|
||||
sidebarNav.style.transform = ''
|
||||
} else {
|
||||
body.style.transform = 'translateX(20rem)'
|
||||
toggleNav.style.transform = 'translateX(17.5rem)'
|
||||
sidebarNav.style.transform = 'translateX(20rem)'
|
||||
body.style.transform = 'translateX(17.5rem)'
|
||||
toggleNav.style.transform = 'translateX(14.5rem)'
|
||||
sidebarNav.style.transform = 'translateX(17.5rem)'
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<al-back-top></al-back-top>
|
||||
|
||||
<!--SideBar menu-->
|
||||
<SidebarNav/>
|
||||
<SidebarNav :setting="userSetting"/>
|
||||
|
||||
<div id="body">
|
||||
<div id="top" class="animateIn">
|
||||
@ -20,6 +20,9 @@
|
||||
<div class="blog-description font-mono">
|
||||
<a itemprop="name" href="https://www.jmal.top/author/1/" rel="author">{{file.username}}</a>
|
||||
· {{file.uploadDate}}
|
||||
<span v-if="isEditor">
|
||||
· <a :href="'/markdown/editor?id='+file.id" target="_blank">编辑</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -85,7 +88,8 @@ export default {
|
||||
tocMaxHeight: 500,
|
||||
befterScrollTop: 0,
|
||||
maxMenuHeight: document.documentElement.clientHeight - 155,
|
||||
top: 70
|
||||
top: 70,
|
||||
isEditor : false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -99,6 +103,17 @@ export default {
|
||||
that.maxMenuHeight= document.documentElement.clientHeight - 155
|
||||
}
|
||||
},
|
||||
// beforeRouteLeave(to, from, next) {
|
||||
// to.meta.keepAlive = true;
|
||||
// next();
|
||||
// },
|
||||
activated() {
|
||||
console.log('activated', 'article')
|
||||
},
|
||||
deactivated() {
|
||||
console.log('deactivated')
|
||||
// this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||||
},
|
||||
methods: {
|
||||
getSetting() {
|
||||
getSetting({userId: this.$store.state.user.userId}).then((res) => {
|
||||
@ -130,6 +145,9 @@ export default {
|
||||
mark: this.$route.query.mark
|
||||
}).then((res) => {
|
||||
this.file = res.data
|
||||
if(this.file.userId === this.$store.state.user.userId) {
|
||||
this.isEditor = true
|
||||
}
|
||||
const filename = res.data.name
|
||||
this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1)
|
||||
this.content = res.data.contentText
|
||||
@ -156,6 +174,8 @@ export default {
|
||||
a[i] = a[i].replace(/id="/g, 'href="#')
|
||||
if (i ===0 && a[i].indexOf('h1') !== -1) {
|
||||
a[i] = '<li first class="h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
||||
}else if (a[i].indexOf('h1') !== -1) {
|
||||
a[i] = '<li first class="pl h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
||||
}else if (a[i].indexOf('h2') !== -1) {
|
||||
a[i] = '<li class="pl h-2">' + a[i].replace(/<h2>|<\/h2>/g, '') + '</li>'
|
||||
}else if (a[i].indexOf('h3') !== -1) {
|
||||
@ -181,13 +201,27 @@ export default {
|
||||
let beforeScrollTop = document.documentElement.scrollTop;
|
||||
let fn = fn || function (direction) {
|
||||
// 判断是上滑显示,下滑隐藏
|
||||
const top = $('#top')
|
||||
const toogleNav = $('#toggle-nav')
|
||||
|
||||
const body = document.getElementById("body")
|
||||
|
||||
if(direction === 'down'){
|
||||
$('#top').removeClass('animateIn')
|
||||
$('#top').addClass('animateOut')
|
||||
top.removeClass('animateIn')
|
||||
top.addClass('animateOut')
|
||||
toogleNav.removeClass('animateRight')
|
||||
toogleNav.addClass('animateLeft')
|
||||
if(body.style.transform.length > 0) {
|
||||
document.getElementById("sidebar-nav").style.transform = ''
|
||||
body.style.transform = ''
|
||||
document.getElementById("toggle-nav").style.transform = ''
|
||||
}
|
||||
}
|
||||
if(direction === 'up'){
|
||||
$('#top').removeClass('animateOut')
|
||||
$('#top').addClass('animateIn')
|
||||
top.removeClass('animateOut')
|
||||
top.addClass('animateIn')
|
||||
toogleNav.removeClass('animateLeft')
|
||||
toogleNav.addClass('animateRight')
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<transition name="fade">
|
||||
<al-loading v-if="isLoading"></al-loading>
|
||||
</transition>
|
||||
<al-back-top></al-back-top>
|
||||
<al-back-top ref="alBackTop"></al-back-top>
|
||||
|
||||
<SidebarNav :setting="userSetting"/>
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
<section class="meta">
|
||||
<div class="meta" id="header-meta">
|
||||
<h2 class="title">
|
||||
<a :href="$route.path+'/article?mark='+article.id">{{article.name}}</a>
|
||||
<router-link :to="$route.path+'/article?mark='+article.id">{{article.name}}</router-link>
|
||||
</h2>
|
||||
<div class="new-meta-box">
|
||||
<div class="new-meta-item author">
|
||||
@ -46,7 +46,7 @@
|
||||
<div class="new-meta-item date">
|
||||
<a class="notlink">
|
||||
<svg-icon icon-class="release"></svg-icon>
|
||||
<p>发布于 {{article.uploadTime}}</p>
|
||||
<p>发布于 {{article.uploadDate}}</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -54,15 +54,25 @@
|
||||
</div>
|
||||
</section>
|
||||
<section class="article typo">
|
||||
<a :href="$route.path+'/article?mark='+article.id">
|
||||
<router-link :to="$route.path+'/article?mark='+article.id">
|
||||
<div class="article-entry" itemprop="articleBody">
|
||||
<p><img class="blog-background articles-list" :src="article.cover" onerror="this.src='https://images.unsplash.com/photo-1582230587856-7fec01506148?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'"/></p>
|
||||
<p><img v-if="article.cover" class="blog-background articles-list" :src="article.cover" onerror="this.src='https://images.unsplash.com/photo-1582230587856-7fec01506148?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'"/></p>
|
||||
</div>
|
||||
</a>
|
||||
</router-link>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<el-pagination
|
||||
style="text-align: center"
|
||||
:hide-on-single-page="true"
|
||||
:current-page.sync="pagination.pageIndex"
|
||||
:page-sizes="pagination.pageSizes"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
@current-change="currentChange"
|
||||
layout="prev, pager, next">
|
||||
</el-pagination>
|
||||
</el-main>
|
||||
</div>
|
||||
</div>
|
||||
@ -92,14 +102,40 @@ import { getSetting } from '@/api/user'
|
||||
articleList: [],
|
||||
backImageSrc: "~@/assets/img/widget-img1.jpg",
|
||||
userSetting: {},
|
||||
pagination: {
|
||||
pageIndex: this.$route.query.page ? parseInt(decodeURI(this.$route.query.page)) : 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
},
|
||||
scrollTop: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getSetting()
|
||||
this.getMarkDown()
|
||||
const that = this
|
||||
window.onresize = function() {
|
||||
}
|
||||
console.log('mounted')
|
||||
},
|
||||
// beforeRouteEnter (to, from, next) {
|
||||
// console.log('beforeRouteEnter')
|
||||
// next(vm => {
|
||||
// console.log(vm.scrollTop)
|
||||
// document.body.scrollTop = vm.scrollTop
|
||||
// })
|
||||
// },
|
||||
// // beforeRouteUpdate (to, from, next) {
|
||||
// // console.log('beforeRouteUpdate')
|
||||
// // next()
|
||||
// // },
|
||||
// beforeRouteLeave(to, from, next) {
|
||||
// to.meta.keepAlive = false;
|
||||
// next();
|
||||
// },
|
||||
activated() {
|
||||
console.log('activated',this.scrollTop)
|
||||
},
|
||||
deactivated() {
|
||||
console.log('deactivated')
|
||||
// this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||||
},
|
||||
methods: {
|
||||
getSetting() {
|
||||
@ -131,13 +167,18 @@ import { getSetting } from '@/api/user'
|
||||
else
|
||||
return null;
|
||||
},
|
||||
onScroll() {
|
||||
currentChange() {
|
||||
this.$router.push(`?page=${this.pagination.pageIndex}`)
|
||||
this.getMarkDown()
|
||||
this.$refs.alBackTop.nextPageScrollTop()
|
||||
},
|
||||
getMarkDown() {
|
||||
markdownApi.getMarkdown().then((res) => {
|
||||
markdownApi.getMarkdown({pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize}).then((res) => {
|
||||
this.articleList = res.data
|
||||
this.pagination.total = res.count
|
||||
this.$nextTick(() => {
|
||||
this.isLoading = false
|
||||
this.pagination.pageIndex = parseInt(decodeURI(this.$route.query.page))
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
@ -27,8 +27,14 @@
|
||||
<span class="instruction">配置网站的 Logo，该选项仅作用于顶部导航条</span>
|
||||
|
||||
<div class="config-itme-label">导航栏操作按钮：</div>
|
||||
<el-input :autosize="{ minRows: 4, maxRows: 6}" type="textarea" width="100%" v-model="form.operatingButtons"></el-input>
|
||||
<span class="instruction">一个操作按钮包含两个部分：<a href="https://fontawesome.com/icons?d=gallery" target="_blank">Font-awesome</a>图标标签和链接，使用'：'隔开。列如：{{example}}:https://github.com/jamebal</span>
|
||||
<el-input type="textarea" width="100%" v-model="form.operatingButtons" :autosize="{ minRows: 4, maxRows: 6 }" ></el-input>
|
||||
<span class="instruction">
|
||||
一个操作按钮包含两个部分：
|
||||
<a href="https://fontawesome.com/icons?d=gallery" target="_blank">Font-awesome</a>
|
||||
图标标签和链接，使用'：'隔开(标签里的内容为该图标的简述)。
|
||||
<br>
|
||||
列如：{{example}}:https://github.com/jamebal (建议不超过5项)
|
||||
</span>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
@ -46,7 +52,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['1'],
|
||||
example: '<i class="fab fa-github"></i>',
|
||||
example: '<i class="fab fa-github">github</i>',
|
||||
form: {
|
||||
backgroundSite: '',
|
||||
backgroundTextSite: '',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user