前言

使用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'); //这个是我新加的,修改点

最近撸了个java的公众号,学习资源超级多,视频,电子书,最新开发工具一个都不能少,已全部分享到百度云盘,求资源共享,打造一个学习方便,工作方便的java公众号,开源开源,有需求的可以关注~撒花

hexo干货系列:(八)hexo文章自动隐藏侧边栏的更多相关文章

  1. hexo干货系列:(总纲)搭建独立博客初衷

    前言 我是一名程序员,以前知识整理都是整理在为知笔记上,博客用的比较少,更别说是使用独立博客,因为不会... 2016年过年在家期间偶然的机会萌发了自己要搭建一个属于自己的独立博客的想法,于是就有了下 ...

  2. hexo干货系列:(二)hexo主题下载及配置

    前言 上一篇文章介绍了hexo+gitHub简易搭建属于自己的个人独立博客,但是主题是默认的landscape,略显简单,今天的教程推荐Jacman主题. Jacman是一款为Hexo打造的一款扁平化 ...

  3. hexo干货系列:(一)hexo+gitHub搭建个人独立博客

    前言 一直想要一个自己的独立博客,但是觉得申请域名+服务器的太麻烦了就一直没有实现.偶然机会发现Hexo这个优秀的静态博客框架,再搭配现在流行的gitHub,简直是完美写博客的黄金搭档(免费+方便). ...

  4. hexo干货系列:(四)将hexo博客同时托管到github和coding

    前言 之前我们把hexo托管在github,但是毕竟github是国外的,访问速度上还是有点慢,所以想也部署一套在国内的托管平台,之前查资料听说gitcafe,但是听说gitcafe已经被coding ...

  5. hexo干货系列:(六)hexo提交搜索引擎(百度+谷歌)

    前言 能看到这里,说明大家都跟我一样,已经把博客搭起来并洋洋洒洒写了几篇博文,正春风得意感觉良好的时候,搭建博客有屎以来最大的危机出现在没有准备的我面前,百度+谷歌都无法搜索到我的博客.装逼还没几天就 ...

  6. hexo干货系列:(五)hexo添加站内搜索

    前言 本来想用百度站内搜索,但是没成功,所以改用swiftype,用起来还是很棒的,这里分享一下我的安装步骤 正文 注册 去swiftype官网注册个账号,然后登陆,对了不要去在意30天试用,30天过 ...

  7. hexo干货系列:(三)hexo的Jacman主题优化

    前言 上一篇介绍了Jacman主题的安装和配置,今天根据上次的基础做了些优化,让博客看起来很舒服. 正文 首页文章展示摘要 该主题首页文章列表默认是全部展开,感觉不好,我关闭掉了,只展示少量摘要. 修 ...

  8. hexo干货系列:(七)hexo安装统计插件

    前言 前面介绍了如何让百度和谷歌收录我们的博客,那如何查看自己的博客每天被多少人访问呢~ 这里我介绍下hexo中如何使用统计插件,每天看到自己的博客访问量越来越高也是一种享受. 正文 开启统计功能 我 ...

  9. (2018干货系列八)最新VR学习路线整合

    怎么学VR 即虚拟现实技术,是一种可以创建和体验虚拟世界的计算机仿真系统,它利用计算机生成一种模拟环境,是一种多源信息融合的.交互式的三维动态视景和实体行为的系统仿真使用户沉浸到该环境中.VR/AR/ ...

随机推荐

  1. EmitMapper系列之一:EmitMapper入门

    EmitMapper的总结 EmitMapper简介 前言: 参考官网: http://emitmapper.codeplex.com/ Project Description Powerful cu ...

  2. C#中分部类和分部方法的应用

    本篇文章介绍了,C#中分部类和分部方法的应用.需要的朋友参考下     分部类(Partial Class)在C#2.0引入,分部方法(Partial Method)在C#3.0引入,这两个语法特性都 ...

  3. [转]java注解与APT技术

    下面是一个简单的自定义注解的栗子: package annotation; import java.lang.annotation.Documented; import java.lang.annot ...

  4. spring mvc 解决 Could not open ServletContext resource [/WEB-INF/dispatcher-servlet.xml] 异常

    org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing XML document fro ...

  5. 盘点那些年,被Oracle收购的公司

    微博上看到一图,很清晰.盘点那些年,被Oracle收购的公司,Oracle日益强大,都收购了哪些公司呢?别再以为只有Sun啦...看看你都知道哪些? ps:Strategic Acquisitions ...

  6. IOS的水滴文件效果

    @implementation ViewController - (void)viewDidLoad{ [super viewDidLoad]; NSDictionary *dict = [NSDic ...

  7. PMP项目管理学习笔记(9)——范围管理

    关于范围管理的几个名词定义 产品范围:表示你和你的团队正在构建的产品或服务的特性和功能:产品范围与最终产品有关,包括产品的特性,组件和组成部分.人们谈论确定产品的范围时,大多都是在谈论确定产品的特性, ...

  8. Es6里面的解析结构

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. Hadoop 安装过程中出现的问题

    1.hadoop-daemon.sh start namenode 启动失败 查看hadoop/logs 下面的日志 出现 2017-04-11 15:35:13,860 WARN org.apach ...

  10. 50个Bootstrap扩展插件

    Bootstap这个框架本身已经包含了开发网页的众多要素,包括了常用的工具以及扩展组件,如果你在开发页面时觉得在某些方面还不够的话,不妨看看最新收集的50个Bootstrap扩展插件,这些插件在我们平 ...