基本操作
根目录下的 _config.yml 解读
# Site
title: 奇特 #博客标题
subtitle: '' #博客副标题
description: '一个在github上搭建的hexo博客' #博客描述
keywords: #博客关键字
author: sywdebug #作者
language: zh_CN #语言
timezone: 'Asia/Shanghai' #时区
# URL
## 在此处设置您的网站网址。 例如,如果您使用GitHub Page,则将url设置为“ https://username.github.io/project”
url: https://sywdebug.gitee.io/blog #网址
root:/blog/ #根目录
permalink: :year/:month/:day/:title/ #文章的 永久链接 格式
permalink_defaults: #永久链接中各部分的默认值
pretty_urls: #改写 permalink 的值来美化 URL
trailing_index: true #是否在永久链接中保留尾部的 index.html,设置为 false 时去除
trailing_html: true #是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)
网站存放在子目录
如果您的网站存放在子目录中,例如 http://example.com/blog,则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/。
# Directory
source_dir: source #资源文件夹,这个文件夹用来存放内容。
public_dir: public #公共文件夹,这个文件夹用于存放生成的站点文件。
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #Include code 文件夹,source_dir 下的子目录
i18n_dir: :lang #国际化(i18n)文件夹
skip_render: #跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。
# Writing
new_post_name: :title.md #新文章的文件名称
default_layout: post #预设布局
auto_spacing:false #在中文和英文之间加入空格
titlecase: false #把标题转换为 title case
external_link: #在新标签中打开链接
enable: true #在新标签中打开链接
field: site #对整个网站(site)生效或仅对文章(post)生效
exclude: '' #需要排除的域名。主域名和子域名如 www 需分别配置
filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false #显示草稿
post_asset_folder: false #启动 [Asset 文件夹](https://hexo.io/zh-cn/docs/asset-folders)
relative_link: false #把链接改为与根目录的相对位址
future: true #显示未来的文章
highlight: #代码块的设置, see [Highlight.js](https://hexo.io/docs/syntax-highlight#Highlight-js) section for usage guide
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs: #代码块的设置, see [PrismJS](https://hexo.io/docs/syntax-highlight#PrismJS) section for usage guide
enable: false
preprocess: true
line_number: true
tab_replace: ''
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape #主题
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/sywdebug/blog.git
branch: master
主题下的 _config.yml 解读
# Schemes
scheme: Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
#scheme: Mist - Muse 的紧凑版本,整洁有序的单栏外观
#scheme: Pisces - 双栏 Scheme,小家碧玉似的清新
#scheme: Gemini
favicon:
small: /images/favicon-16x16-next.png #图标
medium: /images/favicon-32x32-next.png #图标
apple_touch_icon: /images/apple-touch-icon-next.png #图标
safari_pinned_tab: /images/logo.svg
#android_manifest: /manifest.json
# Custom Logo (Warning: Do not support scheme Mist)
custom_logo: #/uploads/custom-logo.jpg #主标题上方的logo
creative_commons:
license: by-nc-sa
sidebar: false #侧边栏中的版权标识
post: false #每篇文章底部都显示版权信息
language: zh_CN #语言
# 侧边导航栏菜单
menu:
#home: / || fa fa-home #首页
#about: /about/ || fa fa-user #关于
#tags: /tags/ || fa fa-tags #标签
#categories: /categories/ || fa fa-th #分类
#archives: /archives/ || fa fa-archive #归档
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat #公益404
# ---------------------------------------------------------------
# Sidebar Settings #侧边栏设置
# See: [https://theme-next.js.org/docs/theme-settings/sidebar](https://theme-next.js.org/docs/theme-settings/sidebar)
# ---------------------------------------------------------------
sidebar:
# Sidebar Position. #侧边栏定位:默认左侧
position: left
#position: right
# Sidebar Display (only for Muse | Mist), available values:
# - post 帖子自动展开。 默认
# - always 始终自动展开所有页面
# - hide 仅在单击侧栏切换图标时隐藏展开。
# - remove 完全删除侧边栏,包括侧边栏切换。
display: post
# Sidebar Avatar #侧边栏头像设置
avatar:
url: /images/avatar.png #路径
rounded: false #是否圆形
rotated: false #是否光标移上去后旋转
# 侧边栏外链
social:
GitHub: https://github.com/sywdebug || fab fa-github
E-Mail: mailto:sywdebug@gmail.com || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#*: https://*.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype
# 侧边栏友情链接
links_settings:
icon: fa fa-link
title: 友情链接
# Available values: block | inline
layout: block
links:
奇特主页: http://sywdebug.com
# 打赏功能
reward_settings:
enable: true #如果为true,则默认情况下会在每篇文章中显示一个捐赠按钮
animation: false
comment: 大爷赏点吧,求求了
reward:
wechatpay: /images/wechatpay.png #微信收款码
alipay: /images/alipay.png #支付宝收款码
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png
# 其他发布渠道
follow_me:
CSDN: https://blog.csdn.net/sywdebug?spm=1000.2115.3001.5343 || fab fa-contao
wordpress: http://blog.sywdebug.ml || fab fa-wordpress
#WeChat: /images/wechat_channel.jpg || fab fa-weixin
#RSS: /atom.xml || fa fa-rss
# 返回顶部
back2top:
enable: true
sidebar: false #在侧边栏中返回顶部
scrollpercent: true #滚动显示百分比标签。
motion:
enable: true #是否开启css动画
async: false
transition:
# All available transition variants: https://theme-next.js.org/animate/
post_block: fadeIn
post_header: fadeInDown
post_body: fadeInDown
coll_header: fadeInLeft
# Only for Pisces | Gemini.
sidebar: fadeInUp
花里胡哨
在右上角或左上角添加 fork me on github
点击 GitHub Ribbons 或 GitHub Corners 挑选自己喜欢的样式,复制代码
打开 /themes/next/layout/_layout.njk 文件
将复制的代码放在 <div class="headband"></div> 的下面
把网址改成自己的 github 网址即可
添加线条背景
注意:如果next主题在5.1.1以上的话就不用我这样设置,直接在主题配置文件中找到canvas_nest: false,把它改为canvas_nest: true就行了(注意分号后面要加一个空格)
打开 /themes/next/layout/_layout.njk 文件
在 body 里面添加代码
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
也可以使用
{% if theme.canvas_nest %}
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
配置项
color :线条颜色, 默认: '0,0,0';三个数字分别为(R,G,B)
opacity: 线条透明度(0~1), 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1
打开 /themes/next/_config.yml 最后写上
# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true
点击实现桃心效果和24字真言(自测没成功,有机会再改)
在 /themes/next/source/js 下新建 clicklove.js 文件,写入以下代码
!function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");requestAnimationFrame(r)}function n() {var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) {t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(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 c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".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;}"), n(), r()}(window, document);
然后在 /themes/next/layout/_layout.njk 文件内的 body 中引入 clicklove.js 文件
真言同上,js代码为
(function() {var coreSocialistValues = ["富强", "*", "文明", "和谐", "*", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"],index = Math.floor(Math.random() * coreSocialistValues.length);document.body.addEventListener('click',function(e) {if (e.target.tagName == 'A') {return;}var x = e.pageX,y = e.pageY,span = document.createElement('span');span.textContent = coreSocialistValues[index];index = (index + 1) % coreSocialistValues.length;span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');document.body.appendChild(span);animate(span);});})
修改文章内链接文本样式
在 /themes/next/source/css/_common/components/post/index.styl 内添加以下代码即可
// 文章内链接文本样式
.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;
}
}
修改文章底部的那个带#号的标签
修改 /themes/next/layout/_macro/post.njk 文件
搜索 rel="tag"
将后面的{{ tag_indicate }}换成
<i class="fa fa-tag"></i>
即可
在每篇文章末尾统一添加“本文结束”标记
在路径 \themes\next\layout_macro 中新建 passage-end-tag.njk 文件,写入
<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.njk 文件
在 post-footer 之前添加以下代码
<div>
{% if not is_index %}
{% include 'passage-end-tag.njk' %}
{% endif %}
</div>
打开 /themes/next/_config.yml 最后写上
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
网站底部字数统计
使用以下命令安装插件
npm install hexo-wordcount --save
然后在 /themes/next/layout/_partials/footer.njk 的合适的地方写入
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>
实现字数统计和阅读需要时长显示
使用以下命令安装 hexo-symbols-count-time 插件
npm install hexo-symbols-count-time --save
在根目录下的 _config.yml 下写入
symbols_count_time:
symbols: true # 文章字数统计
time: true # 文章阅读时长
total_symbols: true # 站点总字数统计
total_time: true # 站点总阅读时长
exclude_codeblock: false # 排除代码字数统计
next 自带 symbols_count_time,修改 /themes/next/_config.yml 中的 symbols_count_time
separated_meta: true # 是否另起一行(true的话不和发表时间等同一行)
item_text_post: true # 首页文章统计数量前是否显示文字描述(本文字数、阅读时长)
item_text_total: true # 页面底部统计数量前是否显示文字描述(站点总字数、站点阅读时长)
awl: 4 # 平均单词长度
wpm: 275 # 每分钟阅读词数
suffix: mins.
在文章底部增加版权信息
在 /themes/next/layout/_macro 下创建 my-copyright.njk,并写入
{% 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 %}
在 /themes/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;
}
在 /themes/next/layout/_macro/post.njk 合适的地方写入
<div>
{% if not is_index %}
{% include 'my-copyright.njk' %}
{% endif %}
</div>
可以自行查找原来的版权信息并注释
最后在 /themes/next/source/css/_common/components/post/index.styl 添加
@import "my-post-copyright";
如果要显示此版权信息,要在博客的md文档上加入 copyright: true,否则不生效
如果觉得每次都要输入copyright: true很麻烦的话,可以在 /scaffolds/post.md文件中添加:copyright:
这样每次 hexo new 的时候会自动添加