长文章页面...再一次折腾...

长文章折腾

长文章，就是指很长的文章，分块来展示文章，其实弄长文章的想法很早就有了，以前在用wordpress的时候就已经开始了，而且也实现了类似小说的那种，有卷有章节，以前可切换背景色和查看当前文章内容封面之类的功能。

这次折腾主要还是想以博客的方式来弄成长文章页面，没有太多没必要的东西，简单的功能就好。其实这样算起来也没怎么折腾太多东西。

hexo的自建标签很好用，可以自定义来做很多东西，这次主要的内容还是以自定义标签来完成的，而每个自定义标签就代表着一段文章。以前在折腾站内链接的时候就使用了这种标签。一用就完全停不下来阿，哈哈。

站内链接使用的是自带的{% post_link slug [title] %}，这次使用全新的自定义标签。

也是折腾了两天时间才把文章页弄出来，关键是不知道hexo如何判断是否手机访问。不然可能会事半功倍些。不然只好硬着头皮把手机和电脑的样式相整合。真是件相当麻烦的事，不仅巨多样式，而且还容易搞错。

长文章页面，整体总局是我模仿好奇心日报长文章这个分类弄的。基本上就是照着做的，这种长文章的展示方式是我非常喜欢的。嘿嘿！~{:坏笑:}

虽然现在还有些小瑕疵，不过基本上是可以用了。非常的有意思。

最后次折腾，后续就是把小地方完善。

长文章具体内容相关

长文章手机里的切换其实是使用swiper，这是个支持手机响应式幻灯插件，功能非常强大，而且非常好用。可控性优秀。

每段的切换和手机长文章首页的切换是同步的，这完全出于swiper强大的可控操作，双切换，能省N多事。一开始还为这事想了半天实现方法，还是准备工作做的太少。{:黑线:}

一开始遇到的问题是获取长文章每段的标题，主要这用于电脑上长文章的切换，后来才想到hexo自带就有toc，且一个toc即可搞定。

<% if (!index && post.toc){ %>
	<div id="toc" class="toc-article">
		<%- toc(post.content) %>
	</div>
<% } %>

瑕疵代码块需要使用hexo的代码块标签，不然就任性的显示undefined，而且因为使用了swiper的原因，会出现如果代码横向太宽，无法在手机进行滚动。这个问题不准备折腾，太烦躁了。

还是不错的，哈哈。之后就是电脑上左侧固定滚动的问题，一开始研究着随屏滚动，实现好了，之后就是刷新后左侧的侧边栏在你不滚动滚动条时会消失（其实是跑到上顶端了），以前也没想着弄那么多，就没管，这次进行了相关的解决。让网页刷新完毕，侧边栏在根据位置自行回归。

长文章在首页的样式与其它

首页的样式根据判断而来，一开始想法不对，弄的出现两篇一样的文章，后来才知道是自己太蠢了。

其实按这个方法，视频页也是可以整出在首页显示不同的样式，不过，视频页并没有打算继续折腾。所以长文章已经是收官（折腾）的最后一功能。除非以后自己想到更好的点子。

hexo折腾了很久，其实除了模板和一些小功能，想想也并没有太多东西，自己的能力有限，所以对于折腾实在是有力无心。不过过程是开心的，也学到不少东西。跟之前预定好的一样，这次用了不是特别多的js代码来控制。基本上都是拿些现成的东西，还是很不错的。

至少现在自己看起来很舒爽。哈哈，自己用这个hexo写东西其实简单的博客就行，折腾纯属是自己的瞎弄。不过倒也学到不少东西。对hexo有了一些了解。倒也不是件坏事。

就像我之前说的，折腾的乐趣有时会大于写博客的乐趣。而不折腾的时候写博客似乎又少了些什么...{:嘻嘻:}，这种自虐的心理，我想很多人应该和我一样吧。嘿嘿！~

在每次折腾时，总得去google，百度一堆的东西，上各大网站提问，像什么segmentfault，v2ex等。从中学到了很多新东西。虽然过程稍微艰辛了些...

长文章问题的相关总结

左侧的侧边栏，里面还有个小功能没有实现，就是滚动条随着页面的滚动而滚动。不然会找不到当前锚点的链接所在位置。

该问题已经被成功解决，真是花了很久的时间，各大网站都去问了，segmentfault上有人回答我，但最终不是我想要的效果，但代码写的很好，准备以后用作其它方面。于是，为了自己想要的效果，我只好自己找着方法去解决了，最终解决了该问题。
问题难点所在。就是一开始的思路不正确，思路上老想着应该按页面滚动条的位置进行计算，可最后经过证明，此方法并不是多靠谱，因为此方法会导致计算的不够精准以及锚点来回抖动的问题。所以我采取了计算当前位置也就是class.cur（锚点所在位置），然后计算之前的高度进行叠加。

开始努力工作，努力学习

折腾结束，意味着新工作的展开，为此，就需要新的学习，毕竟学习才是成长的唯一途径。

这里预留部分，主要用来显示五个。目录最多显示五个

嘿嘿，其实长文章基本已经完成了，只不过现在就差一个最烦躁的小功能，是为了方便使用，这个功能搞了两天，真是有够折腾的，- -，这次是冲动。这个弄完，绝对不折腾了，太要命了。

基本上已经算是收尾了，当然除了我之前说的，这之后，我会把这篇文章重新编辑，弄成真正意义上的长文章（就是每段都有很多字这样。）长文章还是不错的，嘿嘿。

吐槽hexo似乎没有判断是否为手机访问的函数。- -，真是很要命啊。不然应该会很快完成吧。我猜。。。{:扶眼镜:}