Add anchor points to post list page

* post-year now has anchor point, you can click on it or input url with hash tag to jump to a specific year.
* See #39
This commit is contained in:
Track3 2019-03-24 11:45:41 +08:00
parent e6177e0fde
commit 028dc62e3b
7 changed files with 16 additions and 5 deletions

View file

@ -86,6 +86,12 @@ if (header !== null) {
listen('#img-btn', "click", showImg); listen('#img-btn', "click", showImg);
listen('.bg-img', "click", hideImg); listen('.bg-img', "click", hideImg);
document.querySelectorAll('.post-year').forEach((ele)=> {
ele.addEventListener('click', () => {
window.location.hash = '#' + ele.id;
});
});
window.addEventListener('scroll', throttle(() => { window.addEventListener('scroll', throttle(() => {
autoHideHeader(); autoHideHeader();

View file

@ -408,6 +408,11 @@ p.img-404 {
margin-right: 1.8em; margin-right: 1.8em;
font-size: 1.6em; font-size: 1.6em;
@include dimmed; @include dimmed;
&:hover {
text-decoration: underline;
cursor: pointer;
}
} }
.posts-list { .posts-list {

View file

@ -12,7 +12,7 @@
{{- end }} {{- end }}
{{- range .Data.Pages.GroupByDate "2006" }} {{- range .Data.Pages.GroupByDate "2006" }}
<div class="posts-group"> <div class="posts-group">
<div class="post-year">{{ .Key }}</div> <div class="post-year" id="{{ .Key }}">{{ .Key }}</div>
<ul class="posts-list"> <ul class="posts-list">
{{- range .Pages }} {{- range .Pages }}
<li class="post-item"> <li class="post-item">

View file

@ -6,4 +6,4 @@ mobileMenuVisible=false;}}
const showImg=()=>{document.querySelector('.bg-img').classList.add('show-bg-img');} const showImg=()=>{document.querySelector('.bg-img').classList.add('show-bg-img');}
const hideImg=()=>{document.querySelector('.bg-img').classList.remove('show-bg-img');} const hideImg=()=>{document.querySelector('.bg-img').classList.remove('show-bg-img');}
const toggleToc=()=>{document.getElementById('toc').classList.toggle('show-toc');} const toggleToc=()=>{document.getElementById('toc').classList.toggle('show-toc');}
if(header!==null){listen('#menu-btn',"click",toggleMobileMenu);listen('#toc-btn',"click",toggleToc);listen('#img-btn',"click",showImg);listen('.bg-img',"click",hideImg);window.addEventListener('scroll',throttle(()=>{autoHideHeader();if(mobileMenuVisible==true){toggleMobileMenu();}},250));} if(header!==null){listen('#menu-btn',"click",toggleMobileMenu);listen('#toc-btn',"click",toggleToc);listen('#img-btn',"click",showImg);listen('.bg-img',"click",hideImg);document.querySelectorAll('.post-year').forEach((ele)=>{ele.addEventListener('click',()=>{window.location.hash='#'+ele.id;});});window.addEventListener('scroll',throttle(()=>{autoHideHeader();if(mobileMenuVisible==true){toggleMobileMenu();}},250));}

View file

@ -1 +1 @@
{"Target":"js/main.min.8f39f24808e9d0a9b02da58c2d2838da859dc0b7bdfadbdb1883aae8b6adacfe.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-jznySAjp0KmwLaWMLSg42oWdwLe9+tvbGIOq6LatrP4="}} {"Target":"js/main.min.784417f5847151f848c339cf0acb13a06cbb648b1483435a28ed4556c4ead69b.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-eEQX9YRxUfhIwznPCssToGy7ZIsUg0NaKO1FVsTq1ps="}}

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
{"Target":"css/style.min.c693329ce3bac2503f88115a4011a284a06d53e30f484562a37664dc4c5f0a74.css","MediaType":"text/css","Data":{"Integrity":"sha256-xpMynOO6wlA/iBFaQBGihKBtU+MPSEVio3Zk3ExfCnQ="}} {"Target":"css/style.min.31706917653d2b9e8410abd431f30ec4359a88a94fc87a63654779d87329edec.css","MediaType":"text/css","Data":{"Integrity":"sha256-MXBpF2U9K56EEKvUMfMOxDWaiKlPyHpjZUd52HMp7ew="}}