🚀 feat: custom layoutWidth

README.md

@@ -98,7 +98,7 @@ cover:
   logo: /images/ayer.svg
 
 # ProgressBar  
-progressBar: ture
+progressBar: true
 
 # Article Setting
 # (Use this to excerpt if article is too long：<!--more-->)
@@ -156,6 +156,11 @@ rss: /atom.xml
 # DarkMode
 darkmode: true
 
+# articleWidth and sidebarWidth
+layout:
+  article_width: 80rem
+  sidebar_width: 8rem
+
 # Comment：1、Valine (recommended)；2、Gitalk
 
 # 1、Valine [A fast, simple & powerful comment system](https://github.com/xCss/Valine)

_config.yml

@@ -27,8 +27,6 @@ logo: /images/ayer-side.svg
 
 # 封面配置
 # enable-是否启用封面；path-封面背景图；logo-封面logo
-
-
 cover:
   enable: true
   path: /images/cover1.jpg  # images目录下附送多张美图，可更换
@@ -37,14 +35,6 @@ cover:
 # 页面顶部进度条  
 progressBar: true
 
-# 网易云音乐插件
-music:
-  enable: false
-  # 播放器尺寸类型(1：小尺寸、2：大尺寸)
-  type: 1
-  id: 22707008  # 网易云分享的音乐ID(更换音乐请更改此配置项)
-  autoPlay: true  # 是否开启自动播放
-
 # 文章配置
 # 文章太长，截断按钮文字(在需要截断的行增加此标记：<!--more-->)
 excerpt_link: 阅读更多...
@@ -103,6 +93,11 @@ rss: /atom.xml
 # 是否启用黑夜模式开关
 darkmode: true
 
+# 页面宽度自定义（不建议修改，可能造成布局混乱），article_width文章宽度，sidebar_width侧边栏宽度
+layout:
+  article_width: 80rem
+  sidebar_width: 8rem
+
 # 评论：1、Valine(推荐)；2、Gitalk
 
 # 1、Valine[一款快速、简洁且高效的无后端评论系统](https://github.com/xCss/Valine)
@@ -133,6 +128,14 @@ github:
   # (关闭请设置为false)
   url: https://github.com/Shen-Yu/hexo-theme-ayer
 
+# 网易云音乐插件
+music:
+  enable: false
+  # 播放器尺寸类型(1：小尺寸、2：大尺寸)
+  type: 1
+  id: 22707008  # 网易云分享的音乐ID(更换音乐请更改此配置项)
+  autoPlay: true  # 是否开启自动播放
+
 # 访问量统计(不蒜子)
 busuanzi:
   enable: true

layout/_partial/head.ejs

@@ -29,6 +29,7 @@
   <link rel="shortcut icon" href="<%- theme.favicon %>" />
   <% } %>
   <%- css('dist/main') %>
+  <%- css('custom') %>
   <% if (theme.progressBar){ %>
   <script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
   <% } %>

source-src/css/_partial/layout.styl

@@ -30,7 +30,6 @@
   overflow-x: hidden
   -webkit-overflow-scrolling touch
   &.on
-    transform translateX(aside-width)
     margin-left 0 !important
 
 .sidebar
@@ -64,11 +63,11 @@
     font-size larger
 
 .wrap, .outer
+  position relative
   width 100%
   padding-right gutter-width
   padding-left gutter-width
   margin auto
-  overflow-x hidden
   min-height calc( 100% - 157px )
   clearfix()
 

source-src/css/_partial/tocbot.styl

@@ -1,10 +1,12 @@
 
 .tocbot
   position absolute
+  right: -28rem
   top 14rem
-  left calc((100vw - 70rem) / 2 + 70rem)
   font-size 80%
-  opacity .8
+  opacity .95
+  max-width 230px
+  border-radius 8px
   > .toc-list
     position relative
     overflow hidden
@@ -35,7 +37,8 @@ a.toc-link
 .is-position-fixed
   position fixed !important
   top 0
-  right aside-width
+  right 6rem
+  background-color #fff
 
 // Left line before pseudo element.
 .toc-link::before

source/custom.styl

@@ -0,0 +1,24 @@
+$wrap-width = convert(hexo-config('layout.article_width'))
+$aside-width = convert(hexo-config('layout.sidebar_width'))
+
+.sidebar
+    left - $aside-width
+    width $aside-width
+    &.on
+        left 0
+.content
+    &.on
+        margin-left 0 !important
+.navbar-toggle
+    left 1.5rem + $aside-width
+.search-form-wrap
+    right $aside-width
+
+@media(min-width: 768px)
+    .outer, .wrap
+        width $wrap-width !important
+@media(max-width: 768px)
+    .content
+        &.on
+            transform translateX($aside-width)
+