Encryption Kills Table of Contents

[kiarafbickers]

Using this plug in seems to break the table of contents in the hipaper theme.

Expected Behavior

I should either be able to see my table of contents before I enter the encryption password, or have it load blank and see it come up after the password is entered. I believe this is how it works on your example.

Actual Behavior

Encrypting the blog post with any password breaks the table of contents entirely. It defaults to blank if any password is used, and does not load after the password is entered.

Steps to Reproduce the Problem

To test in your existing hexo blog,

1. Download the Hipaper theme git clone https://github.com/iTimeTraveler/hexo-theme-hipaper.git themes/hipaper
2. Switch the theme totheme: hipaperin the _config file.
3. Turn on encryption in the _config file.

encrypt: 
      enable: true

4. Add a password to a blog post.

---
password: mikemessi
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.
---

[kiarafbickers]

This is my current article.ejs:

<article id="<%= post.layout %>-<%= post.slug %>"<% if (!index && is_post()){ %>style="width: 66%; float:left;"<% } %> class="article article-type-<%= post.layout %>" itemscope itemprop="blogPost" >
  <div id="articleInner" class="clearfix post-1016 post type-post status-publish format-standard has-post-thumbnail hentry category-template-2 category-uncategorized tag-codex tag-edge-case tag-featured-image tag-image tag-template">
    <%- partial('post/gallery') %>
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
      </header>
    <% } %>
    <p>
    <div class="article-entry" itemprop="articleBody">
      <% if (post.excerpt && index){ %>
        <% if (post.photos != ""){ %>
          <div class="entry-thumbnail">
            <a href="<%- url_for(post.path) %>"><img src="<%= post.photos[0] %>" class="attachment-thumb-featured size-thumb-featured wp-post-image" alt=""></a>
          </div>
          <div class="entry-summary">
          <%- strip_html(post.excerpt) %>

        <% } else { %>

          <% if (theme.random_thumb){ %>
            <div class="entry-thumbnail">
              <a href="<%- url_for(post.path) %>"><img src="http://lorempixel.com/750/450/city/<%- Math.ceil(Math.random() * 10) %>" class="attachment-thumb-featured size-thumb-featured wp-post-image" alt=""></a>
            </div>
          <% } %>
          <div class="entry-summary">
          <%- strip_html(post.excerpt) %>

        <% } %>
          <p class="article-more-link">
            <a href="<%- url_for(post.path) %>#more"><%= __('read_more') %></a>
          </p>
        </div>
      <% } else { %>
        <% if(post.toc == true){ %>
    <div id="toc-div" class="toc-article" <% if (post.encrypt == true) { %>style="display:none" <% } %>>
        <strong class="toc-title">Index</strong>
        <% if (post.encrypt == true) { %>
            <%- toc(post.origin, {list_number: true}) %>
        <% } else { %>
            <%- toc(post.content, {list_number: true}) %>
        <% } %>
    </div>
<% } %>
<%- post.content %>
      <% } %>
    </div>
    <footer class="entry-meta entry-footer">
      <%- partial('post/category') %>
      <%- partial('post/tag') %>
      <% if (!index && post.comments && (theme.duoshuo_shortname || theme.disqus_shortname || theme.uyan_uid || theme.wumii || theme.livere_shortname)){ %>
        <%- partial('comment') %>
      <% } %>
    </footer>
    <hr class="entry-footer-hr">
  </div>
  <% if (!index){ %>
    <%- partial('post/nav') %>
  <% } %>
</article>

<!-- Table of Contents -->
<% if (!index && is_post()){ %>
  <aside id="sidebar">
    <div id="toc" class="toc-article">
    <strong class="toc-title"><%= __('contents') %></strong>
    <% if (toc(post.content) != ""){ %>
      <%- toc(post.content, { "class": "nav" }) %>
    <% } else { %>
      <ol class="nav"><%= __('none') %></ol>
    <% } %>
    </div>
  </aside>
<% } %>

[D0n9X1n]

Hi, this is a known issue, try to change the following code at the end of your article.ejs:

<!-- Table of Contents -->
<% if (!index && is_post()){ %>
  <aside id="sidebar">
    <div id="toc" class="toc-article">
    <strong class="toc-title"><%= __('contents') %></strong>
    <% if (toc(post.content) != ""){ %>
      <%- toc(post.content, { "class": "nav" }) %>
    <% } else { %>
      <ol class="nav"><%= __('none') %></ol>
    <% } %>
    </div>
  </aside>
<% } %>

into

<!-- Table of Contents -->
<% if (!index && is_post()){ %>
  <aside id="sidebar">
    <div id="toc" class="toc-article">
    <strong class="toc-title"><%= __('contents') %></strong>
    <% if (toc(post.content) != ""){ %>
        <% if (post.encrypt) { %>
            <div id="toc-div" style="display:none">
            <%- toc(post.origin,  {"class": "nav" }) %>
            </div>
        <% } else { %>
            <%- toc(post.content, {"class": "nav" }) %>
        <% } %>
    <% } else { %>
      <ol class="nav"><%= __('none') %></ol>
    <% } %>
    </div>
  </aside>
<% } %>

Because to make the encryption happen, the post.content is been changed, so when call toc(post.content), it will get the wrong result. Then, you can use post.origin as a replacement.

Hope this helps you.

[M1r0ku]

I had this problem too, but my theme is NexT, how can I fix that ？

[D0n9X1n]

Try #58 first. @fengkkk

[M1r0ku]

首先尝试＃58。@fengkkk

Thank you !!!

[M1r0ku]

首先尝试＃58。@fengkkk

我依照这篇博客进行了修改，但是遇到了相同的BUG：

• 进入文章页面后，侧边栏的导航处于“文章目录”，但同时显示了文章目录区与站点概览区
• 将导航切换到“站点概览”，看到正常的站点概览
• 再切换回“文章目录”，也是正常的文章目录

但是根据他提供的方案好像并不能修复，所以我不确定是不是因为NexT版本的差异，博主的版本是NexT.Muse v6.4.2，我的版本是NexT.Pisces v7.0

这是我的/themes/next/layout/_macro/sidebar.swig

{% macro render(is_post) %}
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    {% if theme.sidebar.onmobile %}
      <div id="sidebar-dimmer"></div>
    {% endif %}
    <div class="sidebar-inner">

      {% set display_toc = is_post and theme.toc.enable or is_page and theme.toc.enable %}

      {% if display_toc and toc(page.content).length > 1 %}
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            {{ __('sidebar.toc') }}
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            {{ __('sidebar.overview') }}
          </li>
        </ul>
      {% endif %}

      <div class="site-overview-wrap sidebar-panel{% if not display_toc or toc(page.content).length <= 1 %} sidebar-panel-active{% endif %}">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            {% if theme.avatar.url %}
              <img class="site-author-image" itemprop="image"
                src="{{ url_for( theme.avatar.url | default(theme.images + '/avatar.gif') ) }}"
                alt="{{ author }}"/>
            {% endif %}
              <p class="site-author-name" itemprop="name">{{ author }}</p>
              <p class="site-description motion-element" itemprop="description">{#
              #}{{ description }}{#
            #}</p>
          </div>

          {% if theme.site_state %}
            <nav class="site-state motion-element">
              {% if config.archive_dir != '/' and site.posts.length > 0 %}
                <div class="site-state-item site-state-posts">
                {% if theme.menu.archives %}
                  <a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">
                {% else %}
                  <a href="{{ url_for(config.archive_dir) }}">
                {% endif %}
                    <span class="site-state-item-count">{{ site.posts.length }}</span>
                    <span class="site-state-item-name">{{ __('state.posts') }}</span>
                  </a>
                </div>
              {% endif %}

              {% if site.categories.length > 0 %}
                {% set categoriesPageQuery = site.pages.find({type: 'categories'}, {lean: true}) %}
                {% set hasCategoriesPage = categoriesPageQuery.length > 0 %}
                <div class="site-state-item site-state-categories">
                  {% if hasCategoriesPage %}<a href="{{ url_for(categoriesPageQuery[0].path) }}">{% endif %}
                    {% set visibleCategories = 0 %}
                    {% for cat in site.categories %}
                      {% if cat.length %}{% set visibleCategories += 1 %}{% endif %}
                    {% endfor %}
                    <span class="site-state-item-count">{{ visibleCategories }}</span>
                    <span class="site-state-item-name">{{ __('state.categories') }}</span>
                  {% if hasCategoriesPage %}</a>{% endif %}
                </div>
              {% endif %}

              {% if site.tags.length > 0 %}
                {% set tagsPageQuery = site.pages.find({type: 'tags'}, {lean: true}) %}
                {% set hasTagsPage = tagsPageQuery.length > 0 %}
                <div class="site-state-item site-state-tags">
                  {% if hasTagsPage %}<a href="{{ url_for(tagsPageQuery[0].path) }}">{% endif %}
                    {% set visibleTags = 0 %}
                    {% for tag in site.tags %}
                      {% if tag.length %}{% set visibleTags += 1 %}{% endif %}
                    {% endfor %}
                    <span class="site-state-item-count">{{ visibleTags }}</span>
                    <span class="site-state-item-name">{{ __('state.tags') }}</span>
                  {% if hasTagsPage %}</a>{% endif %}
                </div>
              {% endif %}
            </nav>
          {% endif %}

          {% if theme.rss %}
            <div class="feed-link motion-element">
              <a href="{{ url_for(theme.rss) }}" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          {% endif %}

          {% if theme.social %}
            <div class="links-of-author motion-element">
              {% for name, link in theme.social %}
                <span class="links-of-author-item">
                  {% set sidebarURL = link.split('||')[0] | trim %}
                  {% if not (theme.social_icons.enable) or (not theme.social_icons.icons_only) %}
                    {% set sidebarText = name %}
                  {% endif %}
                  {%  if theme.social_icons.enable %}
                    {% set sidebarIcon = '<i class="fa fa-fw fa-' + link.split('||')[1] | trim | default('globe') + '"></i>' %}
                  {% endif %}
                  {{ next_url(sidebarURL, sidebarIcon + sidebarText, {title: name + ' &rarr; ' + sidebarURL}) }}
                </span>
              {% endfor %}
            </div>
          {% endif %}

          {% if theme.creative_commons.license and theme.creative_commons.sidebar %}
             <div class="cc-license motion-element" itemprop="license">
              {% if theme.creative_commons.license === 'zero' %}
                {% set ccType = 'publicdomain/zero/1.0/' %}
              {% else %}
                {% set ccType = 'licenses/' + theme.creative_commons.license + '/4.0/' %}
              {% endif %}
              {% set ccURL = 'https://creativecommons.org/' + ccType %}
              {% set ccImage = '<img src="' + url_for(theme.images + '/cc-' + theme.creative_commons.license + '.svg') + '" alt="Creative Commons"/>' %}
              {{ next_url(ccURL, ccImage, {class: 'cc-opacity'}) }}
             </div>
          {% endif %}

          {# Blogroll #}
          {% if theme.links %}
            <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
              <div class="links-of-blogroll-title">
                <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
                {{ theme.links_title }}
              </div>
              <ul class="links-of-blogroll-list">
                {% for blogrollText, blogrollURL in theme.links %}
                  <li class="links-of-blogroll-item">
                    {{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
                  </li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}

          {% if theme.custom_file_path.sidebar %}
            {% set custom_sidebar = '../../../../' + theme.custom_file_path.sidebar %}
          {% else %}
            {% set custom_sidebar = '../_custom/sidebar.swig' %}
          {% endif %}
          {% include custom_sidebar %}
        </div>
      </div>

      {% if display_toc and toc(page.content).length > 1 %}
      <!--noindex-->
        <div class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            {% set next_toc_number = theme.toc.number %}
            {% if page.toc_number !== undefined %}
              {% set next_toc_number = page.toc_number %}
            {% endif %}
            {% set next_toc_max_depth = page.toc_max_depth|default(theme.toc.max_depth)|default(6) %}
            {% set toc = toc(page.content, { "class": "nav", list_number: next_toc_number, max_depth: next_toc_max_depth }) %}

            {% if toc.length <= 1 %}
              <p class="post-toc-empty">{{ __('post.toc_empty') }}</p>
            {% else %}
              <div class="post-toc-content">{{ toc }}</div>
            {% endif %}

          </div>
        </div>
      <!--/noindex-->
      {% endif %}

      {% if theme.sidebar.b2t %}
        <div class="back-to-top">
          <i class="fa fa-arrow-up"></i>
          {% if theme.sidebar.scrollpercent %}
            <span id="scrollpercent"><span>0</span>%</span>
          {% endif %}
        </div>
      {% endif %}

    </div>
  </aside>
{% endmacro %}

[D0n9X1n]

@fengkkk it looks like a huge change, you may need to change code in multiple files and places. I prefer to disable TOC for your encrypted blog. It's impossible to track all the themes change for one person.. In the next version, I may figure out a better way to support toc without theme changes.

Since this is a English thread, prefer to use same language or you can create a new issue in Chinese with help wanted tag. This issue will be close in several days.

[M1r0ku]

@fengkkk it looks like a huge change, you may need to change code in multiple files and places. I prefer to disable TOC for your encrypted blog. It's impossible to track all the themes change for one person.. In the next version, I may figure out a better way to support toc without theme changes.

Since this is a English thread, prefer to use same language or you can create a new issue in Chinese with help wanted tag. This issue will be close in several days.

Okay,I'll try to disable it,thanks for your answers!