
一直想对博客页面的时间进行格式化，把标准的时间格式修改成XX时间前或相对时间，因为时间已经直接输出到了页面DOM中，所以考虑直接使用相关的js库来实现比较方便，搜了一下发现二个JavaScript的时间处理库比较不错，他们是：`Moment.js`和`Day.js`。

使用相关库里处理后的时间显示效果：

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>范围</th>
      <th>Key</th>
      <th>示例输出</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0 到 44 秒</td>
      <td>s</td>
      <td>几秒钟前</td>
    </tr>
    <tr>
      <td><i>取消设置</i></td>
      <td>SS</td>
      <td>44 秒前</td>
    </tr>
    <tr>
      <td>45 至 89 秒</td>
      <td>m</td>
      <td>一分钟前</td>
    </tr>
    <tr>
      <td>90 秒到 44 分钟</td>
      <td>mm</td>
      <td>2分钟前... 44 分钟前</td>
    </tr>
    <tr>
      <td>45至89分钟</td>
      <td>h</td>
      <td>一小时前</td>
    </tr>
    <tr>
      <td>90 分钟到 21 小时</td>
      <td>hh</td>
      <td>2小时前 ... 21 小时前</td>
    </tr>
    <tr>
      <td>22 至 35 小时</td>
      <td>d</td>
      <td>一天前</td>
    </tr>
    <tr>
      <td>36 小时至 25 天</td>
      <td>dd</td>
      <td>2天前 ... 25天前</td>
    </tr>
    <tr>
      <td>26至45天</td>
      <td>M</td>
      <td>一个月前</td>
    </tr>
    <tr>
      <td>45至319天</td>
      <td>MM</td>
      <td>2个月前 ... 10个月前</td>
    </tr>
    <tr>
      <td>320 至 547 天（1.5 年）</td>
      <td>y</td>
      <td>一年前</td>
    </tr>
    <tr>
      <td>548天+</td>
      <td>yy</td>
      <td>2年前 ... 20年前</td>
    </tr>
  </tbody>
</table>

这样的看起来更人性化，好了，开搞。

## Moment.js

首先引入相关库的CDN：

1. `moment.min.js`主要的程序依赖库。
2. `moment-with-locales.min.js` 国际化的语言支持。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js" ></script>


DOM结构：

    <small class="cr-time">2019-12-30 16:25:07</small>

jQuery代码更方便一些：

    moment.locale('zh-CN');//设置为中文
    $(function () {
        $('.cr-time').each(function (i, e) {
            $(e).text(moment($(e).text()).fromNow())
        });
    });

至此 moment格式化时间的配置都搞定了，但是，我发现moment官网已经开始劝退了，一下引用官网的原话：

> Moment 团队对这些问题进行了详细讨论。 我们认识到许多现有项目可能会继续使用 Moment，但我们不希望在未来的新项目中使用 Moment。我们现在普遍认为 Moment 是处于维护模式的旧项目。 它没有死，但它确实结束了。

好家伙，我确实是都调试好了，都发布上线了，才看了一眼官网的首页，好吧我认了，看看推荐那些替代了？看到了：`Day.js`。

> Day.js 旨在成为 Moment.js 的极简替代品，使用类似的 API。 它不是直接替代品，但如果您习惯使用 Moment 的 API 并希望快速上手，请考虑使用 Day.js。

那就用`Day.js`来替换吧，整个替换过程很快，因为他们的属性方法都一样，只做了写小改动即可。

## Day.js

引入CDN ：

    <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
    <script src="https://unpkg.com/dayjs@1.8.21/plugin/relativeTime.js"></script>
    <script src="https://unpkg.com/dayjs@1.8.21/locale/zh-cn.js"></script>
        
这里自上而下的是：主程序库、relativeTime插件库和国际化的库。DOM的结构不变和上边的一样。

jQuery代码：

    dayjs.locale('zh-cn')// 设置中文
    dayjs.extend(window.dayjs_plugin_relativeTime)
    $(function () {
        $('.cr-time').each(function (i, e) {
            $(e).text(dayjs($(e).text()).fromNow())
        });
    });

其他就是把库的名称由`moment`换成了`dayjs`就可以了。然后就可以完美运行了，具体效果抬头看下文章标题下边就行啦。

相关网站：

[moment.js官方网站](https://moment.nodejs.cn/)
[day.js官方网站](https://dayjs.gitee.io/zh-CN/)

一直想对博客页面的时间进行格式化，把标准的时间格式修改成XX时间前或相对时间，因为时间已经直接输出到了页面DOM中，所以考虑直接使用相关的js库来实现比较方便，搜了一下发现二个JavaScript的时间处理库比较不错，他们是：`Moment.js`和`Day.js`。

使用Moment.js或Day.js对HTML页面上的时间进行格式化

这几天一直琢磨这给博客文章页面添加个第三方的评论系统，最好是免费的，然后就搜到了`giscus`，从安装到使用，用一个字来评价：真特么绝！具体效果可以拉倒最底端查看。

## giscus 安装与配置


首先，需要Using the GraphQL API for Discussions，这个跟着GitHub的官方文档安装没有任何难度，传送门：[Using the GraphQL API for Discussions](https://docs.github.com/en/graphql/guides/using-the-graphql-api-for-discussions),其实就是开通一个仓库的评论系统，一般大家默认选择存放站点静态文件的仓库就好。

然后，安装[giscus](https://github.com/apps/giscus)，点开后，install就OK了。

最后，打开这个网址：[giscus官方和评论系统代码配置](https://giscus.app/zh-CN)，把你刚刚打算作为评论系统的仓库地址填到配置项的表单字段那里，然后选择几个选项，就可以生成配置代码了，把它添加到你的博客需要的地方就可以显示出来了。

这几天一直琢磨这给博客文章页面添加个第三方的评论系统，最好是免费的，然后就搜到了`giscus`，从安装到使用，用一个字来评价：真特么绝！

giscus一款基于GitHub的免费评论系统！


[使用Python编写并部署个人静态博客:(一)分析与设计](https://suiyan.cc/2023/20230410075954.html)

[使用Python编写并部署个人静态博客:(二)实现静态页面的输出](https://suiyan.cc/2023/20230420101527.html)

[使用Python编写并部署个人静态博客:(三)搜集博客数据](https://suiyan.cc/2023/20230517084718.html)

[使用Python编写并部署个人静态博客:(四)逐步输出静态页面](https://suiyan.cc/2023/20230609081842.html)

[使用Python编写并部署个人静态博客:(五)Python异步输出博文页面](https://suiyan.cc/2023/20230613193700.html)

## 搜集博客数据

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/b01.png)

博客的静态页面的生成都是由博客的基础数据支撑的，搜集博客的基本信息和博客文章数据，是生成博客静态文件的核心功能。

## 博客的基础配置

每个博客都会有一些最基础的配置，例如博客的名称、简介、站长的昵称头像等，我们可以把这些基础的数据设置为一个配置文件，这里我使用了JSON格式的配置文件。可以在站点的根目录下创建一个config.json，其内容格式大概如下，可以根据自己的需要添加修改。

    {
        "dev": 0,
        "blog_name": "碎言博客",
        "blog_name_en": "SuiYan",
        "blog_author": "J.sky",
        "blog_description_en": "You see see you , This one day day di.",
        "blog_typed": [
            "Life is short, you need Python",
            "人生苦短，我用Python.",
            "Beautiful is better than ugly.",
            "美丽优于丑陋.",
            "Explicit is better than implicit.",
            "直白优于含蓄.",
            "Simple is better than complex.",
            "简单优于复杂.",
            "Complex is better than complicated.",
            "复杂优于繁琐.",
            "Readability counts.",
            "可读性很重要."
        ],
        "meta_description": " Python Django JavaScript 学习讨论,我们是一群热爱Python的程序员，人生苦短，我用JavaScript！一个不会JavaScript的Python开发者不是一个好网管。",
        "meta_keywords":"Python,Django,JavaScript,程序员,人生苦短,我用Python",
        "profile_image":"assets/images/avatar.jpg",
        "blog_bg": "assets/images/bg.jpg",
        "theme": "my_blog",
        "build": "blog",
        "md_dir": "articles",
        "blog_page_num":8,
        "blog_test_url":"http://127.0.0.1:5501/",
        "blog_url":"https://suiyan.cc/",
        "blog_sns": [
            {
                "ico": "github",
                "url": "https://github.com/bosichong/suiyan"
            },
            {
                "ico": "git",
                "url": "https://gitee.com/J_Sky/suiyan"
            },
            {
                "ico": "envelope",
                "url": "mailto:285911@gmail.com"
            },
            {
                "ico": "book",
                "url": "https://www.zhihu.com/people/J_sky/activities"
            },
            {
                "ico": "rss-square",
                "url": "https://suiyan.cc/rss.xml"
            }
        ],
        "nav": [
            {
                "ico": "home",
                "text": "Home",
                "url": ""
            },
            {
                "ico": "archive",
                "text": "Archive",
                "url": "archives.html"
            },
            {
                "ico": "tags",
                "text": "Tags",
                "url": "tags.html"
            },
            {
                "ico": "user-md",
                "text": "About Me",
                "url": "aboutme.html"
            },
            {
                "ico": "link",
                "text": "Links",
                "url": "links.html"
            }
        ]

    }

然后就可以在程序的文件中组织这些最基础的配置，例如提取文件地址和内容，分配静态文件生成发布的目录等，使用一些常量来定他们，放到代码的最顶部。

    APP_CONFIG = "config_my.json"
    BASE_DIR = os.path.dirname(os.path.abspath(__file__))  # 当前目录地址
    CONFIG = load_configjson(os.path.join(BASE_DIR, APP_CONFIG))  # 获取当前配置
    BLOGPAGES = os.path.join(BASE_DIR, CONFIG["build"])  # 所有静态资源存放目录
    ARTICLES_DIR = os.path.join(BASE_DIR, CONFIG["md_dir"])  # 博文目录
    THEME = os.path.join(BASE_DIR, "theme")  # 主题目录
    CONFIGJSON = os.path.join(BASE_DIR, APP_CONFIG)
    BLOGCONFIG = os.path.join(BLOGPAGES, 'config.json')
    BLOGDATAJSON = os.path.join(BLOGPAGES, 'blog_data.json')
    SUIYANVERSION = "3.1.0"  # 程序版本

通过Python读写文件的操作，定义一个方法从磁盘上来获取config.json的内容并转化为Python的字典：

    def load_configjson(jsonpath):
        """载入blog配置文件config.json"""
        config_code = loadcode(jsonpath)
        config = json.loads(config_code)
        return config

具体的代码可以查看碎言静态博客的代码仓库，这里只介绍一些项目的架构技巧。

## 博客文章以及其他相关数据的搜集

博客的静态文件除了基础的博客信息外，还有博客的归档、分类(标签)、博客页面的数据等，这些都需要从博客文章的Markdown文件数据集中计算得出。
这里我采用了从文章目录中搜集博客文章，读取文章头部的定义内容，组织这些数据创建一个blog.json的索引，这个索引可以用来生成归档和标签页面的内容，也可以用来作为搜索的依据。

具体通过递归扫描文章目录来生成：

    def create_blogdata_json(adir):
        """
        递归获得当前目录及其子目录中所有的.md文件列表。
        并创建blog的data索引JSON
        :param adir: 文章日志所在目录
        :param bdir: 站点根目录
        :return: json字符串
        """
        data_json = []
        # 当前目录下所有的文件、子目录、子目录下的文件。
        for root, dirs, files in os.walk(adir):
            for file in files:
                # 值读取.md
                if file.endswith('.md'):
                    url = os.path.join(root, file).replace(
                        adir + os.sep, '').replace('.md', '')  # 最后需要组装的相对目录
                    furl = os.path.join(root, file)  # 当前文件的绝对目录
                    f_data = extract_md_header(furl)  # 获取.md的文章信息转成字典
                    f_data["url"] = url
                    f_data["uptime"] = get_file_modification_time(os.path.join(root, file))
                    data_json.append(f_data)  # 添加到需要返回的数据数组中

        data_json.sort(key=lambda x: x["time"], reverse=True)  # 对数组进行降序排序
        data_json_str = json.dumps(data_json, ensure_ascii=False)  # 转化为json字符串
        return data_json_str

有了这个文章数据之后，基本上就是解决了所有的静态博客文件生成依赖了。之后我们就可以编写代码，依次或是批量生成相关的页面了。

博客的静态页面的生成都是由博客的基础数据支撑的，搜集博客的基本信息和博客文章数据，是生成博客静态文件的核心功能。

giscus 安装与配置

相关文章