Theme NexT works best with JavaScript enabled

NexT的一些小修小改

添加博客置顶

安装插件

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

添加置顶开关

找到 /blog/source/scaffolds/post.md 添加

1
2
3
4
5
6
7
---
title: {{ title }}
date: {{ date }}
tags:
categories:
top: false
---

然后每次新建博客 hexo new"postname" 会显示页面

1
2
3
4
5
6
7
---
title:
top: false
date:
tags:
categories:
---

top: false 改成 true 就开启了文章置顶

设置置顶标志

打开 /themes/next/layout/_macro 目录下的post.swig文件,定位到 <div class="post-meta"> 标签下,插入如下代码:

1
2
3
4
5
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=green>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

就能在博客页头看到“置顶”标记了。

修改链接的默认格式

Hexo的永久链接的默认格式是 :year/:month/:day/:title/ 比如访问站点下某一篇文章时,其路径是 2018/04/12/xxxx/ 如果我们的文章标题是中文的,那么该路径就会出现中文字符。在路径中出现了中文字符很容易引发各种问题。

安装插件

在站点根目录执行命令:

$ npm install hexo-abbrlink --save

修改站点配置文件

打开根目录下的 _config.yml 文件,修改如下配置:

1
2
3
4
5
6
# permalink: :year/:month/:day/:title/
# permalink_defaults:
permalink: posts/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

这里将页面都添加了 .html 的后缀,用来伪装成静态页面(虽说Hexo的页面本身就是静态页面),这样可以直接从路径就知道这是个静态页面,方便seo。

接下来重新部署,可以看到文章路径变成了 /posts/xxxxx.html 就算我们将文字标题命名为中文也没问题了。

移动端页面调整

手机端网页左右留白太多,影响阅读体验,特别是看代码特费劲。

打开路径 /themes/source/css/_schemes/pisces/_layout.styl文件,把下面padding: 20px改小就好了,建议5或者0.

1
2
3
4
+tablet-mobile() {
border-radius: initial;
padding: 20px;
width: 100%;

修改阅读截断

在阅读一篇文章的时候,点开“阅读全文”的时候会截一段,这个感觉很突兀,俺很不喜欢。于是就改成点击阅读全文不截断。

打开文件 /themes/layout/_macro/post.swig找到post-button字头把里面的#more删除即可,如下:

1
2
3
<div class="post-button">
<a class="btn" href="{{ url_for(post.path) }}{%- if theme.scroll_to_more %}#more{%- endif %}" rel="contents">`
{{ __('post.read_more') }} &raquo;

修改菜单栏字体

菜单栏字体太小,只有13px影响观感。

打开文件/themes/source/css/_common/outline/header/menu.styl,找到font-size字头把smaller修改为small或者medium.

small=14px medium=16px

修改Pisces主题文章分割线长度

更改主题路径下 /source/css/_common/components/post/post-eof.styl 中,把8%改大就可以了。

1
2
3
4
5
6
.post-eof {
background: $grey-light;
height: 1px;
margin: $post-eof-margin-top auto $post-eof-margin-bottom;
text-align: center;
width: 8%;

修改版权信息

打开文件/themes/layout/_partials/post/post-copyright.swig,修改下面的字段,分别是作者,本文链接,版权声明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul class="post-copyright">
<li class="post-copyright-author">
<strong>{{ __('post.copyright.author') + __('symbol.colon') }} </strong>{#
#}{{ post.author or author }}{#
#}</li> //作者信息
<li class="post-copyright-link">
<strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
{%- set postURL = post.url or post.permalink %}
{{ next_url(postURL, postURL, {title: post.title}) }}
</li> //本文链接
<li class="post-copyright-license">
<strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>{#
#}{{ __('post.copyright.license_content', next_url(ccURL, ccIcon + ccText)) }}{#
#}</li> //版权声明
</ul>
</div>

修改行内代码色块和字体颜色

找到/next/source/css/_variables/base.styl文件,找到Code & Code Blocks字段

1
2
$code-background                = $gainsboro; #code-background是指色块颜色
$code-foreground = #fc6423; #code-foreground是指字体颜色

选择合适的色号,可参考下面网址:https://www.color-hex.com/

添加分享

安装share插件

$ npm install --save theme-next/hexo-next-share#last-release

添加Need More Share

以下添加在themes/_config.yml里即可:

Need More Share

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
needmoreshare:
enable: true
cdn:
js: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.js
css: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.css
postbottom:
enable: true
options:
iconStyle: box
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: false
options:
iconStyle: box
boxForm: horizontal
position: middleRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

– END –

yeahwu 支付宝

支付宝

yeahwu 比特币

比特币