Skip to content

Commit ff4f03d

Browse files
zhaoqingqingzhaoqingqing
committed
优化正文toc用户体验
1 parent 49583a9 commit ff4f03d

File tree

2 files changed

+90
-41
lines changed

2 files changed

+90
-41
lines changed

‎cnblogs-article-nav.js‎

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
http://www.cnblogs.com/asxinyu/p/Bolg_Category_For_BlogBeauty.html
66
*/
77

8-
//cnblogs生成右侧目录
8+
//cnblogs生成右侧目录 start
99
$(document).ready(function() {
1010
var b = $('body'),
1111
cnblogs_post_body = 'cnblogs_post_body',
@@ -125,8 +125,9 @@ $(document).ready(function() {
125125
} */
126126
// })
127127
});
128+
//cnblogs生成右侧目录 end
128129

129-
// 在文章的内容页生成TOC
130+
// 在文章正文顶部生成TOC start
130131
$(document).ready(function() {
131132
buildTocTable();
132133
});
@@ -138,7 +139,7 @@ function buildTocTable() {
138139
var s = '';
139140
s += '<div style="clear:both"></div>';
140141
s += '<div class="cnblogs_toc">';
141-
s += '<p style="text-align:right;margin:0;"><span style="float:left; text-indent:0;">文章目录<a href="#" title="系统根据文章中H1到H6标签自动生成文章目录">(?)</a></span><a href="#" onclick="javascript:return openct(this);" title="展开">[+]</a></p>';
142+
s += '<p style="text-align:left;margin:0;"><span style="float:left; text-indent:0;"><a id="TocTitle" href="#" onclick="javascript:return OnTitleShowToc(this);" title="系统根据文章中H1到H6标签自动生成文章目录">文章目录[点击展开](?)</a></span><a id="TocTitleSymbol" href="#" onclick="javascript:return OnTitleSymbolShowToc(this);" title="展开">[+]</a></p>';
142143
//.cnblogs_toc ol 控制默认展开或关闭
143144
s += '<ol style="display:none;margin-left:14px;padding-left:14px;line-height:160%;">';
144145
var old_h = 0, ol_cnt = 0;
@@ -176,22 +177,51 @@ function buildTocTable() {
176177
s += '</ol></div>';
177178
s += '<div style="clear:both"><br></div>';
178179
$(s).insertBefore($('#cnblogs_post_body'));
179-
180+
//note 若toc过长，影响阅读体验，默认收起
180181
//mobile detect
181-
var md = new MobileDetect(window.navigator.userAgent);
182-
if (md.mobile()) {
183-
$('.cnblogs_toc ol').css('display','none');
182+
// var md = new MobileDetect(window.navigator.userAgent);
183+
// if (md.mobile()) {
184+
// $('.cnblogs_toc ol').css('display','none');
185+
// }else{
186+
// $('.cnblogs_toc ol').css('display','block');
187+
// }
188+
}
189+
190+
var isOpendToc = false;
191+
192+
function UpdateTocTitle(){
193+
if(isOpendToc){
194+
$("#TocTitleSymbol").attr('title', '收起').html('[-]');
195+
$("#TocTitle").html('文章目录[点击收起](?)');
184196
}else{
185-
$('.cnblogs_toc ol').css('display','block');
197+
$("#TocTitleSymbol").attr('title', '展开').html('[+]');
198+
$("#TocTitle").html('文章目录[点击展开](?)');
186199
}
187200
}
188201

189-
function openct(e) {
190-
if (e.innerHTML == '[+]') {
191-
$(e).attr('title', '收起').html('[-]').parent().next().show();
202+
function OnTitleShowToc(e) {
203+
if (!isOpendToc) {
204+
$(e).parent().parent().next().show();
205+
isOpendToc = true;
192206
} else {
193-
$(e).attr('title', '展开').html('[+]').parent().next().hide();
207+
$(e).parent().parent().next().hide();
208+
isOpendToc = false;
194209
}
210+
UpdateTocTitle();
195211
e.blur();
196212
return false;
197-
}
213+
}
214+
215+
function OnTitleSymbolShowToc(e) {
216+
if (!isOpendToc) {
217+
$("#TocTitleSymbol").parent().next().show();
218+
isOpendToc = true;
219+
} else {
220+
$("#TocTitleSymbol").parent().next().hide();
221+
isOpendToc = false;
222+
}
223+
UpdateTocTitle();
224+
e.blur();
225+
return false;
226+
}
227+
// 在文章正文顶部生成TOC end

‎cnblogs-notice.html‎

Lines changed: 47 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,16 @@
44
-->
55

66
<!-- GoStats Simple HTML Based Code -->
7-
<p>第<a target="_blank" title="流量统计" href="http://gostats.cn"><img alt="流量统计" src="http://monster.gostats.cn/bin/count/a_474834/t_7/i_3/z_0/show_hits/counter.png" style="border-width:0" /></a>位访客，欢迎您！</p>
7+
<p>第
8+
<a target="_blank" title="流量统计" href="http://gostats.cn"><img alt="流量统计" src="http://monster.gostats.cn/bin/count/a_474834/t_7/i_3/z_0/show_hits/counter.png" style="border-width:0" /></a>位访客，欢迎您！</p>
89
<!-- End GoStats Simple HTML Based Code -->
910
<p>Tips：正文页面自动满屏(未适配All浏览器)，右下角三杠图标(显示/隐藏目录)。</p>
1011
<p>博客有关示例代码：<a href="https://github.com/zhaoqingqing/blog_samplecode" target="_blank">blog_samplecode</a></p>
1112

1213
<!-- 博客园栏目管理 一栏 -->
13-
<p><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=569032731&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:569032731:51" alt="HI，Q我吧" title="HI，Q我吧"/></a></p>
14+
<p>
15+
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=569032731&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:569032731:51" alt="HI，Q我吧" title="HI，Q我吧" /></a>
16+
</p>
1417
<p><a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=wLqooa_xqa6nsamup-LygLGx7qOvrQ" style="text-decoration:none;">E-Mail 联系</a></p>
1518
<p><a id="liuyan" class="menu" rel="nofollow" href="https://github.com/zhaoqingqing" target="_blank">My GitHub</a></p>
1619
<p><a id="liuyan" class="menu" rel="nofollow" href="http://www.cnblogs.com/zhaoqingqing/rss" target="_blank">Rss 订阅</a></p>
@@ -21,29 +24,33 @@
2124
<p><a id="liuyan" class="menu" rel="nofollow" href="http://www.cnblogs.com/" target="_blank">博客园首页</a></p>
2225

2326
<!-- 博客园栏目管理 表格两栏 -->
24-
<table cellspacing="0" cellpadding="2" width="250" style="margin-top: 20px;margin-bottom: 20px;" ><tbody>
25-
<tr>
26-
<td valign="top" ><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=569032731&amp;site=qq&amp;menu=yes" target="_blank"><img title="HI，Q我吧" border="0" alt="HI，Q我吧" src="http://wpa.qq.com/pa?p=2:569032731:51" /></a></td>
27-
<td valign="top" ><a style="text-decoration: none" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=wLqooa_xqa6nsamup-LygLGx7qOvrQ" target="_blank">E-Mail 联系</a></td>
28-
</tr>
29-
<tr>
30-
<td valign="top" ><a id="liuyan" class="menu" href="https://github.com/zhaoqingqing" rel="nofollow" target="_blank">My GitHub</a></td>
31-
<td valign="top" ><a id="liuyan" class="menu" href="http://www.cnblogs.com/zhaoqingqing/rss" rel="nofollow" target="_blank">Rss 订阅</a></td>
32-
</tr>
33-
<tr>
34-
<td valign="top" ><a id="liuyan" class="menu" href="http://home.cnblogs.com/u/zhaoqingqing/" rel="nofollow" target="_blank">我的动态</a></td>
35-
<td valign="top" ><a id="liuyan" class="menu" href="http://space.cnblogs.com/msg/send/zhaoqingqing" rel="nofollow" target="_blank">站内消息</a></td>
36-
</tr>
37-
<tr>
38-
<td valign="top" ><a id="liuyan" class="menu" href="http://i.cnblogs.com/" rel="nofollow" target="_blank">后台管理</a></td>
39-
<td valign="top" ><a id="liuyan" class="menu" href="http://www.cnblogs.com/zhaoqingqing/p/aboutme.html" rel="nofollow" target="_blank">关 于 我</a></td>
40-
</tr>
41-
<tr>
42-
<td valign="top" ><a id="liuyan" class="menu" href="http://www.cnblogs.com/" rel="nofollow" target="_blank">博客园首页</a></td>
43-
<td valign="top" ><a id="liuyan" class="menu" href="http://www.cnblogs.com/cate/gamedev/" rel="nofollow" target="_blank">博客园分类</a></td>
44-
</tr>
45-
</tbody></table>
46-
27+
<table cellspacing="0" cellpadding="2" width="250" style="margin-top: 20px;margin-bottom: 20px;">
28+
<tbody>
29+
<tr>
30+
<td valign="top">
31+
<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=569032731&amp;site=qq&amp;menu=yes" target="_blank"><img title="HI，Q我吧" border="0" alt="HI，Q我吧" src="http://wpa.qq.com/pa?p=2:569032731:51" /></a>
32+
</td>
33+
<td valign="top"><a style="text-decoration: none" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=wLqooa_xqa6nsamup-LygLGx7qOvrQ" target="_blank">E-Mail 联系</a></td>
34+
</tr>
35+
<tr>
36+
<td valign="top"><a id="liuyan" class="menu" href="https://github.com/zhaoqingqing" rel="nofollow" target="_blank">My GitHub</a></td>
37+
<td valign="top"><a id="liuyan" class="menu" href="http://www.cnblogs.com/zhaoqingqing/rss" rel="nofollow" target="_blank">Rss 订阅</a></td>
38+
</tr>
39+
<tr>
40+
<td valign="top"><a id="liuyan" class="menu" href="http://home.cnblogs.com/u/zhaoqingqing/" rel="nofollow" target="_blank">我的动态</a></td>
41+
<td valign="top"><a id="liuyan" class="menu" href="http://space.cnblogs.com/msg/send/zhaoqingqing" rel="nofollow" target="_blank">站内消息</a></td>
42+
</tr>
43+
<tr>
44+
<td valign="top"><a id="liuyan" class="menu" href="http://i.cnblogs.com/" rel="nofollow" target="_blank">后台管理</a></td>
45+
<td valign="top"><a id="liuyan" class="menu" href="http://www.cnblogs.com/zhaoqingqing/p/aboutme.html" rel="nofollow" target="_blank">关 于 我</a></td>
46+
</tr>
47+
<tr>
48+
<td valign="top"><a id="liuyan" class="menu" href="http://www.cnblogs.com/" rel="nofollow" target="_blank">博客园首页</a></td>
49+
<td valign="top"><a id="liuyan" class="menu" href="http://www.cnblogs.com/cate/gamedev/" rel="nofollow" target="_blank">博客园分类</a></td>
50+
</tr>
51+
</tbody>
52+
</table>
53+
4754
<!-- 文件引用 -->
4855
<!-- release for cnblogs -->
4956
<link href="http://files.cnblogs.com/zhaoqingqing/cnblogs-article-nav.css" rel="stylesheet" type="text/css">
@@ -95,8 +102,10 @@
95102

96103

97104
<!-- 两种流量统计样式 -->
98-
<p>第<a target="_blank" title="流量统计" href="http://gostats.cn"><img alt="流量统计" src="http://monster.gostats.cn/bin/count/a_474834/t_7/i_3/z_0/show_hits/counter.png" style="border-width:0" /></a>位访客，欢迎您！</p>
99-
<p>第<a target="_blank" title="博客访问统计" href="http://gostats.cn"><img alt="博客访问统计" src="http://monster.gostats.cn/bin/count/a_474834/t_4/i_19/z_0/show_hits/counter.png" style="border-width:0" /></a>位访客，欢迎您！</p>
105+
<p>第
106+
<a target="_blank" title="流量统计" href="http://gostats.cn"><img alt="流量统计" src="http://monster.gostats.cn/bin/count/a_474834/t_7/i_3/z_0/show_hits/counter.png" style="border-width:0" /></a>位访客，欢迎您！</p>
107+
<p>第
108+
<a target="_blank" title="博客访问统计" href="http://gostats.cn"><img alt="博客访问统计" src="http://monster.gostats.cn/bin/count/a_474834/t_4/i_19/z_0/show_hits/counter.png" style="border-width:0" /></a>位访客，欢迎您！</p>
100109

101110

102111
<!-- 备注信息 -->
@@ -106,6 +115,7 @@
106115
QQ互联通讯组件：http://connect.qq.com/intro/wpa
107116
-->
108117

118+
<!-- 文章页右侧 toc 结构-->
109119
<div id="sideToolbar">\
110120
<div class="sideCatalogBg" id="sideCatalog">\
111121
<div id="sideCatalog-sidebar">\
@@ -114,4 +124,13 @@
114124
<div id="sideCatalog-catalog">\
115125
<ul class="nav" style="width:300px;zoom:1">\</ul>\</div>\</div>\
116126
</div>
117-
<a href="javascript:void(0);" id="sideCatalogBtn" class="sideCatalogBtnDisable"></a>\
127+
<a href="javascript:void(0);" id="sideCatalogBtn" class="sideCatalogBtnDisable"></a>\
128+
129+
130+
<!-- 正文toc 结构-->
131+
<p style="text-align:right;margin:0;">
132+
<span style="float:left; text-indent:0;">
133+
<a href="#" onclick="javascript:return OnTxtShowToc(this);" title="系统根据文章中H1到H6标签自动生成文章目录">文章目录[点击展开](?)</a>
134+
</span>
135+
<a href="#" onclick="javascript:return openct(this);" title="展开" style="float:right;">[+]</a>
136+
</p>

0 commit comments

Comments
 (0)