Skip to content

Commit 86d1d36

Browse files
stevenjoezhangstevenjoezhang
authored
Make sidebar toc & PJAX loading faster (theme-next#1113)
1 parent 2dfd0dd commit 86d1d36

File tree

22 files changed

+298
-356
lines changed

22 files changed

+298
-356
lines changed

‎languages/en.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ post:
3030
read_more: Read more
3131
untitled: Untitled
3232
sticky: Sticky
33-
toc_empty: This post does not have a Table of Contents
3433
views: Views
3534
related_posts: Related Posts
3635
copy_button: Copy

‎layout/_layout.swig‎

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,36 +13,25 @@
1313
{%- set pjax = ' pjax' %}
1414
{%- endif %}
1515

16-
{%- set html_class = 'theme-next ' + theme.scheme %}
17-
{%- if theme.motion.enable %}
18-
{%- set html_class = html_class + ' use-motion' %}
19-
{%- endif %}
20-
21-
<html class="{{ html_class | lower }}" lang="{{ config.language }}">
16+
<html lang="{{ config.language }}">
2217
<head>
2318
{{ partial('_partials/head/head.swig', {}, {cache: theme.cache.enable}) }}
2419
{% include '_partials/head/head-unique.swig' %}
2520
{{- next_inject('head') }}
2621
<title>{% block title %}{% endblock %}</title>
2722
<meta name="generator" content="Hexo {{ hexo_env('version') }}">
28-
{% include '_third-party/analytics/index.swig' %}
23+
{{ partial('_third-party/analytics/index.swig', {}, {cache: theme.cache.enable}) }}
2924
{{ partial('_scripts/noscript.swig', {}, {cache: theme.cache.enable}) }}
3025
</head>
3126

3227
<body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang || page.language || config.language }}">
33-
<div class="container">
28+
<div class="container{%- if theme.motion.enable %} use-motion{%- endif %}">
3429
<div class="headband"></div>
3530

3631
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
3732
<div class="header-inner">{% include '_partials/header/index.swig' %}</div>
3833
</header>
3934

40-
{%- if theme.bookmark.enable %}
41-
<a class="book-mark-link book-mark-link-fixed" href="#"></a>
42-
{%- endif %}
43-
44-
{{ partial('_partials/github-banner.swig', {}, {cache: theme.cache.enable}) }}
45-
4635
<main id="main" class="main">
4736
<div class="main-inner">
4837
<div class="content-wrap">
@@ -68,18 +57,7 @@
6857
</div>
6958
</footer>
7059

71-
{%- if theme.back2top.enable and not theme.back2top.sidebar %}
72-
<div class="back-to-top">
73-
<i class="fa fa-arrow-up"></i>
74-
<span>0%</span>
75-
</div>
76-
{%- endif %}
77-
78-
{%- if theme.reading_progress.enable %}
79-
<div class="reading-progress-bar"></div>
80-
{%- endif %}
81-
82-
{{ partial('_partials/share.swig', {}, {cache: theme.cache.enable}) }}
60+
{{ partial('_partials/widgets.swig', {}, {cache: theme.cache.enable}) }}
8361
</div>
8462

8563
{{ partial('_scripts/index.swig', {}, {cache: theme.cache.enable}) }}
@@ -99,7 +77,7 @@
9977

10078
{%- if theme.pjax %}
10179
</div>
102-
{% include '_partials/pjax.swig' %}
80+
{{ partial('_scripts/pjax.swig', {}, {cache: theme.cache.enable}) }}
10381
{%- endif %}
10482
</body>
10583
</html>

‎layout/_macro/sidebar.swig‎

Lines changed: 25 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,50 +11,39 @@
1111
<div class="sidebar-inner">
1212

1313
{%- set display_toc = theme.toc.enable and display_toc %}
14-
15-
{%- if display_toc and toc(page.content).length > 1 %}
16-
<ul class="sidebar-nav motion-element">
17-
<li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
18-
{{ __('sidebar.toc') }}
19-
</li>
20-
<li class="sidebar-nav-overview" data-target="site-overview-wrap">
21-
{{ __('sidebar.overview') }}
22-
</li>
23-
</ul>
14+
{%- if display_toc %}
15+
{%- set next_toc_number = page.toc_number | default(theme.toc.number) %}
16+
{%- set next_toc_max_depth = page.toc_max_depth | default(theme.toc.max_depth) | default(6) %}
17+
{%- set toc = toc(page.content, { "class": "nav", list_number: next_toc_number, max_depth: next_toc_max_depth }) %}
18+
{%- set display_toc = toc.length > 1 and display_toc %}
2419
{%- endif %}
2520

26-
<div class="site-overview-wrap sidebar-panel{%- if not display_toc or toc(page.content).length <= 1 %} sidebar-panel-active{%- endif %}">
27-
<div class="site-overview">
28-
29-
{{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}
30-
31-
{{- next_inject('sidebar') }}
21+
<ul class="sidebar-nav">
22+
<li class="sidebar-nav-toc" data-target="post-toc-wrap">
23+
{{ __('sidebar.toc') }}
24+
</li>
25+
<li class="sidebar-nav-overview" data-target="site-overview-wrap">
26+
{{ __('sidebar.overview') }}
27+
</li>
28+
</ul>
3229

33-
</div>
34-
</div>
35-
36-
{%- if display_toc and toc(page.content).length > 1 %}
3730
<!--noindex-->
38-
<div class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
31+
<div class="post-toc-wrap sidebar-panel">
32+
{%- if display_toc %}
3933
<div class="post-toc">
34+
<div class="post-toc-content">{{ toc }}</div>
35+
</div>
36+
{%- endif %}
37+
</div>
38+
<!--/noindex-->
4039

41-
{%- set next_toc_number = theme.toc.number %}
42-
{%- if page.toc_number !== undefined %}
43-
{%- set next_toc_number = page.toc_number %}
44-
{%- endif %}
45-
{%- set next_toc_max_depth = page.toc_max_depth|default(theme.toc.max_depth)|default(6) %}
46-
{%- set toc = toc(page.content, { "class": "nav", list_number: next_toc_number, max_depth: next_toc_max_depth }) %}
47-
48-
{%- if toc.length <= 1 %}
49-
<p class="post-toc-empty">{{ __('post.toc_empty') }}</p>
50-
{% else %}
51-
<div class="post-toc-content">{{ toc }}</div>
52-
{%- endif %}
40+
<div class="site-overview-wrap sidebar-panel">
41+
<div class="site-overview">
42+
{{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}
5343

54-
</div>
44+
{{- next_inject('sidebar') }}
5545
</div>
56-
<!--/noindex-->
57-
{%- endif %}
46+
</div>
5847

5948
{%- if theme.back2top.enable and theme.back2top.sidebar %}
6049
<div class="back-to-top motion-element">

layout/_third-party/analytics/firestore.swig renamed to layout/_partials/analytics/firestore.swig

File renamed without changes.

‎layout/_partials/analytics/index.swig‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
{% include 'busuanzi-counter.swig' %}
22
{% include 'cnzz-analytics.swig' %}
3+
{% include 'firestore.swig' %}
4+
{% include 'lean-analytics.swig' %}
35
{% include 'tencent-analytics.swig' %}
46
{% include 'tencent-mta.swig' %}

layout/_third-party/analytics/lean-analytics.swig renamed to layout/_partials/analytics/lean-analytics.swig

File renamed without changes.

‎layout/_partials/share.swig‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

layout/_partials/github-banner.swig renamed to layout/_partials/widgets.swig

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
{%- if theme.back2top.enable and not theme.back2top.sidebar %}
2+
<div class="back-to-top">
3+
<i class="fa fa-arrow-up"></i>
4+
<span>0%</span>
5+
</div>
6+
{%- endif %}
7+
{%- if theme.reading_progress.enable %}
8+
<div class="reading-progress-bar"></div>
9+
{%- endif %}
10+
{%- if theme.bookmark.enable %}
11+
<a class="book-mark-link book-mark-link-fixed" href="#"></a>
12+
{%- endif %}
113
{%- if theme.github_banner.enable %}
214
{%- set github_URL = theme.github_banner.permalink %}
315
{%- set github_title = theme.github_banner.title %}
@@ -6,3 +18,8 @@
618

719
{{ next_url(github_URL, github_image, {class: 'github-corner', title: github_title, "aria-label": github_title}) }}
820
{%- endif %}
21+
{%- if theme.add_this_id %}
22+
<div class="addthis_inline_share_toolbox">
23+
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{ theme.add_this_id }}" async="async"></script>
24+
</div>
25+
{%- endif %}

‎layout/_scripts/pages/post-details.swig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{{- next_js('scrollspy.js', 'post-details.js') }}
1+
{{- next_js('post-details.js') }}

layout/_partials/pjax.swig renamed to layout/_scripts/pjax.swig

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,13 @@ var pjax = new Pjax({
44
'head title',
55
'#page-configurations',
66
'.content-wrap',
7-
'.sidebar-inner',
7+
'.post-toc-wrap',
88
'#pjax'
99
],
10-
switches: {
11-
'.sidebar-inner': Pjax.switches.innerHTML
12-
},
1310
analytics: false,
1411
cacheBust: false,
1512
scrollTo: !CONFIG.bookmark.enable
1613
});
17-
window.addEventListener('pjax:send', () => {
18-
$('.sidebar-inner').stop().fadeTo('fast', 0);
19-
});
2014
window.addEventListener('pjax:success', () => {
2115
document.querySelectorAll('script[pjax], script#page-configurations, #pjax script').forEach(element => {
2216
$(element).parent().append($(element).remove());
@@ -28,8 +22,6 @@ window.addEventListener('pjax:success', () => {
2822
.add(NexT.motion.middleWares.postList)
2923
.bootstrap();
3024
}
31-
$('.sidebar-inner .motion-element').css('opacity', 1);
32-
$('.sidebar-inner').fadeTo('fast', 1);
3325
NexT.utils.updateSidebarPosition();
3426
});
3527
</script>

0 commit comments

Comments
 (0)