前言

想在markdown中添加进度条记录事件进度，一番搜寻过后发现可以利用Bootstrap自定义进度条。但是出现了一些问题，该篇记录解决方案。

导入Bootstrap

对于懒惰的我来说，不想自己构建进度条样式，直接引入他人写好的最为方便了，于是我找到了Bootstrap。引入的方式很简单，在博客主题config文件中找到inject,导入该链接即可

1
2
3
4
5
6
inject:
  head:
    - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>

使用

进入Bootstrap中文网查看样式以及例程。

问题

当我导入css样式后发现原有博客的css样式被覆盖了，字体变得非常大，且排列丑陋，这是我不能容忍的。

解决

翻阅资料，Bootstrap提供下载，那我只需要下载他编译并且压缩过的CSS集成包，并且从中找到关于进度条的样式即可。

只需要在themes\butterfly\source\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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
::after,
::before {
    box-sizing: border-box
}

@-webkit-keyframes progress-bar-stripes {
    0% {
        background-position-x: 1rem
    }
}

@keyframes progress-bar-stripes {
    0% {
        background-position-x: 1rem
    }
}

.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: .25rem
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #0d6efd;
    transition: width .6s ease
}

@media (prefers-reduced-motion:reduce) {
    .progress-bar {
        transition: none
    }
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem
}

.progress-bar-animated {
    -webkit-animation: 1s linear infinite progress-bar-stripes;
    animation: 1s linear infinite progress-bar-stripes
}

@media (prefers-reduced-motion:reduce) {
    .progress-bar-animated {
        -webkit-animation: none;
        animation: none
    }
}

.bg-primary {
    background-color: #0d6efd !important
}

.bg-secondary {
    background-color: #6c757d !important
}

.bg-success {
    background-color: #198754 !important
}

.bg-info {
    background-color: #0dcaf0 !important
}

.bg-warning {
    background-color: #ffc107 !important
}

.bg-danger {
    background-color: #dc3545 !important
}

.bg-light {
    background-color: #f8f9fa !important
}

.bg-dark {
    background-color: #212529 !important
}

然后在config文件中引用该文件即可，例如，我将以下内容写入名为mycss.css的文件中则这样导入。

1
2
3
4
5
6
7
8
9
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
  - <link rel="stylesheet" href="/css/mycss.css" />
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>