avatar

matery主题修改文章发布统计图的开始时间

以下是我个人的理解,是我查阅资料然后进行相关的修改而总结的,如果有误,请批评指正!

开始写教程之前,先看一个图

那么,这个统计图的开始时间是如何计算的呢?下面我就简单的讲解下,我的JavaScript知识目前学的比较浅,献丑了。

这个实现的方法就是运用了JavaScript技术,使用的JS文件是moment.jsMoment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率。它也有中文网站,大家可以去看下,传送门,其中有一个函数方法,为subtract(),使用方法为:

说明:通过减去时间来改变原始的 moment。

1
moment().subtract(Number, String);

Number取值:0-10之间的数字,当为日期和月份传入小数时,它们会被四舍五入到最接近的整数。 星期、季度、年份会被转换到日期或月份,然后四舍五入到最接近的整数。

1
2
moment().subtract(1.5, 'months') == moment().subtract(2, 'months')
moment().subtract(.7, 'years') == moment().subtract(8, 'months') //.7*12 = 8.4,取整到 8

String取值:

  • years(y):年
  • quarters(Q):季度
  • months(M):月
  • weeks(w):周
  • days(d):日
  • hours(h):时
  • minutes(m):分
  • seconds(s):秒
  • milliseconds(ms):毫秒

这段代码位置路径为themes/matery/layout/_widget/post-charts.ejs,大约在39行左右,源文件的代码为:

1
var startDate = moment().subtract(1, 'years').startOf('month');

说明:

  1. startDate变量为开始时间,也就是文章发布统计图中X轴中的开始时间

  2. subtract(Number, String),以上面的代码为例,今年为2020年04月,通过moment().subtract(1, ‘years’).startOf(‘month’)进行时间的更改,更改为了2019年04月,也就是图中所显示的效果

  3. startOf(‘month’),通过将原始的 moment 设置为时间单位的开头来对其进行更改。这里只能是以月份开头,因为源文件设置的时间显示格式就是年份-月份

简单的举几个官方文档所展示的例子:

1
2
3
4
5
6
7
8
9
10
moment().startOf('year');    // 设置为今年一月1日上午 12:00
moment().startOf('month'); // 设置为本月1日上午 12:00
moment().startOf('quarter'); // 设置为当前季度的开始,即每月的第一天上午 12:00
moment().startOf('week'); // 设置为本周的第一天上午 12:00
moment().startOf('isoWeek'); // 根据 ISO 8601 设置为本周的第一天上午 12:00
moment().startOf('day'); // 设置为今天上午 12:00
moment().startOf('date'); // 设置为今天上午 12:00
moment().startOf('hour'); // 设置为当前时间,但是 0 分钟、0 秒钟、0 毫秒
moment().startOf('minute'); // 设置为当前时间,但是 0 秒钟、0 毫秒
moment().startOf('second'); // 与 moment().milliseconds(0); 相同

更多的使用方法,自己去官方网站查询吧!http://momentjs.cn/docs

直接上修改方法:

将源文件中的代码由原来的

1
var startDate = moment().subtract(1, 'years').startOf('month');

改为:

1
var startDate = moment().subtract(6, 'months').startOf('month');

注意:记得将subtract(6, ‘months’)中的参数进行修改,根据你的首次文章发布时间进行修改,可能我的发布时间不一致,我的首篇文章发时间为2019-10,而现在的时间为2020-04,所以我的参数修改为了如上代码所显示的修改后的效果如下图

小伙伴们,看着教程自己动手去实践操作一下吧,看是否能够修改成功,如果失败,请在下方评论区留言,看到后,我会第一时间回复!

文章作者: Yafine
文章链接: https://yafine-blog.cn/posts/b93d.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 过客~励む
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论