pbootcms获取详情页发布日期和现在日期之间的逐年日期

在 PBootCMS 中，如果你需要获取详情页的发布日期并与当前日期之间的逐年日期进行展示，可以使用 JavaScript 和 PBootCMS 的标签功能实现。下面是一个详细的示例，展示了如何实现这一功能。

示例代码

  1. HTML 结构：

    • 包含一个用于展示逐年日期的 <p> 元素。

  2. 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>

详细解释

  1. 获取当前年份：

    • 使用 JavaScript 的 Date 对象获取当前年份。
    javascript
     
    var currentYear = new Date().getFullYear();

  2. 获取详情页的发布年份：

    • 使用 PBootCMS 的 {content:date style=Y} 标签获取详情页的发布年份。
    html
     
    var publishYear = '{content:date style=Y}';

  3. 初始化逐年日期的 HTML 内容：

    • 初始化用于展示逐年日期的 <p> 元素的内容。
    javascript
     
    var history1 = document.getElementById('history1'); history1.innerHTML = '';

  4. 循环生成逐年日期：

    • 从当前年份循环到详情页的发布年份，生成逐年日期并展示。
    javascript
     
    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 可以引用它：

html
 
<p id="history1"></p>
posted @ 2024-10-01 21:47  黄文Rex  阅读(52)  评论(0)    收藏  举报