Comments (9)
Hello @jarrodscott what do you mean by headers ?
from ghostwriter.
hello @jbub
Sorry for not being more clear.
For example, if I have something like this somewhere in a post:
## Header 1
Some text....
## Header 2
More text...
What I would link to do is add an anchorjs-link
to each header. This page has an example of what I mean.
I am probably using some of the terminology incorrectly but I hope this makes more sense. What I am not sure about is whether this is a feature I can add to the theme or not. Thanks for your help.
from ghostwriter.
Ah i see, do you know of any other Hugo themes that support this ? I mean hugo already generates ids for headers, we would just have to add the classes right ?
from ghostwriter.
The only other theme I have much experience with is Hugo Academic which is where I got the idea. I am doing some digging now and will let you know what I find. I'm a bit new to Hugo :)
from ghostwriter.
Okay keep me posted :)
from ghostwriter.
Ok, I made some progress.
I found some code here and put it in a partial called links.html
exactly like this.
{{- with .Content -}}
<div itemid="articleBody">
{{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor"> 🔗︎</a> ${3}` | safeHTML }}
</div>
{{- end -}}
I then tried putting this line {{ partial "links.html" . }}
in the page/single.html
. I tried several places in the file. It worked, i.e. headers with links. The problem is that I get a duplicate copy of the the entire content of the page. One part has links the other doesn't.
For example, if I do this:
{{ partial "header.html" . }}
<div class="container">
<article class="post-container">
{{ partial "links.html" . }}
{{ partial "page-header.html" . }}
{{ partial "page-content.html" . }}
</article>
</div>
{{ partial "footer.html" . }}
I get this:
I have tried to place {{ partial "links.html" . }}
in different locations but it always causes something like this to happen. So close!
FYI I added this to styles.css
.hanchor { font-size: 100%; visibility: hidden; color:silver;} h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible}
from ghostwriter.
I'm a little slow. Pretty sure {{- with .Content -}}
is whats causing the doubling. I have another idea. More soon
from ghostwriter.
Got it to work for pages and posts by adding code to the page-content.html
& post-content.html
partial. Here is the code I added
{{ with .Content }}
<div itemid="articleBody">
{{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor"> 🔗︎</a> ${3}` | safeHTML }}
</div>
{{ end }}
And to to the styles.css
I added:
.hanchor { font-size: 100%; visibility: hidden; color:silver;}
h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible}
I could not get it to work when the post is *.Rmd
. Works fine with .*md
and *.Rmarkdown
.
UPDATE: I should have mentioned that I am working in RStudio with blogdown. Anyway, I made a little hack to get this to work in .Rmd
files.
At the end of my .Rmd
file I added this:
<script src='https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.0/anchor.js'></script>
<script>
anchors.add();
</script>
And to to the styles.css
I added:
.anchorjs-link::after {font-size: 100%;background-color: transparent;content: "\1F517";}
from ghostwriter.
Nice job, im going to close this one.
from ghostwriter.
Related Issues (20)
- Support of cards... ? HOT 2
- Missing / in resource url when previewing on Netlify HOT 2
- Logo display help HOT 1
- Logo display help HOT 1
- Support for author key in params
- Site not building in Netlify HOT 2
- Security issues with yarn.loc? HOT 7
- Change main page HOT 2
- Remove 'feed' icon on front page? HOT 2
- Add support of i18n? HOT 1
- Security Issues HOT 1
- config.toml alternative to config.yaml HOT 1
- Code formatting HOT 1
- Move CSS/JS files to assets folder, use pipes, remove dist folder HOT 3
- Social and Nav links need accessibility attributes updated HOT 3
- multiple <header> elements on each page HOT 3
- RSS icon missing label
- Remove Google+
- Cannot activate menu system through config file HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ghostwriter.