Skip to content

Commit

Permalink
Opti. 文章页面显示效果优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@RavelloH
RavelloH committed Nov 23, 2024
1 parent e3108bd commit 64d3a81
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 136 deletions.
21 changes: 20 additions & 1 deletion src/app/posts/[slug]/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,25 @@ md.use(
}),
);

// 处理 h1 到 h6 标签
md.renderer.rules.heading_open = function (tokens, idx, options, env, self) {
const level = tokens[idx].tag.slice(1);
const title = tokens[idx + 1].content;
const slug = title.replace(/\s+/g, '-').toLowerCase();
return `<h${level}><a href="#${slug}" id="${slug}" title="${title}">`;
};

md.renderer.rules.heading_close = function (tokens, idx) {
const level = tokens[idx].tag.slice(1);
return `</a></h${level}>`;
};

md.renderer.rules.image = function (tokens, idx, options, env, self) {
const src = tokens[idx].attrGet('src');
const alt = tokens[idx].content;
return `<div class="imgbox"><img src="${src}" alt="${alt}" loading="lazy"><span>${alt}</span></div>`;
};

let title;

export async function generateStaticParams() {
Expand Down Expand Up @@ -110,7 +129,7 @@ export default async function Post(params) {
{createCategory(post.category)} {' • '}
<span className='ri-t-box-line'></span>{' '}
<span id='textLength'>{post.content.length}字</span>
{/* {' • '}<span className='ri-search-eye-line'></span> <span id='pageVisitors'>---</span> */}
{' • '}<span className='ri-search-eye-line'></span> <span id='pageVisitors'>---</span>
</p>
{createTag(post.tag)}
<hr />
Expand Down
152 changes: 108 additions & 44 deletions src/assets/js/Global.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,12 @@ function loadPage() {
zoomPics();
document.addEventListener('click', function (event) {
let target = event.target;
if (target.href) {
if (target.href && target.href !== window.location.href) {
const targetUrl = new URL(target.href);
const currentUrl = new URL(window.location.href);
if (targetUrl.pathname === currentUrl.pathname && targetUrl.hash !== currentUrl.hash) {
return;
}
event.preventDefault();
let url = target.href;
fadeOutPage('#viewmap');
Expand Down Expand Up @@ -414,6 +419,90 @@ function getTime(formats, startTime = '') {
}
}

// 目录重组
function updateMenu() {
var menuStructure = "<div id='articles-menu'>";
let titleSet = document.querySelectorAll(
'#articles-header h1 , #articles-body h2 , #articles-body h3 , #articles-body h4 , #articles-body h5 , #articles-body h6',
);
titleSet.forEach((element) => {
switch (element.outerHTML.substring(0, 3)) {
case '<h1':
menuStructure += `<br><span class='t1 center'>${element.innerHTML}</span><hr>`;
break;
case '<h2':
menuStructure += `<span class='t2'>${
'&nbsp;'.repeat(2) + '<span>' + element.innerHTML + '</span>'
}</span></br>`;
break;
case '<h3':
menuStructure += `<span class='t3'>${
'&nbsp;'.repeat(4) + '<span>' + element.innerHTML + '</span>'
}</span></br>`;
break;
case '<h4':
menuStructure += `<span class='t4'>${
'&nbsp;'.repeat(6) + '<span>' + element.innerHTML + '</span>'
}</span></br>`;
break;
case '<h5':
menuStructure += `<span class='t5'>${
'&nbsp;'.repeat(8) + '<span>' + element.innerHTML + '</span>'
}</span></br>`;
break;
case '<h6':
menuStructure += `<span class='t6'>${
'&nbsp;'.repeat(10) + '<span>' + element.innerHTML + '</span>'
}</span></br>`;
break;
}
});
menuStructure += '</div>';
return menuStructure;
}

// 目录高亮
function highlightMenu() {
if (cookie.getItem('settingEnableMenuHighlight') == 'false') {
return false;
}
document.querySelectorAll('#articles-menu *.active').forEach((element) => {
element.classList.remove('active');
});
const titleList = document.querySelectorAll(
'#articles-body h2 , #articles-body h3 , #articles-body h4 , #articles-body h5 , #articles-body h6',
);
for (let i = 0; i < titleList.length; i++) {
let heights = getHeightDifferent(titleList[i]);
if (heights == 0) {
document
.querySelector(`#articles-menu #${titleList[i].firstChild.id}`)
.classList.add('active');
return titleList[i];
}
if (heights > 0) {
document
.querySelector(`#articles-menu #${titleList[i - 1].firstChild.id}`)
.classList.add('active');
return titleList[i - 1];
}
}
return false;
}

// 相对高度差
function getHeightDifferent(element) {
const rect = element.getBoundingClientRect();
const vWidth = document.querySelector('#viewmap article').clientWidth;
const vHeight = document.querySelector('#viewmap article').clientHeight;

if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) {
return rect.top;
}

return 0;
}

// InfoBar功能分发
function openInfoBar(mode) {
infoBarMode = mode || '';
Expand All @@ -429,9 +518,8 @@ function openInfoBar(mode) {
switchElementContent('#infobar-left', updateMenu(), 0);
setTimeout(() => {
highlightMenu();
document
.querySelector('#articles-menu')
.setAttribute('onclick', 'setTimeout(()=>highlightMenu(),1000)');
document.querySelector('#articles-menu').onclick = () =>
setTimeout(() => highlightMenu(), 1000);
}, 10);
break;
case 'setting':
Expand Down Expand Up @@ -1230,6 +1318,21 @@ function loadPageType() {
20,
);
}
if (window.location.pathname.split('/')[2]) {
// 显示目录
i18n.originMessageBar = (
<a onClick={() => openInfoBar('menu')}>
目录&nbsp;<span class='i ri-list-unordered'></span>
</a>
);
message.switch(i18n.originMessageBar);
if (cookie.getItem('settingEnableUmamiAnalytics') !== 'false') {
analysis.getPageVisitors().then((data) => {
switchElementContent('#pageVisitors', data['pageviews'].value);
});
}
zoomPics();
}
break;
case '404page':
// code
Expand All @@ -1251,45 +1354,6 @@ function loadPageType() {
break;
case 'articles-index':
break;
case 'articles-context':
highlightNav('articles');
resetImage();
switchElementContent(
'#textLength',
document.querySelector('#articles-body').innerText.length + '字',
);
loadComment();
codeHighlight();
updateTitle();
resetFilter();
i18n.originMessageBar = `<a onclick='openInfoBar("menu")'>目录&nbsp;<span class="i ri-list-unordered"></span></a>`;
message.add(i18n.originMessageBar, 0);
if (cookie.getItem('settingEnableUmamiAnalytics') !== 'false') {
analysis.getPageVisitors().then((data) => {
switchElementContent('#pageVisitors', data['pageviews'].value);
});
}
document.querySelectorAll('time').forEach((element) => {
element.setAttribute('onclick', 'switchTimeDisplay(this)');
});
loadBox();
zoomPics();
prefetchImg();
getSearchData().then(() =>
switchElementContent(
'#more-articles',
loadMoreArticles(
document.querySelector('#articles-header h1 a').getAttribute('href'),
),
),
);
switchElementContent(
'#blockchain-data',
`<span class="i_small ri-shield-check-line"></span> 此数据所有权由区块链加密技术(<a href="https://scan.crossbell.io/tx/0xa486db8123cfa3d98a5cb4ba46d07b977be1138c3a51743feaaeb51bfcd8788a">区块链标识:#57514</a>)和智能合约保障仅归创作者所有。<br><hr><div class='center barcode page-id'>${base.encryption(
window.location.pathname,
)}</div>`,
);
break;
}
checkPageHash();
}
Expand Down Expand Up @@ -1337,4 +1401,4 @@ const globalModule = {
toggleLayoutUserbar,
};

export default globalModule;
export default globalModule;
91 changes: 0 additions & 91 deletions src/assets/js/display.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -618,48 +618,6 @@ function updateTitle() {
});
}

// 目录重组
function updateMenu() {
var menuStructure = "<div id='articles-menu'>";
let titleSet = document.querySelectorAll(
'#articles-header h1 , #articles-body h2 , #articles-body h3 , #articles-body h4 , #articles-body h5 , #articles-body h6',
);
titleSet.forEach((element) => {
switch (element.outerHTML.substring(0, 3)) {
case '<h1':
menuStructure += `<br><span class='t1 center'>${element.innerHTML}</span><hr>`;
break;
case '<h2':
menuStructure += `<span class='t2'>${
'&nbsp;'.repeat(2) + '<span>' + element.innerHTML + '</span>'
}</span></br>`;
break;
case '<h3':
menuStructure += `<span class='t3'>${
'&nbsp;'.repeat(4) + '<span>' + element.innerHTML + '</span>'
}</span></br>`;
break;
case '<h4':
menuStructure += `<span class='t4'>${
'&nbsp;'.repeat(6) + '<span>' + element.innerHTML + '</span>'
}</span></br>`;
break;
case '<h5':
menuStructure += `<span class='t5'>${
'&nbsp;'.repeat(8) + '<span>' + element.innerHTML + '</span>'
}</span></br>`;
break;
case '<h6':
menuStructure += `<span class='t6'>${
'&nbsp;'.repeat(10) + '<span>' + element.innerHTML + '</span>'
}</span></br>`;
break;
}
});
menuStructure += '</div>';
return menuStructure;
}

// 预加载图片
function prefetchImg() {
if (cookie.getItem('settingEnableImgPrefetch') == 'false') {
Expand All @@ -670,58 +628,9 @@ function prefetchImg() {
});
}

// 检测元素是否可见
function isElementVisible(element) {
const rect = element.getBoundingClientRect();
const vWidth = window.innerWidth || document.documentElement.clientWidth;
const vHeight = window.innerHeight || document.documentElement.clientHeight;
if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) {
return false;
}
return true;
}

// 相对高度差
function getHeightDifferent(element) {
const rect = element.getBoundingClientRect();
const vWidth = document.querySelector('#viewmap article').clientWidth;
const vHeight = document.querySelector('#viewmap article').clientHeight;

if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) {
return rect.top;
}

return 0;
}

// 目录高亮
function highlightMenu() {
if (cookie.getItem('settingEnableMenuHighlight') == 'false') {
return false;
}
document.querySelectorAll('#articles-menu *.active').forEach((element) => {
element.classList.remove('active');
});
const titleList = document.querySelectorAll(
'#articles-body h2 , #articles-body h3 , #articles-body h4 , #articles-body h5 , #articles-body h6',
);
for (let i = 0; i < titleList.length; i++) {
let heights = getHeightDifferent(titleList[i]);
if (heights == 0) {
document
.querySelector(`#articles-menu #${titleList[i].firstChild.id}`)
.classList.add('active');
return titleList[i];
}
if (heights > 0) {
document
.querySelector(`#articles-menu #${titleList[i - 1].firstChild.id}`)
.classList.add('active');
return titleList[i - 1];
}
}
return false;
}

// 重置筛选
function resetFilter() {
Expand Down

0 comments on commit 64d3a81

Please sign in to comment.