hexo+Github Pages部落格美化及優化
阿新 • • 發佈：2019-02-03
部落格開啟太慢
- 編輯主題配置檔案，註釋一行程式碼：
family: Lato
- 編輯
/themes/next/layout/_partials/head/external-fonts.swig檔案，把fonts.googleapi.com改為fonts.useso.com
指定不渲染檔案
-
在
Hexo目錄下的source目錄下新增不需要渲染的檔案：test.html -
修改
Hexo目錄下_config.yml裡的skip_render選項，格式如下：
skip_render: [test1.html,test2.html]
Fork me on GitHub
-
-
開啟
themes/next/layout/_layout.swig，在<div class="headband"></div>一行的下面貼上所複製的程式碼，並將程式碼中href改為自己的GitHub地址。
滑鼠點選桃心效果
- 複製下面這段內容，並寫入
/themes/next/source/js/src/love.js儲存。
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
- 編輯
/themes/next/layout/_layout.swig，在末尾新增以下程式碼：
<!-- 頁面點選小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
修改文章底部帶#號的標籤
修改檔案/themes/next/layout/_macro/post.swig，將rel="tag">#中#換成<i class="fa fa-tag"></i>
在文末新增“本文結束”標記
- 新建
/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
頭像旋轉
編輯/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);
}
}
博文壓縮
- 在站點根目錄下執行以下命令：
npm install gulp -g
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save
- 在根目錄下新建
gulpfiles.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');
var imagemin = require('gulp-imagemin');
// 壓縮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'))
});
// 壓縮css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./public'));
});
// 壓縮js
gulp.task('minify-js', function() {
return gulp.src('./public/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 壓縮圖片
gulp.task('minify-images', function() {
return gulp.src('./public/images/**/*.*')
.pipe(imagemin(
[imagemin.gifsicle({'optimizationLevel': 3}),
imagemin.jpegtran({'progressive': true}),
imagemin.optipng({'optimizationLevel': 7}),
imagemin.svgo()],
{'verbose': true}))
.pipe(gulp.dest('./public/images'))
});
// 預設任務
gulp.task('default', [
'minify-html','minify-css','minify-js','minify-images'
]);
- 每次生成時使用命令：
hexo g && gulp即可。
側邊欄社交小圖示設定
- 開啟主題配置檔案
_config.yml，搜尋social_icons，在圖示庫裡找到喜歡的圖示，將名字複製到對應位置。
文章新增陰影效果
- 開啟
/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);
}
不蒜子網頁計數器
- 編輯
/themes/next/layout/_partials/footer.swig，在適當位置新增：
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站總訪問量<span id="busuanzi_value_site_pv"></span>次</span>
設定網站的圖示favicon
- 自己製作一張32*32的
ico圖示命名為favicon.ico，把圖示存放到/themes/next/source/images/。修改主題配置檔案:
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico
實現文章統計功能
-
在根目錄下安裝
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
新增頂部載入條
- 修改
/themes/next/layout/_partials/head.swig，在<meta>下新增如下程式碼：
<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">
- 修改進度條顏色，繼續在上面程式碼後新增：
<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>
文章底部新增版權資訊
- 新建
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 src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<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');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '複製成功',
icon: "success",
showConfirmButton: true
});
});
});
</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" -
在每篇文章前設定
copyright: true即可
文章加密訪問
- 編輯
themes/next/layout/_partials/head.swig，在<meta>標籤下新增如下程式碼：
<script>
(function () {
if ('{{ page.password }}') {
if (prompt('請輸入文章密碼') !== '{{ page.password }}') {
alert('密碼錯誤！');
if (history.length === 1) {
location.replace("http://xxxxxxx.xxx"); // 這裡替換成你的首頁
} else {
history.back();
}
}
}
})();
</script>
- 在需要密碼解鎖的文章前設定
password: password。後面的password自行設定。