魔改NexT主题添加butterfly中的时间轴功能

发表于 分类于 阅读次数：
虽然博客主题变成简约风，但谁都想保留原来喜欢的东西是吧，记录下来备忘

简介

将hexo-butterfly主题的时间轴功能添加到hexo-next主题中

期望

实现next主题下markdown中使用如下代码实现原有的时间轴功能

1
2
3
4
5
6
7
8
{% timeline 2023,purple %}
<!-- timeline 12-02 -->
12月2日 xxxx
<!-- endtimeline -->
<!-- timeline 12-01 -->
12月1日 xxxx
<!-- endtimeline -->
{% endtimeline %}

上述代码解析后效果如下：

2023

12-02

12月2日 xxxx

12-01

12月1日 xxxx

涉及到文件

主要是themes/next中的文件

themes/next/scripts/tags/timeline.js，创建markdown解析脚本，内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
 * timeline
 * by Jerry
 */

'use strict'

function timeLineFn (args, content) {
  const tlBlock = /<!--\s*timeline (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtimeline\s*-->/g

  let result = ''
  let color = ''
  if (args.length) {
    args = args.join(' ').split(',')
    color = args[1]
    const mdContent = hexo.render.renderSync({ text: args[0], engine: 'markdown' })
    result += `<div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'>${mdContent}</div></div></div>`
  }

  const matches = []
  let match

  while ((match = tlBlock.exec(content)) !== null) {
    matches.push(match[1])
    matches.push(match[2])
  }

  for (let i = 0; i < matches.length; i += 2) {
    const tlChildTitle = hexo.render.renderSync({ text: matches[i], engine: 'markdown' })
    const tlChildContent = hexo.render.renderSync({ text: matches[i + 1], engine: 'markdown' })

    const tlTitleHtml = `<div class='timeline-item-title'><div class='item-circle'>${tlChildTitle}</div></div>`
    const tlContentHtml = `<div class='timeline-item-content'>${tlChildContent}</div>`

    result += `<div class='timeline-item'>${tlTitleHtml + tlContentHtml}</div>`
  }

  return `<div class="timeline ${color}">${result}</div>`
}

hexo.extend.tag.register('timeline', timeLineFn, { ends: true })

themes/next/source/css/_timeline.styl，创建对应的css文件，内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
$color-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
$tagsP-blue-color = #428bca
$tagsP-pink-color = #FF69B4
$tagsP-red-color = #FF0000
$tagsP-orange-color = #FF8C00
$tagsP-purple-color = #6f42c1
$tagsP-green-color = #5cb85c
$timeline-color = #555555
$hover-color = #FF7242

.timeline
  margin: 0 0 20px 10px
  padding: 14px 20px 5px
  border-left: 2px solid var(--timeline-color, $timeline-color)

  for $type in $color-types
    &.{$type}
      --timeline-color: lookup('$tagsP-' + $type + '-color')
      --timeline-bg: s('rgba(%s,%s,%s, 0.2)', red(lookup('$tagsP-' + $type + '-color')), green(lookup('$tagsP-' + $type + '-color')), blue(lookup('$tagsP-' + $type + '-color')))

  .timeline-item
    margin: 0 0 15px

    &:hover
      .item-circle
        &:before
          border-color: var(--timeline-color, $timeline-color)

    &.headline
      .timeline-item-title
        .item-circle
          > p
            font-weight: 600
            font-size: 1.2em

          &:before
            left: -28px
            border: 4px solid var(--timeline-color, $timeline-color)

      &:hover
        .item-circle
          &:before
            border-color: var(--pseudo-hover, $hover-color)

    .timeline-item-title
      position: relative

    .item-circle
      &:before
        position: absolute
        top: 50%
        left: -27px
        width: 6px
        height: 6px
        border: 3px solid var(--pseudo-hover, $hover-color)
        border-radius: 50%
        background: #FFFFFF
        content: ''
        transition: all .3s
        transform: translate(0, -50%)

      > p
        margin: 0 0 8px
        font-weight: 500

    .timeline-item-content
      position: relative
      padding: 12px 15px
      border-radius: 8px
      background: var(--timeline-bg, lighten($timeline-color, 85%))
      font-size: .83em

      & > :last-child
        margin-bottom: 0

  & + .timeline
    margin-top: -20px

themes/next/source/css/main.styl，导入_timeline.styl，追加如下代码

1
2
// timeline
@import '_timeline'