Show a permalink anchor when hovering over headings in main content (#2251)

* Implement heading permalinks, close #2246

Thanks to jekyll/jekyll for CSS.
Link anchor is visible when the mouse hovers over the title line.

* Build the updated _main.js
This commit is contained in:
iBug ♦ 2019-10-04 22:59:44 +08:00 committed by Michael Rose
parent 6a3d325cd4
commit 3b3da46fea
4 changed files with 34 additions and 6 deletions

1
.gitignore vendored
View file

@ -13,3 +13,4 @@ example/_site
Gemfile.lock Gemfile.lock
node_modules node_modules
npm-debug.log* npm-debug.log*
vendor/bundle

View file

@ -72,6 +72,23 @@
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
} }
h1, h2, h3, h4, h5, h6 {
.header-link {
position: relative;
left: 0.5em;
opacity: 0;
font-size: 0.8em;
-webkit-transition: opacity 0.2s ease-in-out 0.1s;
-moz-transition: opacity 0.2s ease-in-out 0.1s;
-o-transition: opacity 0.2s ease-in-out 0.1s;
transition: opacity 0.2s ease-in-out 0.1s;
}
&:hover .header-link {
opacity: 1;
}
}
p, p,
li, li,
dl { dl {

View file

@ -132,4 +132,17 @@ $(document).ready(function() {
closeOnContentClick: true, closeOnContentClick: true,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source. midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
}); });
// Add anchors for headings
$('.page__content').find('h1, h2, h3, h4, h5, h6').each(function() {
var id = $(this).attr('id');
if (id) {
var anchor = document.createElement("a");
anchor.className = 'header-link';
anchor.href = '#' + id;
anchor.innerHTML = '<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>';
anchor.title = "Permalink";
$(this).append(anchor);
}
});
}); });

File diff suppressed because one or more lines are too long