Merge branch 'feature/add-heading-anchors'
This commit is contained in:
commit
5dc830d11e
6 changed files with 124 additions and 41 deletions
|
@ -147,6 +147,43 @@
|
|||
|
||||
{% endif %}
|
||||
|
||||
<!-- Create heading anchors -->
|
||||
|
||||
{% assign heading_levels = '2,3,4,5' | split: ',' %}
|
||||
{% assign _heading_content = _content %}
|
||||
|
||||
{% for level in heading_levels %}
|
||||
{% capture mark_start %}<h{{ level }} id="{% endcapture %}
|
||||
{% capture mark_end %}</h{{ level }}>{% endcapture %}
|
||||
|
||||
{% if _heading_content contains mark_start %}
|
||||
{% assign _new_content = nil %}
|
||||
{% assign heading_snippets = _heading_content | split: mark_start %}
|
||||
|
||||
{% for snippet in heading_snippets %}
|
||||
{% if forloop.first %}
|
||||
{% assign _new_content = snippet %}
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
|
||||
{% assign id = snippet | split: '"' | first %}
|
||||
{% capture anchor %}<a href="#{{ id }}"><i class="fas fa-hashtag"></i></a>{% endcapture %}
|
||||
|
||||
{% assign left = snippet | split: mark_end | first %}
|
||||
{% assign right = snippet | replace: left, '' %}
|
||||
|
||||
{% assign _new_content = _new_content | append: mark_start
|
||||
| append: left | append: anchor | append: mark_end | append: right
|
||||
%}
|
||||
|
||||
{% endfor %}
|
||||
|
||||
{% assign _heading_content = _new_content %}
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign _content = _heading_content %}
|
||||
|
||||
<!-- return -->
|
||||
|
||||
|
|
|
@ -8,6 +8,11 @@
|
|||
*/
|
||||
|
||||
$(function() {
|
||||
const REM = 16; /* 16px */
|
||||
const $topbarTitle = $("#topbar-title");
|
||||
const topbarHeight = $("#topbar-wrapper").outerHeight();
|
||||
const SCROLL_MARK = "scroll-focus";
|
||||
|
||||
$("a[href*='#']")
|
||||
.not("[href='#']")
|
||||
.not("[href='#0']")
|
||||
|
@ -15,42 +20,49 @@ $(function() {
|
|||
|
||||
if (this.pathname.replace(/^\//, "") === location.pathname.replace(/^\//, "")) {
|
||||
if (location.hostname === this.hostname) {
|
||||
|
||||
const REM = 16; /* 16px */
|
||||
|
||||
const hash = decodeURI(this.hash);
|
||||
let isFnRef = RegExp(/^#fnref:/).test(hash);
|
||||
let isFn = isFnRef? false : RegExp(/^#fn:/).test(hash);
|
||||
let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
|
||||
let toFootnote = toFootnoteRef? false : RegExp(/^#fn:/).test(hash);
|
||||
let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash;
|
||||
let target = $(selector);
|
||||
let $target = $(selector);
|
||||
|
||||
if (target.length) {
|
||||
let parent = $(this).parent().prop("tagName");
|
||||
let isAnchor = RegExp(/^H\d/).test(parent);
|
||||
|
||||
if (typeof $target !== "undefined") {
|
||||
event.preventDefault();
|
||||
|
||||
if (history.pushState) { /* add hash to URL */
|
||||
history.pushState(null, null, hash);
|
||||
}
|
||||
|
||||
let curOffset = $(this).offset().top;
|
||||
let destOffset = target.offset().top;
|
||||
const scrollUp = (destOffset < curOffset);
|
||||
const topbarHeight = $("#topbar-wrapper").outerHeight();
|
||||
let curOffset = isAnchor? $(this).offset().top : $(window).scrollTop();
|
||||
let destOffset = $target.offset().top;
|
||||
|
||||
if (scrollUp && isFnRef) {
|
||||
/* Avoid the top-bar covering `fnref` when scrolling up
|
||||
because `fnref` has no `%anchor`(see: module.scss) style. */
|
||||
destOffset -= (topbarHeight + REM / 2);
|
||||
if (destOffset < curOffset) { // scroll up
|
||||
if (toFootnoteRef) {
|
||||
// Avoid the top-bar covering `fnref` when scrolling up
|
||||
// because `fnref` has no `%anchor`(see: module.scss) style.
|
||||
destOffset -= (topbarHeight + REM / 2);
|
||||
}
|
||||
|
||||
if (isAnchor && $topbarTitle.is(":hidden")) {
|
||||
destOffset += topbarHeight;
|
||||
}
|
||||
|
||||
} else { // scroll down
|
||||
if (!isAnchor && !toFootnote) { // the ToC item
|
||||
destOffset += topbarHeight;
|
||||
}
|
||||
}
|
||||
|
||||
$("html,body").animate({
|
||||
scrollTop: destOffset
|
||||
}, 800, () => {
|
||||
|
||||
const $target = $(target);
|
||||
// const $target = $($target);
|
||||
$target.focus();
|
||||
|
||||
const SCROLL_MARK = "scroll-focus";
|
||||
|
||||
/* clean up old scroll mark */
|
||||
if ($(`[${SCROLL_MARK}=true]`).length) {
|
||||
$(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false);
|
||||
|
@ -62,7 +74,7 @@ $(function() {
|
|||
}
|
||||
|
||||
/* set scroll mark to footnotes */
|
||||
if (isFn || isFnRef) {
|
||||
if (toFootnote || toFootnoteRef) {
|
||||
$target.attr(SCROLL_MARK, true);
|
||||
}
|
||||
|
||||
|
|
|
@ -15,10 +15,18 @@ layout: default
|
|||
{{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
|
||||
</h1>
|
||||
<div class="post-content">
|
||||
{% include refactor-content.html content=content %}
|
||||
{% if page.layout == 'page' %}
|
||||
{% include refactor-content.html content=content %}
|
||||
{% else %}
|
||||
{{ content }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include refactor-content.html content=content %}
|
||||
{% if page.layout == 'post' %}
|
||||
{% include refactor-content.html content=content %}
|
||||
{% else %}
|
||||
{{ content }}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div> <!-- #core-wrapper -->
|
||||
|
|
|
@ -48,23 +48,23 @@ body {
|
|||
h1 {
|
||||
@extend %heading;
|
||||
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %heading;
|
||||
@extend %section;
|
||||
@extend %anchor;
|
||||
@extend %anchor-relative;
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %heading;
|
||||
@extend %section;
|
||||
@extend %anchor;
|
||||
@extend %anchor-relative;
|
||||
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
@ -362,7 +362,7 @@ img[data-src] {
|
|||
.post {
|
||||
h1 {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -1126,7 +1126,7 @@ $sidebar-display: "sidebar-display";
|
|||
|
||||
h1 {
|
||||
margin-top: 2.2rem;
|
||||
font-size: 1.55rem;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -10,6 +10,44 @@
|
|||
font-family: 'Lato', 'Microsoft Yahei', sans-serif;
|
||||
}
|
||||
|
||||
%section {
|
||||
padding-top: 3.5rem;
|
||||
margin-top: -2.5rem;
|
||||
|
||||
#core-wrapper & {
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
%anchor {
|
||||
> a {
|
||||
font-size: 70%;
|
||||
visibility: hidden;
|
||||
margin-left: 0.25rem;
|
||||
border-bottom: none !important;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> a {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%anchor-relative {
|
||||
@extend %anchor;
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
%tag-hover {
|
||||
background: var(--tag-hover);
|
||||
transition: background 0.35s ease-in-out;
|
||||
|
@ -47,18 +85,6 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
%section {
|
||||
#core-wrapper & {
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
%anchor {
|
||||
padding-top: 3.5rem;
|
||||
margin-top: -2.5rem;
|
||||
}
|
||||
|
||||
%cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
2
assets/js/dist/post.min.js
vendored
2
assets/js/dist/post.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue