Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

permalink in anchors shouldn't be parsed by TOC helper #102

Closed
noraj opened this issue Jan 5, 2020 · 2 comments · Fixed by hexojs/hexo-util#175
Closed

permalink in anchors shouldn't be parsed by TOC helper #102

noraj opened this issue Jan 5, 2020 · 2 comments · Fixed by hexojs/hexo-util#175

Comments

@noraj
Copy link

noraj commented Jan 5, 2020

Issue / current behavior

Currently permalinks are added as a link inside the title, for example:

<h3 id="create-a-new-post">
  <a class="header-anchor" href="#create-a-new-post">#</a>
  Create a new post
</h3>

This will produce something like:

image

The problem is the permalink symbol will be part of the title.

So when you use, for example, the toc helper, the permalink symbol will be added in the title too.

image

<ol class="toc">
    <li class="toc-item toc-level-2"><a class="toc-link" href="#quick-start"><span class="toc-number">1.</span> <span class="toc-text">#Quick Start</span></a>
        <ol class="toc-child">
            <li class="toc-item toc-level-3"><a class="toc-link" href="#create-a-new-post"><span class="toc-number">1.1.</span> <span class="toc-text">#Create a new post</span></a></li>
            <li class="toc-item toc-level-3"><a class="toc-link" href="#run-server"><span class="toc-number">1.2.</span> <span class="toc-text">#Run server</span></a></li>
            <li class="toc-item toc-level-3"><a class="toc-link" href="#generate-static-files"><span class="toc-number">1.3.</span> <span class="toc-text">#Generate static files</span></a></li>
            <li class="toc-item toc-level-3"><a class="toc-link" href="#deploy-to-remote-sites"><span class="toc-number">1.4.</span> <span class="toc-text">#Deploy to remote sites</span></a></li>
        </ol>
    </li>
</ol>

Idea of fixing / workaround

My workaround was to set a null symbol permalinkSymbol: '' and to add some css (sass here):

h1,h2,h3,h4,h5,h6 
  a::before
    content: '#'

So this display the same and is still clickable but there is no more content in the title.

Same look

image

No more issue with the toc helper

image

image

But I think it can't be fixed like this because this plugin only generates html, no css.

Alternative idea

Fix the toc helper to select only text content and not other sub-elements like links.

https://github.com/hexojs/hexo/issues/4057

Environment

Happening with both hexo: 4.2.0 and hexo: 4.1.1

@curbengh
Copy link
Contributor

Currently permalinks are added as a link inside the title

I assume you enabled permalink? It's disabled by default in v4 (of this plugin).

markdown:
  anchors:
    permalink: true

The problem is the permalink symbol will be part of the title.

What is the expected behavior?

Show permalink symbol in heading, but not in toc?

@curbengh curbengh changed the title Link inserted in title conflict with helpers permalink in anchors shouldn't be parsed by TOC helper Jan 11, 2020
@noraj
Copy link
Author

noraj commented Jan 12, 2020

I assume you enabled permalink? It's disabled by default in v4 (of this plugin).

Yeah I enabled permalink because I want them.

What is the expected behavior?

Show permalink symbol in heading, but not in toc?

Exactly. I see you confirmed the issue is coming from cheerio (hexojs/hexo-util#174 (comment)).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants