添加显示百分比进度条返回顶部按钮以及 featured-tags | Blog 折腾小记（5）

博主： WithdewHua
发布时间：2018 年 10 月 17 日
4445 次浏览
暂无评论
3986字数
分类：笔记•记录

## Featured-Tags

之前在`Jekyll`上用的主题里面有个`featured tags`，就是在侧栏显示超过设定文章数量的标签，决定将其改写下用到`Hugo`的主题上。

在`sidebar.html`里面编写内容如下：

```html
{{ if .Site.Params.featured_tags }}
<section>
    <header>
        <h3>
            <a href="/tags/">FEATURED TAGS</a>
        </h3>
    </header>
    <div class = "featured-tags">
        {{ $featured_condition_size := .Site.Params.featured_condition_size }}
        {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
        {{ if gt (len $taxonomy.Pages) $featured_condition_size }}
        <a href='{{ "/tags/" | relLangURL }}{{ $name | urlize }}/' title="{{ $name }}">
            {{ $name }}
        </a>
        {{ end }}
        {{ end }}
    </div>
</section>
{{ end }}
```

由于在里面写了个判断，需要自己去`config.toml`文件中在`[Params]`下写上以下两行：

```toml
featured_tags = true
featured_condition_size = 1  // 数字代表文章数量，大于该数的标签才显示
```

接着给它写了点比较简单的`CSS`，效果如同博客中所示：

```css
.featured-tags a {
  display: inline-block;
  border: 1px solid #bfbfbf;
  border-radius: 999em;
  padding: 0 10px;
  font-size: 12px;
  line-height: 24px;
  text-decoration: none;
  margin: 0 1px;
  margin-bottom: 6px;
}
```

## 圆形百分比进度条返回顶部按钮

以下代码来自[无作为](https://www.wuzuowei.net/7516.html)

**js**:

```javascript
var bigfa_scroll = {
    drawCircle: function(id, percentage, color) {
        var width = jQuery(id).width();
        var height = jQuery(id).height();
        var radius = parseInt(width / 2.20);
        var position = width;
        var positionBy2 = position / 2;
        var bg = jQuery(id)[0];
        id = id.split("#");
        var ctx = bg.getContext("2d");
        var imd = null;
        var circ = Math.PI * 2;
        var quart = Math.PI / 2;
        ctx.clearRect(0, 0, width, height);
        ctx.beginPath();
        ctx.strokeStyle = color;
        ctx.lineCap = "square";
        ctx.closePath();
        ctx.fill();
        ctx.lineWidth = 3;
        imd = ctx.getImageData(0, 0, position, position);
        var draw = function(current, ctxPass) {
            ctxPass.putImageData(imd, 0, 0);
            ctxPass.beginPath();
            ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
            ctxPass.stroke();
        }
        draw(percentage / 100, ctx);
    },
    backToTop: function($this) {
        $this.click(function() {
            jQuery("body,html").animate({
                scrollTop: 0
            },
            800);
            return false;
        });
    },
    scrollHook: function($this, color) {
        color = color ? color: "#000000";
        $this.scroll(function() {
            var docHeight = (jQuery(document).height() - jQuery(window).height()),
            $windowObj = $this,
            $per = jQuery(".per"),
            percentage = 0;
            defaultScroll = $windowObj.scrollTop();
            percentage = parseInt((defaultScroll / docHeight) * 100);
            var backToTop = jQuery("#backtoTop");
            if (backToTop.length > 0) {
                if ($windowObj.scrollTop() > 200) {
                    backToTop.addClass("button--show");
                } else {
                    backToTop.removeClass("button--show");
                }
                $per.attr("data-percent", percentage);
                bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
            }

});
    }
}

jQuery(document).ready(function() {
    jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>');
    var T = bigfa_scroll;
    T.backToTop(jQuery("#backtoTop"));
    T.scrollHook(jQuery(window), "#008080"); // 该行可更改樱色代码来改变进度条的颜色
});
```

**css**:

```css
#backtoTop {
    background-color:#eee;
    border-radius:100%;
    bottom:2%;
    height:48px;
    position:fixed;
    right:-100px;
    width:48px;
    transition:0.5s;
    -webkit-transition:0.5s}
#backtoTop.button--show{right:1px}
.per{font-size:16px;height:48px;line-height:48px;position:absolute;text-align:center;top:0;width:48px;color:#555;cursor:pointer}
.per:before{content:attr(data-percent)}
.per:hover:before{content:"↑";font-size:20px}
```

最后修改：2019 年 10 月 07 日