fluid主题添加侧边栏

今天逛网页的时候偶然发现一个使用fluid主题的博主七夏浅笑，她的fluid主题添加了一个侧边栏功能块，觉得非常不错。于是就动手折腾把它移植过来并且修改成了自己喜欢的样式颜色等，以下是操作过程记录

添加ejs模板文件

新建文件layout/_partial/sidebar.ejs

<% if(theme.sidebar.enable){ %>
<div id="sidebar" class="sidebar-hide">
  <span class="sidebar-button sidebar-button-shift" id="toggle-sidebar" >
    <i class="fa fa-arrow-right on" aria-hidden="true"></i>
  </span>
  <div class="sidebar-overlay"></div>
  <div class="sidebar-intrude">
    <div class="sidebar-avatar">
      <img src="<%- url_for(theme.avatar) %>" srcset="<%- url_for(theme.avatar) %>" alt="avatar"/>
    </div>
    <div class="text-center sidebar-about">
      <p class="h3 sidebar-author"><%= theme.sidebar.name || config.title %></p>
      <p class="sidebar-subtitle"><%- theme.sidebar.introduce || config.subtitle %></p>
      <% for(var i in theme.sidebar.icons) { %>
        <a href="<%- theme.sidebar.icons[i] %>" class="h4" target="_blank">
          <i class="<%- i %>" aria-hidden="true"></i>
        </a>
        &nbsp;&nbsp;
      <% } %>
    </div>
    <div class="sidebar-friend">
      <p class="h6 sidebar-friend-title">
        <span class="sidebar-label-left"><i class="fas fa-user-friends"></i></span>
        <span class="sidebar-label">友情链接</span>
      </p>
      <ul class="list-group">
        <% for(var i in theme.friends) { %>
          <a href="<%- theme.friends[i] %>" target="_blank">
            <li class="list-group-item">
              <i class="fas fa-quote-left"></i>&nbsp;
              <%- i %>
            </li>
          </a>
        <% } %>
    </ul>
    </div>
  </div>
</div>
<% } %>

引入布局文件

layout/layout.ejs文件插入以下代码

<% if (theme.sidebar.enable) { %>
  <%- partial('_partials/sidebar.ejs') %>
<% } %>

添加CSS样式

source/css/_pages/_base/base.styl文件插入以下代码

/* 侧边栏 */
#sidebar
    position fixed
    top 0
    left 0
    z-index 1040
    overflow-y auto
    width 300px
    height 100%
    color $sidebar-text-color
    background-color $sidebar-background-color
    -webkit-transition all .2s ease-in-out
    -o-transition all .2s ease-in-out
    transition all .2s ease-in
    -webkit-box-shadow 0.25rem 0px 0.25rem 0px rgba(175, 175, 175, 0.6)
    box-shadow 0.25rem 0px 0.25rem 0px rgba(175, 175, 175, 0.6)

#sidebar::-webkit-scrollbar
    display none    

.sidebar-hide
    margin-left -300px
    -webkit-box-shadow none !important
    box-shadow none !important

.sidebar-button
    position fixed
    z-index 3
    /* 按钮背景 */
    padding .5rem .7rem .5rem .3rem
    margin 2rem 0 2rem 0
    border-radius 0 3rem 3rem 0
    background-color rgba(255, 255, 255, 0.4)
    /* padding 1rem */
    bottom 0
    color $sidebar-button-color
    cursor pointer
    -webkit-transition all .2s ease-in-out
    -o-transition all .2s ease-in-out
    transition all .2s ease-in-out

.sidebar-button:hover
    color $link-hover-color
    -webkit-transition all .2s ease-in-out
    -o-transition all .2s ease-in-out
    transition all .2s ease-in-out

.sidebar-button i 
    transform rotateZ(180deg)

.sidebar-button-shift
    left 0
    color $sidebar-button-shift-color
    text-shadow $sidebar-button-shift-shadow

.sidebar-button-shift i 
    transform rotateZ(0deg)

.sidebar-overlay
    display none
    width 100%
    height 180px
    background-color #fe91b4
    position absolute

.sidebar-intrude 
    margin 60px auto 0 auto
    z-index 3

.sidebar-avatar 
    position relative
    border $sidebar-avatar-border
    border-radius 300px
    width 128px
    height 128px
    margin 0 auto
    position relative
    overflow hidden
    background-color #88acdb
    -webkit-transition all .2s ease-in
    display -webkit-box
    -webkit-box-pack center
    -webkit-box-align center
    text-align center;

.sidebar-avatar img
    border 0
    vertical-align middle
    max-width 100%

.sidebar-about a
    color $sidebar-about-link-color

.sidebar-about a:hover
    color $sidebar-about-link-hover-color
    
.sidebar-author
    margin .67em 0
    font-family Roboto,sans-serif
    font-size 30px
    transition .3s

.sidebar-subtitle
    color $sidebar-subtitle-color

.sidebar-label-left
    height 100%
    padding 0 7px 0 7px
    background-color $sidebar-about-link-color
    float left

.sidebar-friend
    margin 40px auto
    padding 0

.sidebar-friend-title
    max-width 120px
    margin 20px auto
    padding 0
    line-height 2rem
    color $sidebar-friend-title
    background-color $sidebar-friend-title-background
    text-align center

.sidebar-friend a,a:hover 
    -webkit-transition .1s !important
    -o-transition .1s !important
    transition .1s !important

.sidebar-friend a
    color $sidebar-friend-link

.sidebar-friend a:hover
    color $sidebar-friend-link-hover

.sidebar-friend li
    width calc(100% - 5rem)
    margin 0 auto
    background none
    border-bottom $sidebar-friend-li-border
    -webkit-transition all .2s ease-in-out
    -o-transition all .2s ease-in-out
    transition all .2s ease-in-out

.sidebar-friend li:hover
    background-color $sidebar-friend-li-hover
    -webkit-transition all .2s ease-in-out
    -o-transition all .2s ease-in-out
    transition all .2s ease-in-out

.sidebar-friend i.fa-quote-left
    color $sidebar-friend-ico

添加自定义变量

source/css/_variables/base.styl文件插入以下代码

//sidebar
$sidebar-text-color = theme-config("color.sidebar_text_color", "#3c4858")
$sidebar-background-color = theme-config("color.sidebar_background_color", "#f6f8fad1")
$sidebar-button-color = theme-config("color.sidebar_button_color", "#99a9bf")
$sidebar-button-shift-color = theme-config("color.sidebar_button_shift_color", "#ffffff")
$sidebar-button-shift-shadow = theme-config("color.sidebar_button_shift_shadow", "0.1rem 0.1rem 0.5rem #3e3e3e")
$sidebar-about-link-color = theme-config("color.sidebar_about_link_color", "#3c4858")
$sidebar-about-link-hover-color = theme-config("color.sidebar_about_link_hover_color", "#fe4365")
$sidebar-avatar-border = theme-config("color.sidebar_avatar_border", "5px solid #ffffff")
$sidebar-subtitle-color = theme-config("color.sidebar_subtitle_color", "#999999")
$sidebar-friend-title = theme-config("color.sidebar_friend_title", "#ffffff")
$sidebar-friend-title-background = theme-config("color.sidebar_friend_title_background", "#fe91b4")
$sidebar-friend-link = theme-config("color.sidebar_friend_link", "#3c4858")
$sidebar-friend-link-hover = theme-config("color.sidebar_friend_link_hover", "#ffffff")
$sidebar-friend-li-border = theme-config("color.sidebar_friend_li_border", "1px dashed #bdbdbd")
$sidebar-friend-li-hover = theme-config("color.sidebar_friend_li_hover", "#fe91b4")
$sidebar-friend-ico = theme-config("color.sidebar_friend_ico", "#bfbfbf")

添加js控制

source/js/main.js文件插入以下代码

/* Sidebar */
var toggleSidebar = function(){
  $("#sidebar").toggleClass('sidebar-hide');
  $("#toggle-sidebar").toggleClass('sidebar-button-shift');
}
var hideSidebar = function(){
  $("#sidebar").addClass('sidebar-hide');
  $("#toggle-sidebar").addClass('sidebar-button-shift');
}
$("#toggle-sidebar").on("click",toggleSidebar);
$("header").on("click",hideSidebar);
$("#mainContent").on("click",hideSidebar);
$("#footerContent").on("click",hideSidebar);

添加配置项

_config.yml文件插入以下代码

#---------------------------
# 侧边栏
# Sidebar
#---------------------------
sidebar:
    enable: true
    name:  # 名字，留空则使用网站title
    introduce:  # 支持 HTML，留空则使用网站subtitle
    icons: # 更多图标可从 https://fontawesome.com/icons 查找，并以 "图标名: url" 的格式添加在下方
        "fab fa-github": https://github.com
        "fab fa-twitter": https://twitter.com
        "fas fa-envelope": mailto:example@example.com
        
#---------------------------
# 友链
# Friends
#---------------------------    
friends: 
  friendname: https://example.com/

添加颜色配置

coloc:
  sidebar_text_color: "#3c4858"
  sidebar_background_color: "rgba(246, 248, 250, 0.82)" #f6f8fad1
  sidebar_button_color: "#99a9bf"
  sidebar_button_shift_color: "#ffffff"
  sidebar_button_shift_shadow: "0.1rem 0.1rem 0.5rem #3e3e3e"
  sidebar_about_link_color: "#3c4858"
  sidebar_about_link_hover_color: "#fe4365"
  sidebar_avatar_border: "5px solid #ffffff"
  sidebar_subtitle_color: "#999999"
  sidebar_friend_title: "#ffffff"
  sidebar_friend_title_background: "#fe91b4"
  sidebar_friend_link: "#3c4858"
  sidebar_friend_link_hover: "#ffffff"
  sidebar_friend_li_border: "1px dashed #bdbdbd"
  sidebar_friend_li_hover: "#fe91b4"
  sidebar_friend_ico: "#bfbfbf"

本地预览

hexo clean

hexo g

hexo s

可以看到侧边栏已经添加到网页中了。