From 1be6e649e1f1ea23ffd34f27530318f7bfd82901 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com> Date: Wed, 30 Apr 2025 14:07:03 +0800 Subject: [PATCH] tijiao --- article.html | 2 +- js/article.js | 253 +++++++++++++++++++++++++++++++++++++++++++++++--- js/js.js | 26 +++++- 3 files changed, 262 insertions(+), 19 deletions(-) diff --git a/article.html b/article.html index c8257df..8adceac 100644 --- a/article.html +++ b/article.html @@ -70,7 +70,7 @@ .conthtmn p { line-height: 22px; margin-bottom: 10px; - color: #666; + color: #333; text-align: justify; } diff --git a/js/article.js b/js/article.js index 7786a56..cf4df24 100644 --- a/js/article.js +++ b/js/article.js @@ -1,5 +1,22 @@ // 列表 function at_list() { + + + + + function adjustNavHeight() { + var windowHeight = window.innerHeight; // 获取页面高度 + $(".anchor-nav").css("height", windowHeight + "px"); // 设置导航栏高度为页面高度 + } + + // 页面加载时调整导航栏高度 + adjustNavHeight(); + + // 窗口大小变化时调整导航栏高度 + $(window).resize(function () { + adjustNavHeight(); // 重新调整导航栏高度 + }); + // 获取地址栏信息 function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); @@ -7665,13 +7682,19 @@ function article_con() { var htmlContent = '' + var navLinks = { + content: [], // 存放 content 类型的链接 + image: [], // 存放 image 类型的链接 + table: [] // 存放 table 类型的链接 + }; - htmlContent += arr.map((item) => { + htmlContent += arr.map((item, index) => { //批注 let contentHtml = ''; - + let sectionId = 'section-' + index; // 生成唯一的 ID // 判断是否是图片 if (item.type == 1) { + var textContentimg = $('
').html(item.note).text(); // 提取纯文本 var picsrc = 'https://submission.tmrjournals.com/public/articleImage/' + item.image.url; var fun = "picPreview('" + picsrc + "');" // console.log(fun) @@ -7679,7 +7702,7 @@ function article_con() { contentHtml = `

+ }" main-id="${item.am_id}" id="${sectionId}"> @@ -7693,13 +7716,14 @@ function article_con() { }

`; - + navLinks.image.push({ sectionId: sectionId, type: 'image', text: textContentimg || 'Image ' + (index + 1), href: '#' + sectionId, url: picsrc }); } else if (item.type == 2) { + var textContentTable = $('
').html(item.table.title).text(); // 提取纯文本 var tableList = JSON.parse(item.table.table_data); contentHtml = `
+ }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;" id="${sectionId}"> ${item.table.title ? item.table.title : ''} @@ -7730,11 +7754,17 @@ function article_con() { text-align:center;color:#333;" >${item.table.note ? item.table.note : '' }

- `; + `; navLinks.table.push({ sectionId: sectionId, type: 'table', text: textContentTable || 'Table ' + (index + 1), href: '#' + sectionId }); + } else { - item.content - console.log('item.content at line 7740:', item.am_id, item.content) - contentHtml = `

${item.content}

`; + var textContent = $('
').html(item.content).text(); // 提取纯文本 + contentHtml = `

${item.content}

`; + + if (item.is_h1 || textContent === "Abstract" || textContent === "Keywords") { + + navLinks.content.push({ sectionId: sectionId, type: 'content', text: textContent, href: '#' + sectionId, is_h1: item.is_h1, }); + } + } // 判断是否是表格类型 @@ -7743,7 +7773,70 @@ function article_con() { }).join(''); htmlContent = `
${htmlContent}
` $('.wen_rong .content-box .conthtmn').html(htmlContent); - // 引用 + console.log('navLinks.forEach at line 7752:', navLinks) + // 引用 + var navHtml = `
OUTLINE
    `; + + // 先添加 content 类型 + navLinks.content.forEach(link => { + navHtml += `
  • ${link.text}
    • `; + + }); + if (navLinks.image.length > 0) { + navHtml += `
  • +

    Figures (${navLinks.image.length})

    +
    `; + + // 使用 map 来遍历并返回 HTML 字符串 + navHtml += navLinks.image.map((link, linkIndex) => { + return ` + + +

    Figure${linkIndex + 1} +

    +     `; + }).join(''); // 使用 join 来拼接所有的 HTML 字符串 + + navHtml += `
    • `; + } + if (navLinks.table.length > 0) { + navHtml += `
  • +

    Tables (${navLinks.table.length})

    +
    `; + + // 使用 map 来遍历并返回 HTML 字符串 + navHtml += navLinks.table.map((link, linkIndex) => { + return ` + + ${link.text} + `; + }).join(''); // 使用 join 来拼接所有的 HTML 字符串 + + navHtml += `
    • `; + } + if (result.data.refers.length > 0) { + navHtml += `
  • +

    References (${result.data.refers.length})

    +
    • `; + } + + // 再添加 image 类型（按序号排序） + + + // 最后添加 table 类型（按序号排序） + + + navHtml += '
'; if (result.data.refers.length > 0) { // 如果有引用数据 var refs = ''; var xuhao = 0; @@ -7753,21 +7846,21 @@ function article_con() { if (result.data.refers[rr].refer_type == 'journal' && result.data.refers[rr].doilink != '') { // journal 类型 xuhao++; - item = "

" + xuhao + '. ' + result.data.refers[rr].author + ' ' + result.data.refers[rr].title + ". " + result.data.refers[rr].joura + ". " + result.data.refers[rr].dateno + "."; + item = "

" + `${xuhao}. ` + result.data.refers[rr].author + ' ' + result.data.refers[rr].title + ". " + result.data.refers[rr].joura + ". " + result.data.refers[rr].dateno + "."; // 在 "Available at:" 之前插入
标签 item += "
Available at: " + result.data.refers[rr].doilink + " 

"; refs += item; } else if (result.data.refers[rr].refer_type == 'book' && result.data.refers[rr].isbn != '') { // book 类型 xuhao++; - item = "

" + xuhao + '. ' + result.data.refers[rr].author + ' ' + result.data.refers[rr].title + ". " + result.data.refers[rr].dateno + "."; + item = "

" + `${xuhao}. ` + result.data.refers[rr].author + ' ' + result.data.refers[rr].title + ". " + result.data.refers[rr].dateno + "."; // 在 "Available at:" 之前插入
标签 item += "
ISBN: " + result.data.refers[rr].isbn + "

"; refs += item; } else if (result.data.refers[rr].refer_type == 'other' && result.data.refers[rr].refer_frag != '' && result.data.refers[rr].refer_frag.length > 15) { // other 类型，检查 refer_frag 中是否有 "Available at:" 链接 xuhao++; - item = "

" + xuhao + '. '; + item = "

" + `${xuhao}. ` // 检查 refer_frag 中是否包含 "Available at:" if (result.data.refers[rr].refer_frag.indexOf('Available at:') !== -1) { // 如果包含 "Available at:"，则在其前面插入
标签 @@ -7782,8 +7875,140 @@ function article_con() { } } // 将生成的所有引用内容插入到页面中 - $('.wen_rong .content-box .conthtmn').append('

References

' + refs + '
'); + $('.wen_rong .content-box .conthtmn').append('

References

' + refs + '
'); } + $('.wen_rong .content-box .conthtmn').prepend(navHtml); + // 给导航栏添加固定定位样式 + // 给导航栏添加固定定位样式 + $('.anchor-nav').css({ + 'position': 'fixed', + 'display': 'none', + 'top': '0', // 固定在顶部 + 'left': '0', // 固定在左侧 + 'width': '285px', // 设置固定宽度 + 'background': '#ffffff', // 背景色 + + // 'border-radius': '12px', // 圆角效果 + 'box-shadow': '0 4px 8px rgba(0, 0, 0, 0.1)', // 阴影效果 + 'z-index': '999', // 确保导航栏位于其他元素之上 + 'overflow-y': 'auto', // 允许垂直滚动 + 'height': '100vh', // 让导航栏充满整个页面高度 + 'position': 'sticky', /* 固定定位 */ + 'float': 'left', /* 固定定位 */ + /* 导航栏顶部距离为0 */ + 'box-shadow': '2px 0 5px rgba(0, 0, 0, 0.1)', + }); + $('.jo-catalog-title').css({ + + + 'line-height': '40px', + 'font-size': '18px', + 'color': '#333', + 'border-bottom': '1px solid #f0f0f0', + + }); + $('.outiline-item').css({ + + + 'border-bottom': '1px solid #fff', + // 'margin-bottom': '10px', + 'box-sizing': 'border-box', + + 'font-size': '14px', + 'color': '#454545', + 'cursor': 'pointer', + }); + $('.outiline-content').css({ + 'padding': '4px 0', + 'margin-left': '16px', + + 'color': '#333', + 'cursor': 'pointer', + 'font-family': 'Charis SIL', + // 'border-left': '3px solid #efefef', + + }); + + $('.outiline-img').css({ + + 'margin-top': '20px', + 'margin-bottom': '20px', + // 'border-left': '3px solid #efefef', + + }); + $('.outiline-table').css({ + + 'margin-top': '20px', + 'margin-bottom': '20px', + + // 'border-left': '3px solid #efefef', + + }); + $('.navLinksFigures').css({ + 'display': 'flex', + 'flex-wrap': 'wrap', + 'gap': '10px', + + 'margin-bottom': '10px', + 'margin-top': '10px', + + }); + $('.navLinksTables').css({ + 'display': 'flex', + 'flex-wrap': 'wrap', + 'gap': '4px', + + 'margin-bottom': '10px', + 'margin-top': '10px', + + }); + + // 在滚动时保持导航栏在视口内 + + $(document).ready(function () { + // 监听右侧滚动区域 + $('.newBox').scroll(function () { + var scrollTop = $(this).scrollTop(); // 获取当前右侧滚动的位置 + var scrollHeight = $(this)[0].scrollHeight; // 获取右侧滚动区域的总高度 + var containerHeight = $(this).height(); // 获取右侧容器的高度 + + // 获取所有右侧的 .pMain + var sections = $('.newBox').find('.pMain'); + var navLinks = $('.anchor-nav').find('a'); // 获取所有左侧的导航链接 + + // 初始化清除所有导航链接的高亮 + navLinks.css({ + 'color': '', // 恢复默认颜色 + 'font-weight': '' // 恢复默认字体粗细 + }); + + // 遍历所有的 section + sections.each(function (index, section) { + var sectionTop = $(section).offset().top - $('.newBox').offset().top + scrollTop; // 计算每个 .pMain 相对于 .newBox 的位置 + var sectionBottom = sectionTop + $(section).outerHeight(); // 获取每个 section 的底部位置 + + // 判断该 section 是否在可视区域内 + if (scrollTop + containerHeight >= sectionTop && scrollTop <= sectionBottom) { + // 高亮对应的导航链接 + $(navLinks[index]).css({ + 'color': 'rgb(0, 102, 153)', // 激活时颜色变为蓝色 + 'font-weight': 'bold' // 激活时加粗 + }); + // 只高亮一个链接，找到第一个符合条件的并停止遍历 + return false; // 结束 .each() 遍历 + } + }); + }); + }); + + + + + + + + + } }, diff --git a/js/js.js b/js/js.js index 6b1113e..fc921b4 100644 --- a/js/js.js +++ b/js/js.js @@ -52,13 +52,31 @@ var Jour_num = localStorage.Journals_num; $(document).ready(function () { $("#tablist li").each(function (index) { $(this).click(function () { + console.log('this at line 54:', this); + + // 移除所有的 contentin 和 tabin 类 $(".contentin").removeClass("contentin"); $(".tabin").removeClass("tabin"); + + // 添加 contentin 和 tabin 类 $(".content-box>div").eq(index).addClass("contentin"); - $(this).addClass("tabin") + $(this).addClass("tabin"); + + // 判断当前点击的
  • 是否具有 'tarhtmn' 类名 + if ($(this).hasClass('tarhtmn')) { + // 设置当前点击的
  • 宽度为 100% + $(".left").css("width", "100%"); + $(".right").hide(); // 隐藏 .right 标签 + } else { + // 移除当前点击的
  • 宽度样式 + $(".left").css("width", ""); + $(".right").show(); // 恢复显示 .right 标签 + } }); - }) -}) + }); +}); + + //返回顶部 @@ -203,7 +221,7 @@ function imgbig1(which) { imgsrc = imgsrc.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''); // 处理 URL 去掉多余字符 - + $("#bigimg").css("display", "block"); $("#bigimg").html(""); $('#bigimg>img').css('margin-top', -$('#bigimg>img').height() / 2);