博客園二次元主題——Sakura

時間  2019-11-24
標籤 博客 主題 sakura 简体版
原文   原文鏈接

碎碎念

嗯，時隔多久也記不清了，我又回來了，總算是忙裏偷閒把這篇文章寫出來，有人要過不少次個人博客園美化方案，可是實在是忙啊，也由於個人前臺技術很差，代碼bug不少，因此也有點不想把這個美化發出來，可是由於我的博客搭建完成了，之後主要精力仍是在那邊，因此就成全你們。本博客美化樣式風格來自於櫻花莊的白貓寫的Sakura美化方案，我按照他的風格在博客園寫了個幾乎是同樣的。這是我寫過的第三篇美化文章了，（也是愛折騰），每一篇都是不一樣地風格，隨愛好獲取吧，好了不念叨了進入正題。javascript

功能簡介

  • 首頁及隨筆頁頭圖隨機切換
  • 其餘網站連接
  • 音樂播放器
  • 看板娘
  • 圖片燈箱
  • 自動生成文章目錄
  • 導航菜單子目錄
  • 滾動進度條

主題預覽

如下圖片分別是，首頁，隨筆列表頁，隨筆頁，文章頁。css

主題部署

一鍵部署

若是你想快速搭建出與本博客同樣的樣式， 請看下面這句說明，固然前提是得有js權限html

若是將部署和本博客同樣的主題，直接下載整個主題，下載地址在文末。把css、側邊欄、頁腳，代碼粘貼的你的博客後臺，而後對應的改下文件連接地址 就行。下面的內容是爲了個性化定製而寫，若是你想個性化定製博客，請往下看。前端

基本部署

  • 前提：已經開通js權限java

  • 引入樣式
    把page.css中的代碼粘貼到自定義css中git

  • 引入文件
    放在側邊欄中github

    <script src="https://blog-static.cnblogs.com/files/zouwangblog/main.js"></script>

  • 選擇模板
    按照圖片內容設置模板
    npm

  • 腳本設置api

    爲了配置方便，我在側邊欄裏設置了一些經常使用參數，可根據下表選擇須要開啓和配置ruby

    <script type="text/javascript"> 
$.silence({
        profile: {
            enable: true,
            avatar: '',
            favicon: 'https://files-cdn.cnblogs.com/files/zouwangblog/blog_logo.gif',
        },
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            home: 'https://www.cnblogs.com/zouwangblog/',
            license: 'CC BY 4.0',
            link: 'https://creativecommons.org/licenses/by/4.0'
        },
        sponsor: {
            enable: true,
            paypal: null,
            wechat: 'https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190704175553.png',
            alipay: 'https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190704174158.png'
        },
        github: {
            enable: false,
            color: '#fff',
            fill: '#FF85B8',
            link: 'https://github.com/Zou-Wang'
        },
  topImg: {
      homeTopImg: [
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808213853909-1772245301.jpg",
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808213858652-132088076.jpg"

                  ],
            notHomeTopImg: [
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808214726187-2092834311.jpg",

                  ]
      },
    topInfo: {
                  title: 'Hi,Toretto',
                      text: 'You got to put the past behind you before you can move on.',
                  github: "https://github.com/Zou-Wang",
                  weibo: "https://weibo.com/5682002748/profile?topnav=1&wvr=6&is_all=1",
                  telegram: "",
                  music: "https://music.163.com/#/user/home?id=436757779",
                  twitter: "",
                  zhihu:"https://www.zhihu.com/people/zouwang/activities",
                  mail: "http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=KlBFX11LRE0SGBlqW1sESUVH",
              }
    });
</script>

    參數說明表：

    模塊 屬性 說明 類型 默認值
    profile（基礎信息） enable 是否啓用 Boolean true
    avatar 做者頭像 String
    favicon 網站標題圖標 String
    notice 公告 String 海上月是天上月，眼前人是心上人。
    catalog（博文目錄） enable 是否啓用 Boolean false
    move 是否容許拖拽 Boolean true
    index 是否顯示索引 Boolean true
    level1 一級標題 String h2
    level2 二級標題 String h3
    level3 三級標題 String h4
    signature（博文簽名 enable 是否啓用 Boolean true
    home 做者主頁 String https://www.cnblogs.com
    license 許可證名稱 String CC BY 4.0
    link 許可證連接 String https://creativecommons.org/licenses/by/4.0
    sponsor（博文讚揚） enable 是否啓用 Boolean false
    paypal PayPal 收款地址 String null
    alipay 支付寶收款二維碼 String null
    wechat 微信收款二維碼 String null
    github（GitHub Corners） enable 是否啓用 Boolean false
    fill 背景填充色 String [Silence Theme Color]
    color 章魚貓顏色 String #fff
    link Github 連接 String null
    topImg（頭圖） homeTopImg 首頁頭圖 Array [https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808213858652-132088076.jpg
    https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808214726187-2092834311.jpg]
    notHomeTopImg 文章和隨筆頁頭圖 Array [https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg]
    topInfo(首頁頭圖信息) titile 頭部標題 String Hi, Toretto!
    text 座右銘 String You got to put the past behind you before you can move on.
    github GitHub連接 String 「 」
    weibo 微博連接 String 「 」
    telegram telegram連接 String 「 」
    music 網易雲音樂連接 String 「 」
    twitter twitter連接 String 「 」
    zhihu 知乎連接 String 「 」
    mail 郵箱連接 String 「 」

配置完成後，記得點擊「保存」按鈕，保存上述操做。

個性化定製

首頁及文章大圖

首頁和隨筆以及文章頁的頭圖都是隨機切換的，添加圖片在側邊欄配置中。這裏類型爲隨筆的時候頭部會顯示標題、頭像、做者、發佈時間、閱讀數，而類型爲文章的時候只會顯示標題，根據狀況選擇類型發佈。

隨筆預覽圖


在寫隨筆或者文章的時候添加摘要圖片和摘要文字，摘要文字必定要添加，若是不添加摘要圖片會給一張默認圖片。

發佈隨筆的時候不要再同一天發佈超過一篇文章，由於博客園同一天的文章會歸檔在一塊兒致使我構建html的時候出現bug，這個bug到如今尚未解決，因此只能一天發佈一篇文章。

公告

公告內容修改在側邊欄基礎信息配置中，修改notice

看板娘

沒錯仍是看板娘，出如今我三篇文章中的看板娘，由於有一段時間api失效致使看板娘都沒有，最近被我找到了新的api，我我的博客的看板娘api是搭建在我本身服務器上的，博客園的用的仍是別人api，有失效的風險，固然失效了我會及時修復的。將如下代碼添加到頁腳。

<script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>

音樂播放器

相信看過我之前文章的同窗對這個必定不會陌生，怎麼獲取id我也不在這裏羅嗦了，能夠去找我之前的文章。獲取到id以後把下面的id替換掉就能夠了

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="2878443703" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>

左上角的logo，修改文字須要到main.js裏找到如下代碼，替換文字便可，若是不喜歡能夠注掉（我費了很大勁居然敢不喜歡🤕）。

var title = '<div class="site-branding">' +
                    '<span class="logolink moe-mashiro">' +
                    '<a href="https://www.cnblogs.com/zouwangblog/" alt="富士的雪">' +
                    '<ruby><span class="sakuraso">ふじさん</span><span class="no">の</span><span class="shironeko">雪</span>' +
                    '<rt class="chinese-font">富士的雪</rt></ruby></a></span>' +
                    '</div>'
            $('body').prepend(title);

頁面滾動進度條

頁面滾動的時候會在頂部出現一個橙色的進度條，修改顏色到頁面css裏，找到如下代碼修改background

.scrollCls {
    position: fixed;
    top: 0;
    height: 3px;
    background: orange;
    transiton-property: width,background;
    transition-duration: 1s,1s;
    z-index: 99999;
}

首頁我的信息

  • 名稱
    在側邊欄配置中修改topInfo裏的title

  • 座右銘
    在側邊欄配置中修改topInfo裏的text

  • 其餘網站連接
    在側邊欄配置中修改topInfo裏對應的連接地址，這裏郵箱使用的是QQ郵箱的郵我，能夠在QQ郵箱裏配置。

頂部菜單設置

將如下連接替換成本身的文章或者隨筆地址，如下代碼在main.js中

$("#navList").append('<li><a id="blog_nav_myyoulian" class="menu"href="https://www.cnblogs.com/zouwangblog/articles/11177049.html">友鏈</a><i></i></li><li><a id="blog_nav_myzanshang" class="menu" href="https://www.cnblogs.com/zouwangblog/articles/11340077.html">讚揚</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" href="">關於</a><i></i></li>');

  • 菜單icon設置
    就是菜單前的小圖標，感興趣的能夠去了解一下Font awesome

    $('#blog_nav_myhome').prepend('<i class="fa fa-fort-awesome" aria-hidden="true"></i>');
            $('#blog_nav_contact').prepend('<i class="fa fa-address-book-o" aria-hidden="true"></i>');
            $('#blog_nav_rss').prepend('<i class="fa fa-rss faa-pulse" aria-hidden="true"></i>');
            $('#blog_nav_admin').prepend('<i class="fa fa-list" aria-hidden="true"></i>');
            $('#blog_nav_myyoulian').prepend('<i class="fa fa-link" aria-hidden="true"></i>');
            $('#blog_nav_myzanshang').prepend('<i class="fa fa-heart" aria-hidden="true"></i>');
            $('#blog_nav_myguanyu').prepend('<i class="fa fa-leaf" aria-hidden="true"></i>');

  • 菜單子目錄設置

    菜單懸浮觸發的菜單子目錄，這裏我在關於菜單下添加了子目錄

    let guanyu = '<ul class="sub-menu">' +
                    '<li><a href="https://www.cnblogs.com/zouwangblog/articles/11157339.html "><i class="fa fa-meetup" aria-hidden="true"></i> 我？</a></li>' +
                    '<li><a href="https://www.cnblogs.com/zouwangblog/articles/11346906.html "><i class="fa fa-area-chart" aria-hidden="true"></i> 統計</a></li>' +
                    '<li><a href="https://www.cnblogs.com/zouwangblog/articles/11350777.html "><i class="fa fa-heartbeat" aria-hidden="true"></i> 監控</a></li>' +
                    '<li><a href="https://www.cnblogs.com/zouwangblog/articles/11350787.html"><i class="iconfont icon-taohua" aria-hidden="true"></i> 主題</a></li>' +
                    '</ul>';
            $('#blog_nav_myguanyu').after(guanyu);

下載地址

寫在最後

技術是無私的，很是不捨得把我這個美化分享了出去，畢竟以個人前端技術構建這麼個樣式仍是很費勁的，花了不少心血，這也是我在博客園的最後一篇美化文章了，畢竟太浪費時間，之後精力仍是放在我的網站上，博客還有不少小功能在這裏就不敘述了，好比我比較喜歡的小吊死鬼和首頁的波浪，但願採用這個樣式的你可以多多支持關注博主（關注博主請移步），有什麼問題均可以在下方留言，我也會及時爲你們解決。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程