【彙總】 為園友寫的皮膚製作工具 awescnb

DIVMonster發表於2020-05-31

? Awescnb, awesome cnblog.

簡介

可能許多初來乍到的新手會被部落格園經典的風格勸退，或者您是一個老園友，需要為您的部落格定製一些功能（例如宣傳公眾號，文章目錄、或者插入幾個捐助二維碼等等）而不想浪費太多時間。我製作這個小專案的目的是園友能夠輕易地構建一個部落格園皮膚或完善您的部落格頁面功能。它可以用來做以下三件事:

  1. 安裝: 在您的部落格園安裝這個專案中已經整合的皮膚.安裝之後,可以快速切換其他皮膚.
  2. 建立: 快速建立一個的部落格園皮膚,通過打包生成檔案,供您使用.
  3. 分享: 快速建立一個部落格園皮膚並將它貢獻給專案,園友就能夠切換到您的皮膚了.

視訊教程

今天週末錄製了一個簡單視訊教程，雖然我在搭建的文件裡有寫，希望它能幫您更容易上手。視訊從部落格皮膚的安裝、切換、從零開始製作三個方面簡單展開。

您可能是非 web 前端從業者，視訊中用到的命令您可能會有疑惑，只需要下載 node並安裝到您的電腦就擁有了一個叫做 npm 的東西（node 包管理器）,而視訊中使用的 npm xx 命令正是來源於此。

連結

配置一覽 
{
    // 基本配置
    theme: {
        name: 'reacg',
        color: '#FFB3CC',
        title: '',
        contentSize: 'mid',
        headerBackground: '',
        avatar: 'https://pic.cnblogs.com/face/sample_face.gif',
        favicon: '',
    },
    // 程式碼高亮
    highLight: {
        type: 'atomOneDark',
        inDarkMode: 'atomOneDark',
    },
    // 程式碼行號
    lineNumbers: {
        enable: true,
    },
    // github圖示
    github: {
        enable: true,
        color: '#ffb3cc',
        url: 'https://github.com/guangzan/awescnb',
    },
    // 碼雲圖示
    gitee: {
        enable: true,
        color: '#C71D23',
        url: 'https://gitee.com/guangzan/awescnb',
    },
    // 圖片燈箱
    imagebox: {
        enable: true,
    },
    // 文章目錄
    catalog: {
        enable: true,
        position: 'left',
    },
    // 返回頂部按鈕
    back2top: {
        enable: true,
        type: 'complex',
    },
    // 右下角按鈕列表
    tools: {
        enable: true,
        initialOpen: true,
        draggable: false,
    },
    // live2d模型
    live2d: {
        enable: true,
        page: 'all',
        agent: 'pc',
        model: 'haru-01',
        width: 150,
        height: 200,
        position: 'left',
        gap: 'default',
    },
    // 點選特效
    click: {
        enable: true,
        auto: false,
        colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
        size: 30,
        maxCount: 15,
    },
    // 評論輸入框表情
    emoji: {
        enable: true,
        showRecents: true,
        recentsCount: 20,
        showPreview: true,
        showSearch: true,
    },
    // 暗色模式
    darkMode: {
        enable: true,
        autoDark: false,
        autoLight: false,
    },
    // 音樂播放器
    musicPlayer: {
        enable: true,
        page: 'all',
        agent: 'pc',
        autoplay: false,
        volume: 0.4,
        lrc: {
            enable: false, // 啟用歌詞
            type: 1, // 1 -> 字串歌詞 3 -> url 歌詞
            color: '', // 顏色
        },
        audio: [
            {
                name: '404 not found',
                artist: 'REOL',
                url:
                    'http://music.163.com/song/media/outer/url?id=436016480.mp3',
                cover:
                    'http://p2.music.126.net/cu1sEIDxXOJm5huZ3Wjs0Q==/18833534672880379.jpg?param=300x300',
                lrc: ``,
            },
        ],
    },
    // 隨筆頭圖
    postTopimage: {
        enable: true,
        // position: 'top', // position api 已經廢棄，使用 postbottomimage 代替
        fixed: false,
        imgs: [],
    },
    // 隨筆尾圖
    postBottomimage: {
        enable: false,
        img: '',
        height: '',
    },
    // 打賞
    donation: {
        enable: false,
        qrcodes: [],
    },
    // 個性簽名
    signature: {
        enable: false,
        contents: [],
    },
    // 二維碼
    qrcode: {
        enable: false,
        img: '',
        desc: '',
    },
    // 彈出公告
    notice: {
        enable: false,
        text: [],
    },
    // 首頁列表圖
    indexListImg: {
        enable: false,
        imgs: [],
    },
    // 頂部載入進度條
    topProgress: {
        enable: false,
        page: 'all',
        agent: 'pc',
        background: '#FFB3CC',
        height: '5px',
    },
    indexTimeline: {
        enable: false,
    },
    // 隨筆頁尾部簽名
    postSignature: {
        enable: false,
        content: [],
        licenseLink: '',
    },
    // 背景圖片或顏色
    bodyBackground: {
        enable: false,
        type: 'color',
        value: '',
        opacity: 1,
        repeat: false,
    },
    // 彈幕
    barrage: {
        enable: false,
        opacity: 0.6,
        colors: [
            '#FE0302',
            '#FF7204',
            '#FFAA02',
            '#FFD302',
            '#FFFF00',
            '#A0EE00',
            '#00CD00',
            '#019899',
            '#4266BE',
            '#89D5FF',
            '#CC0273',
            '#CC0273',
        ],
        barrages: [],
        indexBarrages: [],
        postPageBarrages: [],
    },
    // 圖表
    charts: {
        enable: false,
        pie: {
            title: 'My skills',
            data: {
                labels: ['JavaScript', 'css', 'Vue', 'React', 'wechat'],
                values: [40, 30, 20, 10, 20],
            },
        },
    },
    // 鎖屏
    lock: {
        enable: true,
        background: '',
        strings: [
            '<i>Powered by</i> webpack.',
            '&amp; Theme in awescnb',
            '快去自定義你的個性簽名吧~',
        ],
    },
    // footer連結
    links: [
        {
            name: 'awescnb',
            link: 'https://gitee.com/guangzan/awescnb',
        },
    ],
}

文件

最後

起初我只是用 gulp（前端構建工具） 簡單製作了一個部落格園皮膚供自己使用，後來越來越多的園友使用，我索性用 webpack 將它重構並和交流群裡的小夥伴一起完善。現在它已經能夠完全勝任當前的工作了，enjoy！今後我也不再發布關於它的介紹隨筆，會花費精力寫其他前端相關內容。

有希望捐助的小夥伴不要再問我了，這個小專案非我一人所為，它不接受任何捐助。有任何建議或者問題都可以到交流群（541802647）裡交流或者在專案倉庫提個 issue。再次感謝所有提供建議的小夥伴。?

相關文章