在 PBootCMS 中,如果你需要获取详情页的发布日期并与当前日期之间的逐年日期进行展示,可以使用 JavaScript 和 PBootCMS 的标签功能实现。下面是一个详细的示例,展示了如何实现这一功能。
示例代码
-
HTML 结构:
- 包含一个用于展示逐年日期的
<p>
元素。
- 包含一个用于展示逐年日期的
-
JavaScript 逻辑:
- 获取当前年份和详情页的发布年份。
- 循环生成逐年日期并展示。
详细步骤
1. HTML 结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PBootCMS 逐年日期展示</title>
</head>
<body>
<p id="history1"></p>
<script>
// 获取当前年份
var currentYear = new Date().getFullYear();
// 获取详情页的发布年份
var publishYear = '{content:date style=Y}';
// 初始化逐年日期的 HTML 内容
var history1 = document.getElementById('history1');
history1.innerHTML = '';
// 循环生成逐年日期
for (let i = currentYear; i >= publishYear; i--) {
history1.innerHTML += `
<li>
<span>${i}</span>-{content:date style=m-d}
<span><img src='pic.jpg'></span>
</li>
`;
}
</script>
</body>
</html>
详细解释
-
获取当前年份:
- 使用 JavaScript 的
Date
对象获取当前年份。
var currentYear = new Date().getFullYear();
- 使用 JavaScript 的
-
获取详情页的发布年份:
- 使用 PBootCMS 的
{content:date style=Y}
标签获取详情页的发布年份。
var publishYear = '{content:date style=Y}';
- 使用 PBootCMS 的
-
初始化逐年日期的 HTML 内容:
- 初始化用于展示逐年日期的
<p>
元素的内容。
var history1 = document.getElementById('history1'); history1.innerHTML = '';
- 初始化用于展示逐年日期的
-
循环生成逐年日期:
- 从当前年份循环到详情页的发布年份,生成逐年日期并展示。
for (let i = currentYear; i >= publishYear; i--) { history1.innerHTML += ` <li> <span>${i}</span>-{content:date style=m-d} <span><img src='pic.jpg'></span> </li> `; }
调用标签
在 HTML 中,使用 <p>
元素作为容器,并为其分配一个 ID(例如 history1
),以便 JavaScript 可以引用它:
<p id="history1"></p>
标签:年份,逐年,history1,日期,详情页,var,pbootcms
From: https://www.cnblogs.com/hwrex/p/18443854