hexo部落格的背景設定

lm_y發表於2017-07-25

主要有以下30種：

在右上角或者左上角實現fork me on github
新增RSS
新增動態背景
實現點選出現桃心效果
修改文章內連結文字樣式
修改文章底部的那個帶#號的標籤
在每篇文章末尾統一新增“本文結束”標記
修改作者頭像並旋轉
博文壓縮
修改“程式碼塊自定義樣式
側邊欄社交小圖示設定
主頁文章新增陰影效果
在網站底部加上訪問量
新增熱度
網站底部字數統計
新增 README.md 檔案
設定網站的圖示Favicon
實現統計功能
新增頂部載入條
在文章底部增加版權資訊
新增網易雲跟帖(跟帖關閉，已失效，改為來必力)
隱藏網頁底部powered By Hexo / 強力驅動
修改網頁底部的桃心
文章加密訪問
新增jiathis分享
博文置頂
修改字型大小
修改打賞字型不閃動
側邊欄推薦閱讀
自定義滑鼠樣式

1. 在右上角或者左上角實現fork me on github

實現效果圖

具體實現方法

點選這裡挑選自己喜歡的樣式，並複製程式碼。例如，我是複製如下程式碼：

然後貼上剛才複製的程式碼到themes/next/layout/_layout.swig檔案中(放在<div class="headband"></div>的下面)，並把href改為你的github地址

2.新增RSS

實現效果圖

具體實現方法

切換到你的blog（我是取名blog，具體的看你們的取名是什麼）的路徑，例如我是在/Users/chenzekun/Code/Hexo/blog這個路徑上，也就是在你的根目錄下

然後安裝 Hexo 外掛：(這個外掛會放在node_modules這個資料夾裡)

$ npm install --save hexo-generator-feed

接下來開啟畫紅線的檔案，如下圖：

在裡面的末尾新增：(請注意在冒號後面要加一個空格，不然會發生錯誤！)

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

然後開啟next主題資料夾裡面的_config.yml,在裡面配置為如下樣子：(就是在rss:的後面加上/atom.xml,注意在冒號後面要加一個空格)

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

配置完之後執行：

$ hexo g

重新生成一次，你會在./public 資料夾中看到 atom.xml 檔案。然後啟動伺服器檢視是否有效，之後再部署到 Github 中。

3. 新增動態背景

實現效果圖

具體實現方法

這個我之前有一篇文章有講過了，詳情點選我的部落格

4. 實現點選出現桃心效果

實現效果圖

具體實現方法

在網址輸入如下

http://7u2ss1.com1.z0.glb.clouddn.com/love.js

然後將裡面的程式碼copy一下，新建love.js檔案並且將程式碼複製進去，然後儲存。將love.js檔案放到路徑/themes/next/source/js/src裡面，然後開啟\themes\next\layout\_layout.swig檔案,在末尾（在前面引用會出現找不到的bug）新增以下程式碼：

<!-- 頁面點選小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

5. 修改文章內連結文字樣式

實現效果圖

具體實現方法

修改檔案 themes\next\source\css\_common\components\post\post.styl，在末尾新增如下css樣式，：

// 文章內連結文字樣式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

其中選擇.post-body 是為了不影響標題，選擇 p 是為了不影響首頁“閱讀全文”的顯示樣式,顏色可以自己定義。

6. 修改文章底部的那個帶#號的標籤

實現效果圖

具體實現方法

修改模板/themes/next/layout/_macro/post.swig，搜尋 rel="tag">#，將 # 換成<i class="fa fa-tag"></i>

7. 在每篇文章末尾統一新增“本文結束”標記

實現效果圖

具體實現方法

在路徑 \themes\next\layout\_macro 中新建 passage-end-tag.swig 檔案,並新增以下內容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>
    {% endif %}
</div>

接著開啟\themes\next\layout\_macro\post.swig檔案，在post-body 之後， post-footer 之前新增如下畫紅色部分程式碼（post-footer之前兩個DIV）：

程式碼如下：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然後開啟主題配置檔案（_config.yml),在末尾新增：

# 文章末尾新增“本文結束”標記
passage_end_tag:
  enabled: true

完成以上設定之後，在每篇文章之後都會新增如上效果圖的樣子。

8. 修改作者頭像並旋轉

實現效果圖

具體實現方法

開啟\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，在裡面新增如下程式碼：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 頭像圓形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 設定迴圈動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線為以低速結束 
    (1s)等待1秒然後開始動畫 (1)動畫播放次數(infinite為迴圈播放) ]*/


  /* 滑鼠經過頭像旋轉360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 滑鼠經過停止頭像旋轉 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 滑鼠經過頭像旋轉360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 軸旋轉動畫 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

9. 博文壓縮

在站點的根目錄下執行以下命令：

$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

在如下圖所示，新建 gulpfile.js ，並填入以下內容：

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 壓縮 public 目錄 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 壓縮 public 目錄 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 壓縮 public/js 目錄 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 執行 gulp 命令時執行的任務
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

生成博文是執行 hexo g && gulp 就會根據 gulpfile.js 中的配置，對 public 目錄中的靜態資原始檔進行壓縮。

10. 修改“程式碼塊自定義樣式

實現效果圖

具體實現方法

開啟\themes\next\source\css\_custom\custom.styl,向裡面加入：(顏色可以自己定義)

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大程式碼塊的自定義樣式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

11. 側邊欄社交小圖示設定

實現效果圖

具體實現方法

開啟主題配置檔案（_config.yml），搜尋social_icons:,在圖示庫找自己喜歡的小圖示，並將名字複製在如下位置，儲存即可

12. 主頁文章新增陰影效果

實現效果圖

具體實現方法

開啟\themes\next\source\css\_custom\custom.styl,向裡面加入：

// 主頁文章新增陰影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

13. 在網站底部加上訪問量

實現效果圖

具體實現方法
開啟\themes\next\layout_partials\footer.swig檔案,在copyright前加上畫紅線這句話：

程式碼如下：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然後再合適的位置新增顯示統計的程式碼，如圖：

程式碼如下：

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站訪客數:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

在這裡有兩中不同計算方式的統計程式碼：
1. pv的方式，單個使用者連續點選n篇文章，記錄n次訪問量

<span id="busuanzi_container_site_pv">
    本站總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>

uv的方式，單個使用者連續點選n篇文章，只記錄1次訪客數

<span id="busuanzi_container_site_uv">
  本站總訪問量<span id="busuanzi_value_site_uv"></span>次
</span>

新增之後再執行hexo d -g，然後再重新整理頁面就能看到效果

14. 新增熱度

實現效果圖

具體實現方法

next主題整合leanCloud，開啟/themes/next/layout/_macro/post.swig,在畫紅線的區域新增℃：

然後開啟，/themes/next/languages/zh-Hans.yml,將畫紅框的改為熱度就可以了

15. 網站底部字數統計

實現效果圖

具體方法實現
切換到根目錄下，然後執行如下程式碼

$ npm install hexo-wordcount --save

然後在/themes/next/layout/_partials/footer.swig檔案尾部加上：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">部落格全站共{{ totalcount(site) }}字</span>
</div>

16. 新增 README.md 檔案

每個專案下一般都有一個 README.md 檔案，但是使用 hexo 部署到倉庫後，專案下是沒有 README.md 檔案的。

在 Hexo 目錄下的 source 根目錄下新增一個 README.md 檔案，修改站點配置檔案 _config.yml，將 skip_render 引數的值設定為

skip_render: README.md

儲存退出即可。再次使用 hexo d 命令部署部落格的時候就不會在渲染 README.md 這個檔案了。

17. 設定網站的圖示Favicon

實現效果圖

具體方法實現

在EasyIcon中找一張（32*32）的ico圖示,或者去別的網站下載或者製作，並將圖示名稱改為favicon.ico，然後把圖示放在/themes/next/source/images裡，並且修改主題配置檔案：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

18. 實現統計功能

實現效果圖

具體實現方法

在根目錄下安裝 hexo-wordcount,執行：

$ npm install hexo-wordcount --save

然後在主題的配置檔案中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

19. 新增頂部載入條

實現效果圖

具體實現方法

開啟/themes/next/layout/_partials/head.swig檔案，新增紅框上的程式碼

程式碼如下：

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

但是，預設的是粉色的，要改變顏色可以在/themes/next/layout/_partials/head.swig檔案中新增如下程式碼（接在剛才link的後面）

<style>
    .pace .pace-progress {
        background: #1E92FB; /*進度條顏色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*陰影顏色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上邊框顏色*/
        border-left-color: #1E92FB;    /*左邊框顏色*/
    }
</style>

目前，博主的增加頂部載入條的pull request 已被Merge��===>詳情
現在升級最新版的next主題，升級後只需修改主題配置檔案(_config.yml)將pace: false改為pace: true就行了，你還可以換不同樣式的載入條，如下圖：

20. 在文章底部增加版權資訊

實現效果圖

在目錄 next/layout/_macro/下新增 my-copyright.swig：

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS庫 sweetalert 可修改路徑 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
  <p><span>本文標題:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="訪問 {{ theme.author }} 的個人部落格">{{ theme.author }}</a></p>
  <p><span>釋出時間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最後更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始連結:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="點選複製文章連結"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="複製成功！"></i></span>
  </p>
  <p><span>許可協議:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業性使用-禁止演繹 4.0 國際</a> 轉載請保留原文連結及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({   
          title: "",   
          text: '複製成功',   
          html: false,
          timer: 500,   
          showConfirmButton: false
        });
      });
    }));  
</script>
{% endif %}

在目錄next/source/css/_common/components/post/下新增my-post-copyright.styl：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改next/layout/_macro/post.swig，在程式碼

<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

之前新增增加如下程式碼：

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

如下：

修改next/source/css/_common/components/post/post.styl檔案，在最後一行增加程式碼：

@import "my-post-copyright"

儲存重新生成即可。
如果要在該博文下面增加版權資訊的顯示，需要在 Markdown 中增加copyright: true的設定，類似：

小技巧：如果你覺得每次都要輸入copyright: true很麻煩的話,那麼在/scaffolds/post.md檔案中新增：

這樣每次hexo new "你的內容"之後，生成的md檔案會自動把copyright:加到裡面去
(注意：如果解析出來之後，你的原始連結有問題：如：http://yoursite.com/前端小專案：使用canvas繪畫哆啦A夢.html,那麼在根目錄下_config.yml中寫成類似這樣：）
就行了。

21. 新增網易雲跟帖(跟帖關閉，已失效，改為來必力)

實現效果圖

具體方法實現
有兩種實現方法：
①更新next主題，因為最新版本的主題已經支援這種評論。直接在主題配置檔案_config.yml 檔案中新增如下配置:

gentie_productKey: #your-gentie-product-key

②如果你不想更新的話，那麼按下面步驟進行：
首先，還是在主題配置檔案_config.yml 檔案中新增如下配置:

gentie_productKey: #your-gentie-product-key

你的productKey就是下面畫紅線部分

然後在在layout/_scripts/third-party/comments/ 目錄中新增 gentie.swig，檔案內容如下：

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id %}
  {% if theme.gentie_productKey %}
    {% set gentie_productKey = theme.gentie_productKey %}
    <script>
      var cloudTieConfig = {
        url: document.location.href, 
        sourceId: "",
        productKey: "{{gentie_productKey}}",
        target: "cloud-tie-wrapper"
      };
    </script>
    <script src="https://img1.ws.126.net/f2e/tie/yun/sdk/loader.js"></script>
  {% endif %}
{% endif %}

然後在layout/_scripts/third-party/comments.swig檔案中追加：

{% include './comments/gentie.swig' %}

最後，在 layout/_partials/comments.swig 檔案中條件最後追加網易雲跟帖外掛引用的判斷邏輯：

{% elseif theme.gentie_productKey %}
      <div id="cloud-tie-wrapper" class="cloud-tie-wrapper">
      </div>

具體位置如下：

可能你hexo s時可能看不到，直接hexo d就可以看到了

近日，我朋友發來訊息，說網易雲跟帖要關了，我網上查了一下，果然如此

��都是淚,上次用了多說，結果多說關了，接著是網易雲跟帖��，這次直接用國外的來必力，應該不會這麼容易關吧��

方法其實還是跟上面差不多的

首先在 _config.yml 檔案中新增如下配置：

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: your uid

其中，livere_uid就是畫紅線的部分

然後在 layout/_scripts/third-party/comments/ 目錄中新增 livere.swig，檔案內容如下：

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id and not theme.gentie_productKey %}
  {% if theme.livere_uid %}
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  {% endif %}
{% endif %}

然後在 layout/_scripts/third-party/comments.swig檔案中追加：

{% include './comments/livere.swig' %}

最後，在 layout/_partials/comments.swig 檔案中條件最後追加 LiveRe 外掛是否引用的判斷邏輯：

{% elseif theme.livere_uid %}
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
{% endif %}

完

22. 隱藏網頁底部powered By Hexo / 強力驅動

開啟themes/next/layout/_partials/footer.swig,使用””隱藏之間的程式碼即可，或者直接刪除。位置如圖：

23. 修改網頁底部的桃心

還是開啟themes/next/layout/_partials/footer.swig，找到：
，然後還是在圖示庫中找到你自己喜歡的圖示，然後修改畫紅線的部分就可以了。

24. 文章加密訪問

實現效果圖

具體實現方法

開啟themes->next->layout->_partials->head.swig檔案,在以下位置插入這樣一段程式碼：

程式碼如下：

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('請輸入文章密碼') !== '{{ page.password }}'){
                alert('密碼錯誤！');
                history.back();
            }
        }
    })();
</script>

然後在文章上寫成類似這樣：

25. 新增jiathis分享

在主題配置檔案中，jiathis為true，就行了，如下圖

預設是這樣子的：

如果你想自定義話，開啟themes/next/layout/_partials/share/jiathis.swig修改畫紅線部分就可以了

26. 博文置頂

修改 hero-generator-index 外掛，把檔案：node_modules/hexo-generator-index/lib/generator.js 內的程式碼替換為：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 兩篇文章top都有定義
            if(a.top == b.top) return b.date - a.date; // 若top值一樣則按照文章日期降序排
            else return b.top - a.top; // 否則按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是隻有一篇文章top有定義，那麼將有top的排在前面（這裡用異或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都沒定義按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

在文章中新增 top 值，數值越大文章越靠前，如

---
title: 解決Charles亂碼問題
date: 2017-05-22 22:45:48
tags: 技巧
categories: 技巧
copyright: true
top: 100
---

27. 修改字型大小

開啟\themes\next\source\css\ _variables\base.styl檔案，將$font-size-base改成16px，如下所示：

$font-size-base            =16px

28. 修改打賞字型不閃動

修改檔案next/source/css/_common/components/post/post-reward.styl，然後註釋其中的函式wechat:hover和alipay:hover，如下：

/* 註釋文字閃動函式
 #wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
 #alipay:hover p{
   animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
*/

29. 側邊欄推薦閱讀

今天有位網友問推薦閱讀是怎麼弄，其實挺簡單的，開啟主題配置檔案修改成這樣就行了(links裡面寫你想要的連結):

# Blogrolls
links_title: 推薦閱讀
#links_layout: block
links_layout: inline
links:
  優設: http://www.uisdc.com/
  張鑫旭: http://www.zhangxinxu.com/
  Web前端導航: http://www.alloyteam.com/nav/
  前端書籍資料: http://www.36zhen.com/t?id=3448
  百度前端技術學院: http://ife.baidu.com/
  google前端開發基礎: http://wf.uisdc.com/cn/

30. 自定義滑鼠樣式

開啟themes/next/source/css/_custom/custom.styl,在裡面寫下如下程式碼

// 滑鼠樣式
  * {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }

其中 url 裡面必須是 ico 圖片，ico 圖片可以上傳到網上（我是使用七牛雲圖床），然後獲取外鏈，複製到 url 裡就行了

致謝

感謝大神們的文章，真的學到了許多，有些忘了記錄下來，在這裡由衷的感謝。雖然比較折騰，但是確實滿滿的成就感，Road endless its long and far, I will seek up and down！

歡迎訪問我的部落格

參考的文章：

基於github和hexo搭建部落格本地hexo部落格搭建
2017-12-13
GithubHexo
Hexo部落格同步工具
2019-03-01
Hexo
搭建Hexo部落格相簿
2018-09-02
Hexo
Hexo 搭建部落格
2018-12-05
Hexo
hexo搭建github部落格
2017-11-12
HexoGithub
hexo 部落格搭建筆記
2020-06-11
Hexo筆記
Hexo部落格搭建記錄
2023-01-12
Hexo
Hexo快速搭建部落格
2017-10-26
Hexo
linux 搭建hexo部落格
2015-09-03
LinuxHexo
自定義部落格園部落格的背景圖片
2021-02-18
批量匯出 CSDN 部落格並轉為 hexo 部落格風格
2019-09-30
Hexo
我的SimpleMemory部落格設定
2024-05-04
hexo搭建個人部落格心得
2019-02-20
Hexo
整合github、hexo搭建部落格
2019-03-11
GithubHexo
使用 hexo 搭建個人部落格
2019-02-16
Hexo
使用 Hexo 搭建靜態部落格
2021-06-18
Hexo
利用docker快速搭建hexo部落格
2019-01-07
DockerHexo
利用github hexo搭建部落格
2018-01-28
GithubHexo
Hexo部落格多端同步問題
2018-05-14
Hexo
Hexo系列3：部落格優化
2016-04-16
Hexo優化
淺析 Hexo 搭建部落格的原理
2017-08-12
Hexo
hexo+github+域名搭建自己的部落格
2017-07-24
HexoGithub
部落格園cnblog部落格遷移到Hexo(提供格式轉換)
2024-04-10
Hexo
基於github和hexo搭建部落格 HEXO樣式
2017-12-13
GithubHexo
Hexo-Node-Git搭建部落格
2019-04-10
HexoGit
Hexo部落格部署至伺服器
2022-01-25
Hexo伺服器
Hexo+Gitee搭建個人部落格
2021-03-31
HexoGitee
Hexo + Github 搭建靜態部落格(一)
2018-11-06
HexoGithub
hexo+github搭建個人部落格
2018-11-05
HexoGithub
基於Hexo搭建靜態部落格
2022-12-25
Hexo
hexo+GitHub部落格搭建實戰
2017-09-08
HexoGithub
hexo部落格同步管理及遷移
2017-09-28
Hexo
使用github和hexo搭建部落格
2017-02-27
GithubHexo
記錄搭建Hexo部落格系統
2017-12-28
Hexo
Git+Hexo搭建靜態部落格
2024-03-30
GitHexo
vps攜手hexo的部落格搭建之旅
2019-01-19
Hexo
用自己的伺服器搭建HEXO部落格
2020-11-27
伺服器Hexo
Hexo部落格系統搭建的完整過程
2018-02-23
Hexo

hexo部落格的背景設定

1. 在右上角或者左上角實現fork me on github

2.新增RSS

3. 新增動態背景

4. 實現點選出現桃心效果

5. 修改文章內連結文字樣式

6. 修改文章底部的那個帶#號的標籤

7. 在每篇文章末尾統一新增“本文結束”標記

8. 修改作者頭像並旋轉

9. 博文壓縮

10. 修改“程式碼塊自定義樣式

11. 側邊欄社交小圖示設定

12. 主頁文章新增陰影效果

13. 在網站底部加上訪問量

14. 新增熱度

15. 網站底部字數統計

16. 新增 README.md 檔案

17. 設定網站的圖示Favicon

18. 實現統計功能

19. 新增頂部載入條

20. 在文章底部增加版權資訊

21. 新增網易雲跟帖(跟帖關閉，已失效，改為來必力)

22. 隱藏網頁底部powered By Hexo / 強力驅動

23. 修改網頁底部的桃心

24. 文章加密訪問

25. 新增jiathis分享

26. 博文置頂

27. 修改字型大小

28. 修改打賞字型不閃動

29. 側邊欄推薦閱讀

30. 自定義滑鼠樣式

致謝

參考的文章：

相關文章