摘要：開(kāi)始之前寫的個(gè)人博客確實(shí)有點(diǎn)太丑了，最近重寫了一番。一圖勝千言，且看如下效果個(gè)人博客地址項(xiàng)目地址自定義滾動(dòng)條目前對(duì)于自定義滾動(dòng)條支持情況比較好的也就只有了，所以針對(duì)有必要把滾動(dòng)條的樣式改造一下。典型的多對(duì)多關(guān)系。

之前寫的個(gè)人博客確實(shí)有點(diǎn)太丑了，最近重寫了一番。做了移動(dòng)端適配，增加了文章標(biāo)簽以及做了相冊(cè)等功能。
看著很不錯(cuò)。talk is cheap,show me you code。一圖勝千言，且看如下效果：

個(gè)人博客地址：http://www.baijiawei.top

項(xiàng)目GitHub地址：https://github.com/bjw1234/bl...

目前對(duì)于自定義滾動(dòng)條支持情況比較好的也就只有Chrome了，所以針對(duì)Chrome有必要把滾動(dòng)條的樣式改造一下。

雖然有jQuery插件可以完成各個(gè)瀏覽器下的自定義滾動(dòng)條樣式，但是由于整個(gè)項(xiàng)目都是用原生JS開(kāi)發(fā)完成的，
未使用jQuery，所以也沒(méi)必要為了一個(gè)滾動(dòng)條引入一個(gè)庫(kù)和一個(gè)插件了。

        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        /*不要水平滾動(dòng)條*/
        ::-webkit-scrollbar:horizontal {
                height: 0;
            }

        /*主干樣式*/
        ::-webkit-scrollbar-track {
            background-color: rgba(0, 0, 0, .1);
            -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
        }

        /*鼠標(biāo)懸浮時(shí)主干樣式*/
        ::-webkit-scrollbar-track:hover {
            background-color: rgba(0, 0, 0, .2);
            -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
        }

        /*滑塊樣式*/
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: rgba(0, 0, 0, .3);
            -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
        }

        /*鼠標(biāo)懸浮時(shí)滑塊樣式*/
        ::-webkit-scrollbar-thumb:hover {
            border-radius: 10px;
            background-color: rgba(0, 0, 0, .4);
            -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
        }

        :hover::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: rgba(0, 0, 0, .4);
            -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
        }

        /*上端按鈕樣式*/
        ::-webkit-scrollbar-button:start {
            width: 10px;
            height: 10px;
            background: url(./image/scrollbar_arrow.png) no-repeat 0 0;
        }

        ::-webkit-scrollbar-button:start:hover {
            background: url(./image/scrollbar_arrow.png) no-repeat -15px 0;
        }

        /*下端按鈕樣式*/
        ::-webkit-scrollbar-button:end {
            background: url(./image/scrollbar_arrow.png) no-repeat 0 -18px;
        }

        ::-webkit-scrollbar-button:end:hover {
            background: url(./image/scrollbar_arrow.png) no-repeat -15px -18px;
        }

webkit提供的還有更多的偽類，可以定制更豐富滾動(dòng)條樣式。
詳細(xì)內(nèi)容參考：https://www.webkit.org/blog/3...

這里給出原作者的地址：https://codepen.io/iamfronten...
起初想著自己實(shí)現(xiàn)這個(gè)效果，大概寫完之后發(fā)現(xiàn)人家的背景是用SVG做的，
還有一點(diǎn)點(diǎn)隨風(fēng)飄動(dòng)的趕腳，索性就直接用的人家的代碼。 ^_^||

原理：通過(guò)window對(duì)象上的requestAnimationFrame方法不斷地重繪canvas，實(shí)現(xiàn)小星星，流星等的位移、透明度的變化。

寫一點(diǎn)偽碼：

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

// 初始化
init();

// 繪制
draw();

function draw(){
    // 清空畫板
    ctx.clearRect(0,0,canvasW,canvasH);
    
    // 繪制小星星
    for(var i = 0; i < stars.length; i++) {
        stars[i].move(); // 位移
        stars[i].changAlpha(); // 改變透明度
        stars[i].drawSelf(); // 畫出自己
        stars[i].checkBound(); // 邊界檢測(cè)
    }
  
    // 繪制流星同理
    ...
    
    // 不斷地重繪
    window.requestAnimationFrame(draw);
}

// 星星類
function star(){
    // 很多自己的屬性
    ....
    
    this.move = function(){}
    this.changAlpha = function(){}
    this.drawSelf = function(){}
    this.checkBound = function(){}
}

如果流星出現(xiàn)的概率是3%，我們?cè)趺淳珳?zhǔn)的控制它呢？

// 獲取概率（Boolean）
function getProbability(percent) {
    return Matth.floor(Math.random()*100+1) < percent;
}

getProbability(3); // 當(dāng)返回true的時(shí)候再去添加彗星

原理：也是使用requestAnimationFrame這個(gè)函數(shù)不斷改變scrollTo（滾動(dòng)到）的位置。
使用setTimeout函數(shù)調(diào)整容器的scrollTop值雖然也能實(shí)現(xiàn)返回頂部的效果，但沒(méi)有上面這種方法流暢。

// 返回頂部
function smoothScroll() {
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
        window.requestAnimationFrame(smoothScroll);
        window.scrollTo(0, currentScroll - (currentScroll / 5));
    }
}

一篇文章對(duì)應(yīng)多個(gè)標(biāo)簽。
一個(gè)標(biāo)簽也可以被多篇文章使用。

典型的多對(duì)多關(guān)系。

后端數(shù)據(jù)庫(kù)使用的是MongoDB，實(shí)現(xiàn)這種多對(duì)多關(guān)系的數(shù)據(jù)表索引有點(diǎn)不知從何下手的感覺(jué)。
索性就使用了子文檔的方式實(shí)現(xiàn)這樣的效果。
（ps: 如果您有思路的話，希望可以不吝賜教，非常感謝。）

const mongoose = require("mongoose");
const Category = require("./categorySch");

// Article
module.exports = new mongoose.Schema({
    // 關(guān)聯(lián)字段
    children: [ // 子文檔標(biāo)簽數(shù)組
        Category 
    ],
    // 作者
    user: {
        type: mongoose.Schema.Types.ObjectId,
        ref: "User"
    },
    // 內(nèi)容
    content: {
        type: String,
        default: ""
    }
    ....
});

使用這種方式添加、查詢標(biāo)簽都很容易。

// 將用戶提交的標(biāo)簽用空格切分返回一個(gè)對(duì)象
let categoryArr = category.split(" ").map(item => {
    return { category_name: item };
});

// 將用戶提交的數(shù)據(jù)加入數(shù)據(jù)庫(kù)
return new Article({
    title: title,
    // 直接就可以添加
    children: categoryArr,
}).save();

// 查詢就更簡(jiǎn)單了
article.children;

在模板中使用一個(gè)for循環(huán)就可以直接渲染數(shù)據(jù)：

{% for category in art.children %}

    {{ category.category_name }}

{% endfor %}

至于根據(jù)標(biāo)簽查詢對(duì)應(yīng)文章，起初想著向后端傳遞標(biāo)簽的ID，但是，發(fā)現(xiàn)每篇文章下相同類別的標(biāo)簽對(duì)應(yīng)的ID不同。
（這就是使用子文檔的代價(jià)），索性就直接傳遞標(biāo)簽名了，雖說(shuō)這樣的方式不優(yōu)雅，但也能實(shí)現(xiàn)想要的效果了。

let prev = function () {
    return Article.find({"_id": {"$gt": id}}).sort({_id: 1}).limit(1).then(result => {
        data.prev = null;
        if (result.length >= 0) {
            data.prev = result[0];
        }
    });
};

let next = function () {
    return Article.find({"_id": {"$lt": id}}).sort({_id: -1}).limit(1).then(result => {
        data.next = null;
        if (result.length >= 0) {
            data.next = result[0];
        }
    });
};

圖片存儲(chǔ)使用了圖床（路過(guò)圖床），后端只需要存儲(chǔ)markdown語(yǔ)法的字符串，
前端就可以解析成img標(biāo)簽，還是蠻好用的。

至于像是服務(wù)器搭建、模板引擎、markdown語(yǔ)法高亮、分頁(yè)等功能就不重復(fù)說(shuō)了。

詳細(xì)內(nèi)容可以看我之前的文章。
https://segmentfault.com/a/11...