新增页脚社交图标&移动端侧边栏头像
This commit is contained in:
xugaoyi
parent
2887fd935e
commit
dad64786b2
|
|
@ -24,10 +24,6 @@ module.exports = {
|
|||
themeConfig: { // 主题配置
|
||||
nav,
|
||||
sidebar, // 侧边栏 'auto' | 自定义
|
||||
author: { // 文章默认的作者信息(此项非官方配置，是新增的一项配置)，可在md文件中另外指定此项配置
|
||||
name: 'Evan Xu', // 必需
|
||||
href: 'https://github.com/xugaoyi' // 非必需
|
||||
},
|
||||
sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
|
||||
logo: '/img/EB-logo.png', // 导航栏logo
|
||||
repo: 'xugaoyi/vuepress-theme-vdoing-blog', // 导航栏右侧生成Github链接
|
||||
|
|
@ -37,7 +33,42 @@ module.exports = {
|
|||
docsDir: 'docs', // 编辑的文件夹
|
||||
editLinks: true, // 编辑链接
|
||||
editLinkText: '编辑',
|
||||
// displayAllHeaders: true, // 默认值：false
|
||||
|
||||
// 以下配置为Vdoing主题新增配置
|
||||
author: { // 文章默认的作者信息，可在md文件中单独配置此信息
|
||||
name: 'Evan Xu', // 必需
|
||||
href: 'https://github.com/xugaoyi' // 可选的
|
||||
},
|
||||
blogger:{ // 博主信息，显示在首页侧边栏。以及社交信息显示在页面底部
|
||||
avatar: 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg',
|
||||
name: 'Evan Xu',
|
||||
slogan: '前端界的小学生',
|
||||
social:{ // 可选的，社交图标
|
||||
// iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选的，阿里图标库在线css文件地址，对于主题没有的图标可自由添加
|
||||
icons: [
|
||||
{
|
||||
iconClass: 'icon-youjian',
|
||||
title: '发邮件',
|
||||
link: 'mailto:894072666@qq.com'
|
||||
},
|
||||
{
|
||||
iconClass: 'icon-github',
|
||||
title: 'GitHub',
|
||||
link: 'https://github.com/xugaoyi'
|
||||
},
|
||||
{
|
||||
iconClass: 'icon-erji',
|
||||
title: '听音乐',
|
||||
link: 'https://music.163.com/#/playlist?id=755597173'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
footer:{ // 页脚信息
|
||||
createYear: 2019, // 博客创建年份
|
||||
copyrightInfo: 'Evan Xu', // 博客版权信息，支持html标签
|
||||
footerBgImg: '/img/footer.png' // 可选的，页脚背景图，只在首页显示
|
||||
}
|
||||
},
|
||||
plugins: [ // 插件
|
||||
[require('./plugins/love-me'), { // 鼠标点击爱心特效
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ body
|
|||
a,input,button
|
||||
outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);
|
||||
|
||||
.theme-default-content:not(.custom)
|
||||
word-wrap break-word
|
||||
|
||||
// 滚动条样式
|
||||
@media (min-width: $MQMobile)
|
||||
::-webkit-scrollbar
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@
|
|||
</ul>
|
||||
<div class="info">
|
||||
<div class="author iconfont icon-touxiang" v-if="articleInfo.author">
|
||||
<a :href="articleInfo.author.href" v-if="articleInfo.author.href" target="_blank" title="作者">{{articleInfo.author.name}}</a>
|
||||
<a :href="articleInfo.author.href" v-if="articleInfo.author.href" target="_blank" class="beLink" title="作者">{{articleInfo.author.name}}</a>
|
||||
<a v-else href="javascript:;" title="作者">{{articleInfo.author.name}}</a>
|
||||
</div>
|
||||
<div class="date iconfont icon-ic_calendar" v-if="articleInfo.date">
|
||||
<a href="javascript:;" title="创建时间">{{articleInfo.date}}</a>
|
||||
|
|
@ -85,7 +86,7 @@ function zero(d){
|
|||
.articleInfo-wrap
|
||||
margin-bottom -3.6rem!important
|
||||
padding-bottom 0!important
|
||||
color gray
|
||||
color #888
|
||||
.articleInfo
|
||||
overflow hidden
|
||||
.breadcrumbs
|
||||
|
|
@ -101,12 +102,13 @@ function zero(d){
|
|||
padding-right 5px
|
||||
&:after
|
||||
content '→'
|
||||
margin-left: 5px;
|
||||
margin-left 5px
|
||||
color #999
|
||||
&:last-child
|
||||
&:after
|
||||
content ''
|
||||
a
|
||||
color gray
|
||||
color #888
|
||||
&:hover
|
||||
color $accentColor
|
||||
.icon-home
|
||||
|
|
@ -125,12 +127,11 @@ function zero(d){
|
|||
&:before
|
||||
margin-right 3px
|
||||
a
|
||||
color gray
|
||||
color #888
|
||||
&:hover
|
||||
text-decoration none
|
||||
a.beLink
|
||||
&:hover
|
||||
color $accentColor
|
||||
&.date
|
||||
a
|
||||
text-decoration none
|
||||
&:hover
|
||||
color gray
|
||||
text-decoration underline
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div class="footer">
|
||||
<div class="icons" v-if="social && social.icons">
|
||||
<a
|
||||
:href="item.link"
|
||||
:title="item.title"
|
||||
:class="['iconfont', item.iconClass]"
|
||||
v-for="(item, index) in social.icons"
|
||||
:key="index"
|
||||
target="_blank"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<template v-if="footer">
|
||||
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing-blog" target="_blank" title="本站主题">♔♕Vdoing | </a>
|
||||
Copyright © {{ footer.createYear }}-{{ new Date().getFullYear() }}
|
||||
<span v-html="footer.copyrightInfo"></span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
social() {
|
||||
return this.$themeConfig.blogger && this.$themeConfig.blogger.social
|
||||
},
|
||||
footer() {
|
||||
return this.$themeConfig.footer
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='stylus' scoped>
|
||||
$mobileSidebarWidth = $sidebarWidth * 0.82
|
||||
|
||||
.icons
|
||||
margin-bottom 12px
|
||||
.iconfont
|
||||
padding 0 10px
|
||||
font-size 19px
|
||||
.footer
|
||||
padding 2.5rem
|
||||
text-align center
|
||||
color lighten($textColor, 25%)
|
||||
width calc(100% - $sidebarWidth)
|
||||
margin 0 0 2rem $sidebarWidth
|
||||
box-sizing border-box
|
||||
font-size .85rem
|
||||
@media (max-width: $MQNarrow)
|
||||
width calc(100% - $mobileSidebarWidth)
|
||||
margin-left $mobileSidebarWidth
|
||||
@media (max-width: $MQMobile)
|
||||
width auto
|
||||
margin-left 0
|
||||
.no-sidebar .footer
|
||||
width auto
|
||||
margin-left 0
|
||||
|
||||
</style>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="i-body" :style="'background-image: url('+ data.footer.bgImg || '' +')'">
|
||||
|
||||
|
||||
<div class="i-body" :style="'background-image: url('+ footerBgImg || '' +')'">
|
||||
<div class="banner">
|
||||
<main class="home">
|
||||
<header class="hero">
|
||||
|
|
@ -56,59 +54,36 @@
|
|||
|
||||
<div class="main-wrapper">
|
||||
<main class="home home-content" aria-labelledby="main-title">
|
||||
<!-- <header class="hero">
|
||||
<img v-if="data.heroImage" :src="$withBase(data.heroImage)" :alt="data.heroAlt || 'hero'" />
|
||||
|
||||
<h1 v-if="data.heroText !== null" id="main-title">{{ data.heroText || $title || 'Hello' }}</h1>
|
||||
|
||||
<p class="description">{{ data.tagline || $description || 'Welcome to your VuePress site' }}</p>
|
||||
|
||||
<p class="action" v-if="data.actionText && data.actionLink">
|
||||
<NavLink class="action-button" :item="actionLink" />
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="features" v-if="data.features && data.features.length">
|
||||
<div class="feature" v-for="(feature, index) in data.features" :key="index">
|
||||
<a :href="$withBase(feature.url)">
|
||||
<img class="image_title" :src="$withBase(feature.imgname)" :alt="feature.title" />
|
||||
<h2>{{ feature.title }}</h2>
|
||||
<p>{{ feature.details }}</p>
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
<Article pageMark="home" />
|
||||
<Content class="theme-default-content custom" />
|
||||
</main>
|
||||
|
||||
<aside class="info-wrapper" v-if="data.aside">
|
||||
<aside class="info-wrapper" v-if="blogger">
|
||||
<div class="avatar">
|
||||
<img :src="data.aside.avatar" alt="头像">
|
||||
<img :src="blogger.avatar" alt="头像">
|
||||
</div>
|
||||
<div class="icons" v-if="data.aside.icons">
|
||||
<div class="icons" v-if="blogger.social">
|
||||
<a
|
||||
:href="item.link"
|
||||
:title="item.title"
|
||||
:class="['iconfont', item.iconClass]"
|
||||
v-for="(item, index) in data.aside.icons"
|
||||
v-for="(item, index) in blogger.social.icons"
|
||||
:key="index"
|
||||
:style="{width: 100/data.aside.icons.length + '%'}"
|
||||
:style="{width: 100/blogger.social.icons.length + '%'}"
|
||||
target="_blank"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<div class="blogger">
|
||||
<span class="name">{{data.aside.blogger.name}}</span>
|
||||
<span class="name">{{blogger.name}}</span>
|
||||
<span class="slogan">
|
||||
{{data.aside.blogger.slogan}}
|
||||
{{blogger.slogan}}
|
||||
</span>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="footer" v-if="data.footer">
|
||||
Copyright © {{ data.footer.year }}-{{ new Date().getFullYear() }} {{ data.footer.content }}
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -117,6 +92,7 @@ import NavLink from "@theme/components/NavLink.vue";
|
|||
import BScroll from "@better-scroll/core"
|
||||
import Slide from "@better-scroll/slide"
|
||||
import Article from './Article.vue'
|
||||
import Footer from './Footer.vue'
|
||||
|
||||
BScroll.use(Slide)
|
||||
|
||||
|
|
@ -130,9 +106,6 @@ export default {
|
|||
mark: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
//vupress在打包时不能在beforeCreate(),created()内访问浏览器api（如window）
|
||||
},
|
||||
beforeMount(){
|
||||
this.isMQMobile = window.innerWidth < 720 ? true : false; // vupress在打包时不能在beforeCreate(),created()访问浏览器api（如window）
|
||||
|
||||
|
|
@ -147,11 +120,11 @@ export default {
|
|||
})
|
||||
|
||||
// 引入图标库
|
||||
if(this.data.aside && this.data.aside.iconfontCssFile) {
|
||||
if(this.blogger && this.blogger.social && this.blogger.social.iconfontCssFile ) {
|
||||
let linkElm = document.createElement("link")
|
||||
linkElm.setAttribute('rel', 'stylesheet');
|
||||
linkElm.setAttribute("type", "text/css")
|
||||
linkElm.setAttribute("href", this.data.aside.iconfontCssFile)
|
||||
linkElm.setAttribute("href", this.blogger.social.iconfontCssFile)
|
||||
document.head.appendChild(linkElm)
|
||||
}
|
||||
|
||||
|
|
@ -202,13 +175,18 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
components: { NavLink, Article },
|
||||
components: { NavLink, Article, Footer },
|
||||
|
||||
computed: {
|
||||
data() {
|
||||
return this.$page.frontmatter;
|
||||
},
|
||||
|
||||
blogger() {
|
||||
return this.$themeConfig.blogger
|
||||
},
|
||||
footerBgImg() {
|
||||
return this.$themeConfig.footer && this.$themeConfig.footer.footerBgImg
|
||||
},
|
||||
actionLink() {
|
||||
return {
|
||||
link: this.data.actionLink,
|
||||
|
|
@ -353,7 +331,7 @@ body .main-wrapper{
|
|||
.blogger{
|
||||
margin: 15px 0 10px 0;
|
||||
.name{
|
||||
font-size 25px
|
||||
font-size 24px
|
||||
display: block
|
||||
margin-bottom 10px
|
||||
}
|
||||
|
|
@ -477,13 +455,6 @@ body .main-wrapper{
|
|||
to{transform:translate(0,8px)}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 2.5rem;
|
||||
margin-bottom 2rem;
|
||||
text-align: center;
|
||||
color: lighten($textColor, 25%);
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1025px){
|
||||
.i-body{
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<main class="page">
|
||||
<slot name="top" />
|
||||
|
||||
<ArticleInfo class="theme-default-content" v-if="isArticle()" />
|
||||
<div>
|
||||
<main class="page">
|
||||
<slot name="top" />
|
||||
|
||||
<ArticleInfo class="theme-default-content" v-if="isArticle()" />
|
||||
<component class="theme-default-content" v-if="pageComponent" :is="pageComponent" />
|
||||
<Content class="theme-default-content" />
|
||||
<PageEdit />
|
||||
<PageNav v-bind="{ sidebarItems }" />
|
||||
<Article />
|
||||
|
||||
<component class="theme-default-content" v-if="pageComponent" :is="pageComponent" />
|
||||
<slot name="bottom" />
|
||||
</main>
|
||||
|
||||
<Content class="theme-default-content" />
|
||||
<PageEdit />
|
||||
|
||||
<PageNav v-bind="{ sidebarItems }" />
|
||||
|
||||
<Article />
|
||||
|
||||
<slot name="bottom" />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -24,9 +24,10 @@ import ArticleInfo from './ArticleInfo.vue'
|
|||
import Catalogue from './Catalogue.vue'
|
||||
import Article from './Article.vue'
|
||||
import Timeline from './Timeline.vue'
|
||||
import Footer from './Footer.vue'
|
||||
|
||||
export default {
|
||||
components: { PageEdit, PageNav, ArticleInfo, Catalogue, Article, Timeline},
|
||||
components: { PageEdit, PageNav, ArticleInfo, Catalogue, Article, Timeline, Footer},
|
||||
props: ['sidebarItems'],
|
||||
computed: {
|
||||
pageComponent () {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<aside class="sidebar">
|
||||
<div class="blogger" v-if="blogger">
|
||||
<img :src="blogger.avatar">
|
||||
<div class="blogger-info">
|
||||
<h3>{{blogger.name}}</h3>
|
||||
|
||||
<div class="icons" v-if="blogger.social">
|
||||
<a
|
||||
:href="item.link"
|
||||
:title="item.title"
|
||||
:class="['iconfont', item.iconClass]"
|
||||
v-for="(item, index) in blogger.social.icons"
|
||||
:key="index"
|
||||
target="_blank"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<span v-else>
|
||||
{{blogger.slogan}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<NavLinks/>
|
||||
<slot name="top"/>
|
||||
<SidebarLinks :depth="0" :items="items"/>
|
||||
<slot name="bottom"/>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SidebarLinks from '@theme/components/SidebarLinks.vue'
|
||||
import NavLinks from '@theme/components/NavLinks.vue'
|
||||
|
||||
export default {
|
||||
name: 'Sidebar',
|
||||
|
||||
components: { SidebarLinks, NavLinks },
|
||||
|
||||
props: ['items'],
|
||||
|
||||
computed: {
|
||||
blogger() {
|
||||
return this.$themeConfig.blogger
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.sidebar
|
||||
ul
|
||||
padding 0
|
||||
margin 0
|
||||
list-style-type none
|
||||
a
|
||||
display inline-block
|
||||
.nav-links
|
||||
display none
|
||||
border-bottom 1px solid $borderColor
|
||||
padding 0.5rem 0 0.75rem 0
|
||||
a
|
||||
font-weight 600
|
||||
.nav-item, .repo-link
|
||||
display block
|
||||
line-height 1.25rem
|
||||
font-size 1.1em
|
||||
padding 0.5rem 0 0.5rem 1.5rem
|
||||
& > .sidebar-links
|
||||
padding 1.5rem 0
|
||||
& > li > a.sidebar-link
|
||||
font-size 1.1em
|
||||
line-height 1.7
|
||||
font-weight bold
|
||||
& > li:not(:first-child)
|
||||
margin-top .75rem
|
||||
.blogger
|
||||
display none
|
||||
img
|
||||
width 60px
|
||||
height 60px
|
||||
border-radius 5px
|
||||
margin .75rem .75rem 0
|
||||
.blogger-info
|
||||
flex 1
|
||||
h3
|
||||
margin .95rem 0 .7rem
|
||||
font-size 1.1rem
|
||||
.icons .iconfont
|
||||
font-size 1.2rem
|
||||
padding-right .6rem
|
||||
color #777
|
||||
@media (max-width: $MQMobile)
|
||||
.sidebar
|
||||
.blogger
|
||||
display flex
|
||||
.nav-links
|
||||
display block
|
||||
.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
|
||||
top calc(1rem - 2px)
|
||||
& > .sidebar-links
|
||||
padding 1rem 0
|
||||
</style>
|
||||
|
|
@ -35,10 +35,10 @@ aside:
|
|||
blogger:
|
||||
name: Evan Xu
|
||||
slogan: 前端界的小学生
|
||||
footer:
|
||||
year: 2019
|
||||
content: Evan Xu
|
||||
bgImg: /img/footer.png
|
||||
# footer: // 此项配置移动到config.js
|
||||
# year: 2019 # 博客创建年份
|
||||
# content: Evan Xu # 支持html标签
|
||||
# # bgImg: /img/footer.png
|
||||
---
|
||||
|
||||
## 关于
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Prop 验证 与 非 Prop 的 Attribute
|
|||
date: 2020-02-15 10:49:04
|
||||
permalink: /pages/a3080f60f6596eb4
|
||||
---
|
||||
## Prop 验证 与 非 Prop 的 Attribute
|
||||
# Prop 验证 与 非 Prop 的 Attribute
|
||||
|
||||
## Prop 验证
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue