1.主頁(yè)文章添加邊框陰影效果
border.png
- 打開(kāi)
themes/next/source/css/_custom/下的custom.styl,向里面加代碼
// 主頁(yè)文章添加陰影效果
.post {
margin-top: 0px;
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);
}
2.修改文章間分割線
- 打開(kāi)
themes/next/source/css/_common/components/post/下的post-eof.styl,修改
.posts-expand {
.post-eof {
display: block;
// margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 0%; //分割線長(zhǎng)度
height: 0px; // 分割線高度
background: $grey-light;
text-align: center;
}
}
3.代碼塊自定義樣式
image.png
- 打開(kāi)
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;
}
4.開(kāi)啟版權(quán)聲明
-
主題配置文件下,搜索關(guān)鍵字post_copyright,enable改為true
# Declare license on posts
post_copyright:
enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
5.自定義文章底部版權(quán)聲明
image.png
5.1在目錄 themes/next/layout/_macro/下添加 my-copyright.swig,內(nèi)容如下:
{% if page.copyright %}
<div class="my_post_copyright">
<script src="http://cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS庫(kù) 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" >
<p><span>本文標(biāo)題:</span>{{ page.title }}</a></p>
<p><span>文章作者:</span>{{ theme.author }}</a></p>
<p><span>發(fā)布時(shí)間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="點(diǎn)擊復(fù)制文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="復(fù)制成功任斋！"></i></span>
</p>
<p><span>許可協(xié)議:</span><i class="fa fa-creative-commons"></i> <a rel="license" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際</a> 轉(zhuǎn)載請(qǐng)保留原文鏈接及作者纫骑。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
clipboard.on('success', $(function(){
$(".fa-clipboard").click(function(){
swal({
title: "",
text: '復(fù)制成功',
html: false,
timer: 500,
showConfirmButton: false
});
});
}));
</script>
{% endif %}
5.2在目錄themes/next/source/css/_common/components/post/下添加my-post-copyright.styl,內(nèi)容如下:
.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: #333333; // title color
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: #0593d3; // link color
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;
}
5.3 修改themes/next/layout/_macro/post.swig,在代碼如下
{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}
之前添加增加如下代碼：
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>
- 修改
themes/next/source/css/_common/components/post/post.styl文件煮甥，在最后一行增加代碼：
@import "my-post-copyright"
5.4設(shè)置新建文章自動(dòng)開(kāi)啟copyright,即新建文章自動(dòng)顯示自定義的版權(quán)聲明,設(shè)置your site/scaffolds/post.md文件
---
title: {{ title }}
date: {{ date }}
tags:
type: "categories"
categories:
copyright: true #新增,開(kāi)啟
---
6.在右上角或者左上角實(shí)現(xiàn)fork me on github
No.1.png
- 選擇樣式GitHub Ribbons,修改圖片跳轉(zhuǎn)鏈接,并復(fù)制文本框中的代碼
ribbons.png - 打開(kāi)
themes/next/layout/下的_layout.swig文件击孩，把代碼復(fù)制到<div class="headband"></div>下面
7.修改文章底部的那個(gè)帶#號(hào)的標(biāo)簽
No.2.png
- 打開(kāi)
themes/next/layout/_macro/下的post.swig文件,搜索rel="tag">#,將#換成<i class="fa fa-tag"></i>
<div class="post-tags">
{% for tag in post.tags %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}
</div>
8.添加頂部加載條
- 打開(kāi)
themes/next下的_config.yml矮男，搜索關(guān)鍵字pace,設(shè)置為true,可以更換加載樣式
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash #替換更換樣式
9.本地搜索
search.png
- 在你站點(diǎn)的根目錄下
$ npm install hexo-generator-searchdb --save
- 打開(kāi)
Hexo 站點(diǎn)的_config.yml,添加配置
search:
path: search.xml
field: post
format: html
limit: 10000
- 打開(kāi)
themes/next下的_config.yml,搜索關(guān)鍵字local_search,設(shè)置為true
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1
10.修改網(wǎng)頁(yè)底部
heart.png
10.1在圖標(biāo)庫(kù)中找到你自己喜歡的圖標(biāo), 修改桃心,打開(kāi)themes/next下的_config.yml,搜索關(guān)鍵字authoricon,替換圖標(biāo)名
# icon between year and author @Footer
authoricon: id-card
10.2隱藏網(wǎng)頁(yè)底部Hexo 強(qiáng)力驅(qū)動(dòng)
- 打開(kāi)
主題配置文件,搜索關(guān)鍵字copyright配并，如下:
# Footer `powered-by` and `theme-info` copyright
copyright: false
Hexo-Next-主題優(yōu)化(一)
Hexo-Next-主題優(yōu)化(三)
Hexo-Next-主題優(yōu)化(四)
