zm/journal_com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tijiao

Browse Source
This commit is contained in:
始于初见
2025-04-30 14:07:03 +08:00
parent 3bc46efde8
commit 1be6e649e1
3 changed files with 262 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
article.html
View File

@@ -70,7 +70,7 @@
.conthtmn p { .conthtmn p {
line-height: 22px; line-height: 22px;
margin-bottom: 10px; margin-bottom: 10px;
color: #666; color: #333;
text-align: justify; text-align: justify;
} }

253
js/article.js
View File

@@ -1,5 +1,22 @@
// 列表 // 列表
function at_list() { function at_list() {
function adjustNavHeight() {
var windowHeight = window.innerHeight; // 获取页面高度
$(".anchor-nav").css("height", windowHeight + "px"); // 设置导航栏高度为页面高度
}
// 页面加载时调整导航栏高度
adjustNavHeight();
// 窗口大小变化时调整导航栏高度
$(window).resize(function () {
adjustNavHeight(); // 重新调整导航栏高度
});
// 获取地址栏信息 // 获取地址栏信息
function getQueryString(name) { function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
@@ -7665,13 +7682,19 @@ function article_con() {
var htmlContent = '' var htmlContent = ''
var navLinks = {
content: [], // 存放 content 类型的链接
image: [], // 存放 image 类型的链接
table: [] // 存放 table 类型的链接
};
htmlContent += arr.map((item) => { htmlContent += arr.map((item, index) => {
//批注 //批注
let contentHtml = ''; let contentHtml = '';
let sectionId = 'section-' + index; // 生成唯一的 ID
// 判断是否是图片 // 判断是否是图片
if (item.type == 1) { if (item.type == 1) {
var textContentimg = $('<div>').html(item.note).text(); // 提取纯文本
var picsrc = 'https://submission.tmrjournals.com/public/articleImage/' + item.image.url; var picsrc = 'https://submission.tmrjournals.com/public/articleImage/' + item.image.url;
var fun = "picPreview('" + picsrc + "');" var fun = "picPreview('" + picsrc + "');"
// console.log(fun) // console.log(fun)
@@ -7679,7 +7702,7 @@ function article_con() {
contentHtml = ` contentHtml = `
<p contenteditable="false" main-state="${item.state}" style="display:flex;align-items: center; <p contenteditable="false" main-state="${item.state}" style="display:flex;align-items: center;
justify-content: center;" class="MaxPicture pMain" data-id="${item.ami_id justify-content: center;" class="MaxPicture pMain" data-id="${item.ami_id
}" main-id="${item.am_id}"> }" main-id="${item.am_id}" id="${sectionId}">
<img src="${picsrc}" onclick="${fun}" style="width: ${item.width ? `${item.width}px` : '80%' <img src="${picsrc}" onclick="${fun}" style="width: ${item.width ? `${item.width}px` : '80%'
}" /> }" />
@@ -7693,13 +7716,14 @@ function article_con() {
}</p> }</p>
</p> </p>
`; `;
navLinks.image.push({ sectionId: sectionId, type: 'image', text: textContentimg || 'Image ' + (index + 1), href: '#' + sectionId, url: picsrc });
} else if (item.type == 2) { } else if (item.type == 2) {
var textContentTable = $('<div>').html(item.table.title).text(); // 提取纯文本
var tableList = JSON.parse(item.table.table_data); var tableList = JSON.parse(item.table.table_data);
contentHtml = ` contentHtml = `
<div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${item.am_id <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${item.am_id
}" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;"> }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;" id="${sectionId}">
<font class="font tableTitle" style="width:100%;font-family: 'Charis SIL';color:#333;" >${item.table.title ? item.table.title : ''}</font> <font class="font tableTitle" style="width:100%;font-family: 'Charis SIL';color:#333;" >${item.table.title ? item.table.title : ''}</font>
<table border="1" style="width: 100%; border-collapse: collapse; text-align: center; "> <table border="1" style="width: 100%; border-collapse: collapse; text-align: center; ">
@@ -7730,11 +7754,17 @@ function article_con() {
text-align:center;color:#333;" >${item.table.note ? item.table.note : '' text-align:center;color:#333;" >${item.table.note ? item.table.note : ''
}</p> }</p>
</div> </div>
`; `; navLinks.table.push({ sectionId: sectionId, type: 'table', text: textContentTable || 'Table ' + (index + 1), href: '#' + sectionId });
} else { } else {
item.content var textContent = $('<div>').html(item.content).text(); // 提取纯文本
console.log('item.content at line 7740:', item.am_id, item.content) contentHtml = `<p class="${item.is_h1 ? 'Ptitle pMain' : 'pMain'} " style="font-family: 'Charis SIL';min-height:12px;" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}" id="${sectionId}">${item.content}</p>`;
contentHtml = `<p class="${item.is_h1 ? 'Ptitle pMain' : 'pMain'} " style="font-family: 'Charis SIL';min-height:12px;" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${item.content}</p>`;
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(''); }).join('');
htmlContent = `<div class="newHtml2">${htmlContent}</div>` htmlContent = `<div class="newHtml2">${htmlContent}</div>`
$('.wen_rong .content-box .conthtmn').html(htmlContent); $('.wen_rong .content-box .conthtmn').html(htmlContent);
// 引用 console.log('navLinks.forEach at line 7752:', navLinks)
// 引用
var navHtml = `<div class="anchor-nav"><div class="jo-catalog-title"><span >OUTLINE</span></div><ul>`;
// 先添加 content 类型
navLinks.content.forEach(link => {
navHtml += `<li data-section="${link.sectionId}" class="outiline-item outiline-content ${link.is_h1 ? 'outiline-item-h1' : ''} ${link.is_h2 ? 'outiline-item-h2' : ''}" ><a href="${link.href}" style="font-style: italic;
font-weight: bold;"><b>${link.text}</b></a></li>`;
});
if (navLinks.image.length > 0) {
navHtml += `<li class="outiline-item outiline-img">
<h2 style="margin-bottom:20px;">Figures (${navLinks.image.length})</h2>
<div class="navLinksFigures">`;
// 使用 map 来遍历并返回 HTML 字符串
navHtml += navLinks.image.map((link, linkIndex) => {
return `<a href="${link.href}" data-section="${link.sectionId}">
<img src="${link.url}" style="object-fit: scale-down;width: 80px; height: 80px;border-radius:2px;border:1px solid #e0d4d4" />
<p style="margin-bottom:0; color: #333; cursor: pointer;font-family: 'Charis SIL';">Figure${linkIndex + 1}
</p>
</a>`;
}).join(''); // 使用 join 来拼接所有的 HTML 字符串
navHtml += `</div></li>`;
}
if (navLinks.table.length > 0) {
navHtml += `<li class="outiline-item outiline-img">
<h2 style="margin-bottom:20px;">Tables (${navLinks.table.length})</h2>
<div class="navLinksTables" >`;
// 使用 map 来遍历并返回 HTML 字符串
navHtml += navLinks.table.map((link, linkIndex) => {
return `<a data-section="${link.sectionId}" href="${link.href}" style="border-bottom: 1px solid rgb(255, 255, 255);
box-sizing: border-box;
font-weight: 500 !important;
padding: 2px 0 0 16px;
color: #333;
cursor: pointer;
font-family: 'Charis SIL';
line-height:18px;min-height: 12px;"
>
${link.text}
</a>`;
}).join(''); // 使用 join 来拼接所有的 HTML 字符串
navHtml += `</div></li>`;
}
if (result.data.refers.length > 0) {
navHtml += `<li class="outiline-item outiline-img">
<h2 style="margin-bottom:20px;"><a href="#References">References (${result.data.refers.length})</a></h2>
</li>`;
}
// 再添加 image 类型（按序号排序）
// 最后添加 table 类型（按序号排序）
navHtml += '</ul></div>';
if (result.data.refers.length > 0) { // 如果有引用数据 if (result.data.refers.length > 0) { // 如果有引用数据
var refs = ''; var refs = '';
var xuhao = 0; var xuhao = 0;
@@ -7753,21 +7846,21 @@ function article_con() {
if (result.data.refers[rr].refer_type == 'journal' && result.data.refers[rr].doilink != '') { if (result.data.refers[rr].refer_type == 'journal' && result.data.refers[rr].doilink != '') {
// journal 类型 // journal 类型
xuhao++; xuhao++;
item = "<div><p style='word-wrap: break-word;'>" + xuhao + '.&nbsp;' + result.data.refers[rr].author + '&nbsp;' + result.data.refers[rr].title + ".&nbsp;<i>" + result.data.refers[rr].joura + ".&nbsp;</i>" + result.data.refers[rr].dateno + "."; item = "<div><p style='word-wrap: break-word;'>" + `<b style="color:#006699;">${xuhao}</b>.&nbsp;` + result.data.refers[rr].author + '&nbsp;' + result.data.refers[rr].title + ".&nbsp;<i>" + result.data.refers[rr].joura + ".&nbsp;</i>" + result.data.refers[rr].dateno + ".";
// 在 "Available at:" 之前插入 <br/> 标签 // 在 "Available at:" 之前插入 <br/> 标签
item += "<br/><a class='refsLink' href='" + result.data.refers[rr].doilink + "' target='_blank' style='color:#006699; word-wrap:break-word;'>Available at:&nbsp;" + result.data.refers[rr].doilink + "</a>&nbsp;</p></div>"; item += "<br/><a class='refsLink' href='" + result.data.refers[rr].doilink + "' target='_blank' style='color:#006699; word-wrap:break-word;'>Available at:&nbsp;" + result.data.refers[rr].doilink + "</a>&nbsp;</p></div>";
refs += item; refs += item;
} else if (result.data.refers[rr].refer_type == 'book' && result.data.refers[rr].isbn != '') { } else if (result.data.refers[rr].refer_type == 'book' && result.data.refers[rr].isbn != '') {
// book 类型 // book 类型
xuhao++; xuhao++;
item = "<div><p style='word-wrap: break-word;'>" + xuhao + '.&nbsp;' + result.data.refers[rr].author + '&nbsp;' + result.data.refers[rr].title + ".&nbsp;" + result.data.refers[rr].dateno + "."; item = "<div><p style='word-wrap: break-word;'>" + `<b style="color:#006699;">${xuhao}</b>.&nbsp;` + result.data.refers[rr].author + '&nbsp;' + result.data.refers[rr].title + ".&nbsp;" + result.data.refers[rr].dateno + ".";
// 在 "Available at:" 之前插入 <br/> 标签 // 在 "Available at:" 之前插入 <br/> 标签
item += "<br/><a target='_blank' style='color:#006699; word-wrap:break-word;' href='" + result.data.refers[rr].isbn + "'>ISBN:&nbsp;" + result.data.refers[rr].isbn + "</a></p></div>"; item += "<br/><a target='_blank' style='color:#006699; word-wrap:break-word;' href='" + result.data.refers[rr].isbn + "'>ISBN:&nbsp;" + result.data.refers[rr].isbn + "</a></p></div>";
refs += item; 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) { } 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:" 链接 // other 类型，检查 refer_frag 中是否有 "Available at:" 链接
xuhao++; xuhao++;
item = "<div><p data-other='1' style='word-wrap: break-word;'>" + xuhao + '.&nbsp;'; item = "<div><p data-other='1' style='word-wrap: break-word;'>" + `<b style="color:#006699;">${xuhao}</b>.&nbsp;`
// 检查 refer_frag 中是否包含 "Available at:" // 检查 refer_frag 中是否包含 "Available at:"
if (result.data.refers[rr].refer_frag.indexOf('Available at:') !== -1) { if (result.data.refers[rr].refer_frag.indexOf('Available at:') !== -1) {
// 如果包含 "Available at:"，则在其前面插入 <br/> 标签 // 如果包含 "Available at:"，则在其前面插入 <br/> 标签
@@ -7782,8 +7875,140 @@ function article_con() {
} }
} }
// 将生成的所有引用内容插入到页面中 // 将生成的所有引用内容插入到页面中
$('.wen_rong .content-box .conthtmn').append('<div id="ArticleRef" class="ArticleRef"><p><b>References</b></p>' + refs + '</div>'); $('.wen_rong .content-box .conthtmn').append('<div id="ArticleRef" class="ArticleRef"><p id="References"><b>References</b></p>' + refs + '</div>');
} }
$('.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() 遍历
}
});
});
});
} }
}, },

26
js/js.js
View File

@@ -52,13 +52,31 @@ var Jour_num = localStorage.Journals_num;
$(document).ready(function () { $(document).ready(function () {
$("#tablist li").each(function (index) { $("#tablist li").each(function (index) {
$(this).click(function () { $(this).click(function () {
console.log('this at line 54:', this);
// 移除所有的 contentin 和 tabin 类
$(".contentin").removeClass("contentin"); $(".contentin").removeClass("contentin");
$(".tabin").removeClass("tabin"); $(".tabin").removeClass("tabin");
// 添加 contentin 和 tabin 类
$(".content-box>div").eq(index).addClass("contentin"); $(".content-box>div").eq(index).addClass("contentin");
$(this).addClass("tabin") $(this).addClass("tabin");
// 判断当前点击的 <li> 是否具有 'tarhtmn' 类名
if ($(this).hasClass('tarhtmn')) {
// 设置当前点击的 <li> 宽度为 100%
$(".left").css("width", "100%");
$(".right").hide(); // 隐藏 .right 标签
} else {
// 移除当前点击的 <li> 宽度样式
$(".left").css("width", "");
$(".right").show(); // 恢复显示 .right 标签
}
}); });
}) });
}) });
//返回顶部 //返回顶部
@@ -203,7 +221,7 @@ function imgbig1(which) {
imgsrc = imgsrc.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''); // 处理 URL 去掉多余字符 imgsrc = imgsrc.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''); // 处理 URL 去掉多余字符
$("#bigimg").css("display", "block"); $("#bigimg").css("display", "block");
$("#bigimg").html("<img src=" + imgsrc + " onmousewheel='return rollImg(this)'/>"); $("#bigimg").html("<img src=" + imgsrc + " onmousewheel='return rollImg(this)'/>");
$('#bigimg>img').css('margin-top', -$('#bigimg>img').height() / 2); $('#bigimg>img').css('margin-top', -$('#bigimg>img').height() / 2);