优化右侧导航布局 & 修复bug
This commit is contained in:
xugaoyi
parent
615b5d57f3
commit
8a2f4071c0
|
|
@ -4,15 +4,6 @@ h1
|
|||
img
|
||||
width 1.6rem
|
||||
|
||||
// 评论区样式
|
||||
#vuepress-plugin-comment
|
||||
max-width $contentWidth
|
||||
margin 0 auto
|
||||
padding 2rem 2.5rem
|
||||
@media (max-width: $MQNarrow)
|
||||
padding 2rem
|
||||
@media (max-width: $MQMobileNarrow)
|
||||
padding 1.5rem
|
||||
|
||||
// 评论区颜色重置
|
||||
.gt-container
|
||||
|
|
|
|||
|
|
@ -25,5 +25,5 @@ $badgeTipColor = #11A8CD
|
|||
|
||||
// 自定义 布局
|
||||
$sidebarWidth = 18rem
|
||||
$contentWidth = 850px
|
||||
$contentWidth = 830px
|
||||
$rightMenuWidth = 280px // 右侧菜单
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
| <img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg" class="headImg">[麋鹿鲁哟](https://www.cnblogs.com/miluluyo/) | 大道至简，知易行难。`#Web` `#二次元` `#美少女` |
|
||||
| <img src="https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png" class="headImg">[xaoxuu](https://xaoxuu.com) | `#iOS` [`#Volantis主题作者`](https://volantis.js.org/) |
|
||||
|
||||
<br><br><br>
|
||||
<br><br>
|
||||
|
||||
## 友链申请
|
||||
#### 友链申请
|
||||
|
||||
与我[ 联系 ](/about/#联系)或者 在本页面评论区留言您的友链信息，格式：
|
||||
|
||||
|
|
|
|||
|
|
@ -82,11 +82,11 @@ function zero(d){
|
|||
</script>
|
||||
|
||||
<style lang='stylus' scoped>
|
||||
@require '../styles/wrapper.styl'
|
||||
|
||||
.articleInfo-wrap
|
||||
// margin-bottom -3.6rem!important
|
||||
@extend $wrapper
|
||||
margin: 2.6rem 0 -3.1rem 0
|
||||
// padding-top 0!important
|
||||
color #888
|
||||
.articleInfo
|
||||
overflow hidden
|
||||
|
|
|
|||
|
|
@ -4,18 +4,20 @@
|
|||
<slot name="top" />
|
||||
|
||||
<div class="theme-vdoing-wrapper">
|
||||
<RightMenu v-if="showRightMenu !== false"/>
|
||||
|
||||
<ArticleInfo v-if="isArticle()" />
|
||||
<component class="theme-vdoing-content" v-if="pageComponent" :is="pageComponent" />
|
||||
<Content class="theme-vdoing-content" />
|
||||
|
||||
|
||||
<div class="content-wrapper">
|
||||
<RightMenu v-if="showRightMenu"/>
|
||||
<Content class="theme-vdoing-content" />
|
||||
</div>
|
||||
|
||||
<PageEdit />
|
||||
<PageNav v-bind="{ sidebarItems }" />
|
||||
<UpdateArticle />
|
||||
</div>
|
||||
|
||||
<PageEdit />
|
||||
<PageNav v-bind="{ sidebarItems }" />
|
||||
|
||||
<UpdateArticle />
|
||||
|
||||
<slot name="bottom" />
|
||||
</main>
|
||||
|
||||
|
|
@ -38,7 +40,7 @@ export default {
|
|||
props: ['sidebarItems'],
|
||||
computed: {
|
||||
showRightMenu(){
|
||||
return this.$frontmatter && this.$frontmatter.sidebar && this.$frontmatter.sidebar !== false
|
||||
return this.$page.headers && (this.$frontmatter && this.$frontmatter.sidebar && this.$frontmatter.sidebar !== false) !== false
|
||||
},
|
||||
pageComponent () {
|
||||
return this.$frontmatter.pageComponent ? this.$frontmatter.pageComponent.name : false
|
||||
|
|
@ -57,49 +59,55 @@ export default {
|
|||
.page
|
||||
padding-bottom 2rem
|
||||
display block
|
||||
>*
|
||||
@extend $vdoing-wrapper
|
||||
|
||||
.theme-vdoing-wrapper
|
||||
max-width $contentWidth
|
||||
margin 0 auto
|
||||
padding 2rem 2.5rem
|
||||
position relative
|
||||
@media (max-width: $MQNarrow)
|
||||
padding 2rem
|
||||
@media (max-width: $MQMobileNarrow)
|
||||
padding 1.5rem
|
||||
.theme-vdoing-content
|
||||
padding 0!important
|
||||
&>.theme-vdoing-content
|
||||
margin 0
|
||||
.content-wrapper
|
||||
position relative
|
||||
|
||||
// 右侧菜单的自适应
|
||||
/**
|
||||
* 右侧菜单的自适应
|
||||
*/
|
||||
@media (min-width: 1680px) // 在大屏时
|
||||
.theme-vdoing-wrapper,.page-edit,.page-nav,#vuepress-plugin-comment,.article:not(.article-home)
|
||||
transition: all .2s!important
|
||||
.have-rightmenu // 有右侧菜单时
|
||||
.theme-vdoing-wrapper,.page-edit,.page-nav,#vuepress-plugin-comment,.article:not(.article-home)
|
||||
transform translateX(-($rightMenuWidth / 2.5))
|
||||
.page
|
||||
.theme-vdoing-wrapper
|
||||
max-width ($contentWidth + $rightMenuWidth)
|
||||
>*:not(.theme-vdoing-wrapper)
|
||||
transform translateX(-($rightMenuWidth / 2))
|
||||
|
||||
@media (min-width: 1360px) and (max-width: 1679px)
|
||||
@media (min-width: 1520px) and (max-width: 1679px)
|
||||
.have-rightmenu
|
||||
.page
|
||||
transition: all 0s!important
|
||||
.theme-vdoing-wrapper
|
||||
max-width ($contentWidth + $rightMenuWidth)
|
||||
&.sidebar-open
|
||||
.theme-vdoing-wrapper,.page-edit,.page-nav,#vuepress-plugin-comment
|
||||
.page >*
|
||||
margin 0 0 0 2rem
|
||||
.article:not(.article-home)
|
||||
margin 0 0 0 4rem
|
||||
@media (min-width: 1360px) and (max-width: 1519px)
|
||||
.have-rightmenu
|
||||
.theme-vdoing-wrapper,.page-edit,.page-nav,#vuepress-plugin-comment,.article:not(.article-home)
|
||||
max-width ($contentWidth - 200px)
|
||||
.right-menu-wrapper
|
||||
margin-left ($contentWidth - 180px)
|
||||
|
||||
@media (max-width: 1359px) // 小于等于1359时隐藏右侧锚点菜单
|
||||
@media (max-width: 1519px)
|
||||
.right-menu-wrapper
|
||||
display none
|
||||
@media (min-width: 1360px) // 大于等于1360时隐藏左侧锚点菜单
|
||||
@media (min-width: 1520px)
|
||||
.sidebar .sidebar-sub-headers
|
||||
display none
|
||||
|
||||
|
||||
// @media (min-width: 1360px) and (max-width: 1519px)
|
||||
// .have-rightmenu
|
||||
// .page
|
||||
// .theme-vdoing-wrapper
|
||||
// max-width ($contentWidth + $rightMenuWidth - 200px)
|
||||
// .theme-vdoing-content,.page-edit,.page-nav,#vuepress-plugin-comment,.article:not(.article-home)
|
||||
// max-width ($contentWidth - 200px)
|
||||
// .right-menu-wrapper
|
||||
// // margin-left ($contentWidth - 180px)
|
||||
|
||||
// @media (max-width: 1359px) // 小于等于1359时隐藏右侧锚点菜单
|
||||
// .right-menu-wrapper
|
||||
// display none
|
||||
// @media (min-width: 1360px) // 大于等于1360时隐藏左侧锚点菜单
|
||||
// .sidebar .sidebar-sub-headers
|
||||
// display none
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -46,8 +46,8 @@ export default {
|
|||
<style lang='stylus'>
|
||||
.right-menu-wrapper
|
||||
width $rightMenuWidth
|
||||
height 0
|
||||
margin 0 0 0 ($contentWidth + 20px)
|
||||
float right
|
||||
margin-right -20px
|
||||
position sticky
|
||||
top 0
|
||||
font-size .9rem
|
||||
|
|
|
|||
|
|
@ -61,12 +61,12 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang='stylus'>
|
||||
@require '../styles/wrapper.styl'
|
||||
.article
|
||||
max-width $contentWidth
|
||||
margin 0 auto
|
||||
@extend $wrapper
|
||||
padding 2rem 2.5rem 0 2.5rem
|
||||
&:not(.article-home)
|
||||
margin 2rem auto 0 auto
|
||||
margin-top 2rem
|
||||
border 8px solid rgba(160,160,160,.1)
|
||||
box-sizing border-box
|
||||
@media (max-width: $MQNarrow)
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ body
|
|||
color $textColor
|
||||
|
||||
.page
|
||||
transition all .2s ease
|
||||
transition padding .2s ease
|
||||
// padding-left $sidebarWidth
|
||||
padding-left 0
|
||||
|
||||
|
|
@ -83,7 +83,7 @@ body
|
|||
overflow-y auto
|
||||
transform translateX(-100%)
|
||||
transition transform .2s ease
|
||||
@media (max-width: $MQNarrow)
|
||||
@media (max-width: $MQMobile)
|
||||
background-color var(--bg)
|
||||
|
||||
{$contentClass}:not(.custom)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
$wrapper
|
||||
$vdoing-wrapper
|
||||
max-width $contentWidth
|
||||
margin 0 auto
|
||||
padding 2rem 2.5rem
|
||||
|
|
@ -6,4 +6,6 @@ $wrapper
|
|||
padding 2rem
|
||||
@media (max-width: $MQMobileNarrow)
|
||||
padding 1.5rem
|
||||
$wrapper
|
||||
max-width $contentWidth
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ function main() {
|
|||
let dataStr = fs.readFileSync(file.filePath, 'utf8');// 读取每个md文件内容
|
||||
|
||||
/**
|
||||
* fileMatterObj => {content:'剔除frontmatter的文件内容字符串', data:{<frontmatter对象>}, ...}
|
||||
* fileMatterObj => {content:'剔除frontmatter后的文件内容字符串', data:{<frontmatter对象>}, ...}
|
||||
*/
|
||||
const fileMatterObj = matter(dataStr);
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ function main() {
|
|||
const dateStr = dateFormat(stat.birthtime);// 文件的创建时间
|
||||
const newData = `---\r\ntitle: ${file.name}\r\ndate: ${dateStr}\r\npermalink: ${file.permalink}\r\n---\r\n` + fileMatterObj.content;
|
||||
fs.writeFileSync(file.filePath, newData); // 写入
|
||||
console.log(`写入FrontMatter：${file.filePath} `)
|
||||
console.log(`write FrontMatter：${file.filePath} `)
|
||||
|
||||
} else { // 已有FrontMatter
|
||||
const matterData = fileMatterObj.data;
|
||||
|
|
@ -55,7 +55,7 @@ function main() {
|
|||
if (mark) {
|
||||
const newData = YAML.stringify(matterData) + '---\r\n' + fileMatterObj.content;
|
||||
fs.writeFileSync(file.filePath, newData); // 写入
|
||||
console.log(`更新FrontMatter：${file.filePath} `)
|
||||
console.log(`update FrontMatter：${file.filePath} `)
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -71,7 +71,7 @@ function main() {
|
|||
|
||||
const newData2 = YAML.stringify(JSON.parse(JSON.stringify(matterData))) + '---\r\n' + fileMatterObj.content;
|
||||
fs.writeFileSync(file.filePath, newData2); // 写入
|
||||
console.log(`更新FrontMatter标题和链接：${file.filePath}`)
|
||||
console.log(`update FrontMatter title and permalink：${file.filePath}`)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ function main() {
|
|||
|
||||
const sidebarDataTem = ejs.render(sidebarTemplate, { sidebarData, catalogueData });
|
||||
fs.writeFileSync(sidebarPath, sidebarDataTem); // 同步写入文件, 参数一：写入到的文件, 参数二：写入的数据
|
||||
logger.info('侧边栏生成成功！')
|
||||
logger.info('add sidebar-auto.js (侧边栏生成成功！)')
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue