文档章节

hexo干货系列:(八)hexo文章自动隐藏侧边栏

嘟嘟MD
 嘟嘟MD
发布于 2016/03/23 11:16
字数 882
阅读 114
收藏 0

前言


使用Jacman主题的时候发现打开具体文章后,侧边栏还是会展示,我想要的效果是自动隐藏侧边栏,并且展示目录。但是当我修改了主题配置文件里面close_aside属性为true的时候,发现侧边栏隐藏了,但是目录没出来。于是就有了这篇文章,让我带你一步步明白原理并解决问题~

正文


侧边栏的代码结构


如图:

  1. 为显示侧边栏按钮,对应的是openaside,默认隐藏
  2. 为文章目录,对应的是to和toc-aside,默认隐藏
  3. 为侧边栏,对应的是asidepart,默认是展示

实现自动隐藏侧边栏


那我们现在要做得就是打算一打开具体文章,默认先显示成文字目录,而不是侧边栏
要实现这个就要通过js来改变,我查找了对应的文件,发现在 \themes\jacman\layout\_partial\after_footer.ejs这里有相关代码:

  var m = $('#main'),
      a = $('#asidepart'), //侧边栏
      c = $('.closeaside'),//隐藏侧边栏
      o = $('.openaside'); //显示侧边栏
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    m.addClass('moveMain');
  });  
  //*******************************
   中间还有一些代码。。这里不展示
   //******************************
  <% if (is_post() && theme.close_aside) { %>
        getSize();
        if (myWidth >= 1024) {
          c.click();
        }
  <% } %>

上面代码可以看出来 is_post()用来判断当前是否post布局,大家记住我们博文详情页默认是post布局,所以为true. theme.close_aside这个是在主题配置文件_config.yml下面对应的配置:

close_aside: true  #close sidebar in post page if true
mathjax: false      #enable mathjax if true

我这边close_aside就设置了true,在post布局里面默认关闭侧边栏 如果页面宽度大于1024就触发c.click(),也就是触发了隐藏侧边栏的方法。 原本的代码c.click(function(){})里面只是简单的隐藏和显示了图标,最关键的目录对应的<div id="toc" class="toc-aside">没有显示,因为默认隐藏的。 没错,这就是问题的关键所在,所以我这里添加上了显示这个div的代码,正确代码如下:

  var m = $('#main'),
      a = $('#asidepart'), //侧边栏
      c = $('.closeaside'),//隐藏侧边栏
      o = $('.openaside'); //显示侧边栏
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
     var m = $('#main'),
      a = $('#asidepart'), //侧边栏
      c = $('.closeaside'),//隐藏侧边栏
      o = $('.openaside'); //显示侧边栏
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    $('#toc.toc-aside').css('display', 'block').addClass('fadeIn'); //这个是我新加的,修改点
    m.addClass('moveMain');
  });  
  //*******************************
   中间还有一些代码。。这里不展示
   //******************************
  <% if (is_post() && theme.close_aside) { %>
        getSize();
        if (myWidth >= 1024) {
          c.click();
        }
  <% } %>

好了搞定,默认打开文章的效果如下:

总结


如果你没看懂的话也没关系,概括起来就修改两个地方

  1. \themes\jacman\_config.yml里面修改close_aside属性为true
close_aside: true  #close sidebar in post page if true
  1. \themes\jacman\layout\_partial\after_footer.ejs里面添加下面的代码,具体添加在哪里,看看文章里面有提到
 $('#toc.toc-aside').css('display', 'block').addClass('fadeIn'); //这个是我新加的,修改点

最后,厚颜无耻的求打赏..如果您认为博主的教程帮助到了你~ 你懂的o(^▽^)o (/▽\=)  

© 著作权归作者所有

嘟嘟MD
粉丝 25
博文 26
码字总数 37858
作品 0
福州
程序员
私信 提问
「译」创建一个Hexo主题-Part3 :评论、分析和小部件

原文地址:Create an Hexo Theme - Part 3: Comments, Analytics and Widgets 原文作者:Jonathan Klughertz 在这个系列教程中,你将学习怎么从零开始制作一个 Hexo 主题。 在 part1 和 part...

Chorer
06/21
0
0
stevenshen/hexo-theme-BlueLake

BlueLake English | 简体中文 一个简洁轻量化的响应式Hexo博客主题。 点击预览 安装 安装主题和渲染: $ git clone https://github.com/chaooo/hexo-theme-BlueLake.git themes/BlueLake$ np...

stevenshen
2018/01/08
0
0
Hexo Next 使用配置

配置效果参见:慢读慢写 Pisces子主题页面留白太多问题 修改文件中下面的字段内容: 完整文件参见这个地址。 文章中嵌入html页面 在文章中插入 iframe。 直接使用 Hexo 标签插件 在文件中,可...

at2008
2017/12/20
0
0
「译」创建一个Hexo主题-Part1:首页

原文地址:Create an Hexo Theme-Part1: Index 原文作者:Jonathan Klughertz 在这个系列教程中,你将学习怎么从零开始制作一个 Hexo 主题。我很喜欢 Hexo ,并且每天都在使用,不幸的是,直...

Chorer
05/31
0
0
Github Pages(三):使用Hexo博客生成工具

最近用 Hexo 重新搭建了个人博客,虽然我以前用网页拼凑我的老网站花了很多时间,但写作和发布体验的巨大差别让我还是进入Hexo阵营了。 我的理解是,这是一个自动生成静态(html+css+js)网站...

hans2936
2018/06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

医疗在线客服咨询系统有哪些特点?

随着中国互联网网站的的快速发展,至今医疗行业已经拥有了独立的的运营网站,其中最具特色的便属于医疗在线客服咨询系统,医疗在线客服咨询系统为每个访问网站的患者提供即时的网络在线客服服...

唯喏
今天
11
0
skywalking(容器部署)

skywalking(容器部署) 标签(空格分隔): APM [toc] 1. Elasticsearch SkywalkingElasticsearch 5.X(部分功能报错、拓扑图不显示) Skywalking需要Elasticsearch 6.X docker network create......

JUKE
今天
11
0
解决Unable to find a single main class from the following candidates [xxx,xxx]

一、问题描述 1.1 开发环境配置 pom.xml <plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><!--一定要对上springboot版本号,因......

TeddyIH
今天
8
0
玩转Spring Boot 注册Servlet、Filter、Listener

玩转Spring Boot 注册Servlet、Filter、Listener JAVA架构师Ya七月 2019-08-23 玩转Spring Boot 注册Servlet、Filter、Listener 在Servlet 3.0之前我们都是使用web.xml进行配置,需要增加Ser...

Java架构师ya七
今天
7
0
Dubbo服务限制大数据传输抛Data length too large: 13055248, max payload: 8388608解决方案

当dubbo服务提供者向消费层传输大数据容量数据时,会受到Dubbo的限制,报类似如下异常: 2019-08-23 11:04:31.711 [ DubboServerHandler-XX.XX.XX.XXX:20880-thread-87] - [ ERROR ] [com.al...

huangkejie
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部