sunwengang blog

developer | android display/graphics

Hexo Next主题优化

sunwengang's Avatar 2019-07-13 web

分享本文
  1. 1. 首页预览加入图片
  2. 2. Hexo-lazyload-image图片懒加载
    1. 2.1. 下载插件
    2. 2.2. 修改_config.xml
  3. 3. 文章插入图片
    1. 3.1. 例如
  4. 4. Next主题图片浏览放大功能fancybox
  5. 5. Hexo NexT主题添加点击爱心效果
    1. 5.1. 创建js文件
    2. 5.2. 修改_layout.swig
  6. 6. Next网站标题栏颜色
  7. 7. 博客背景图片
    1. 7.1. 背景虚化
  8. 8. 添加资源链接菜单
  9. 9. 阅读全文设置
    1. 9.1. 解决
      1. 9.1.1. 第一种方法
    2. 9.2. Automatically Excerpt. Not recommend.
    3. 9.3. Please use in the post to control excerpt accurately.
      1. 9.3.1. 第二种方法
    4. 9.4. 效果
  10. 10. 标签云
  11. 11. 与主题样式一致的 404 页面
    1. 11.1. new page
    2. 11.2. index.md
  12. 12. 使用hexo-neat插件压缩页面以提高响应速度
    1. 12.1. 安装hexo-neat插件
    2. 12.2. 在站点配置文件中添加配置
  13. 13. 菜单上显示数目
  14. 14. Next主题代码块加入复制功能
  15. 15. 修改侧边栏宽度
  16. 16. Hexo博客NexT主题下添加文章边框阴影效果
  17. 17. 保留上次阅读时候的位置
  18. 18. 界面对齐方式

首页预览加入图片

在根目录下的images文件夹加入图片

1
2
3
4
5
6
7
8
---
title: Hexo Next主题优化
categories: Web
tags: 
- Hexo
photos: 
    - /images/background.jpg
---

Hexo-lazyload-image图片懒加载

下载插件

npm install hexo-lazyload-image –save

修改_config.xml

_config.xml
1
2
3
4
lazyload:
  enable: true 
  onlypost: false
  loadingImg: # eg. ./images/loading.png

文章插入图片

1. 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true

  1. 在你的hexo目录下执行这样一句话npm install hexo-asset-image –save，这是下载安装一个可以上传本地图片的插件

  2. 等待一小段时间后，再运行hexo n “xxxx”来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹;

  3. 最后在xxxx.md中想引入图片时，先把图片复制到xxxx这个文件夹中，然后只需要在xxxx.md中按照markdown的格式引入图片：
    ![你想输入的替代文字](图片名.jpg)

例如

![loading](background.jpg)

result：
loading

Next主题图片浏览放大功能fancybox

1
2
3
4
5
6
7
8
9
10
11
Step1:

cd next/source/lib
git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

ps:注意fancybox和next/_config.uml里面的名字保持一致

step2：
更改next/_config.uml文件

fancybox： true

Hexo NexT主题添加点击爱心效果

创建js文件

在/themes/next/source/js/src下新建文件 clicklove.js ，接着把该链接下的代码拷贝粘贴到 clicklove.js 文件中。
代码如下：

1
!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);

修改_layout.swig

在\themes\next\layout_layout.swig文件末尾添加：

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

Next网站标题栏颜色

打开themes/next/source/css/_custom/custom.styl，在里面新增如下代码：

1
2
3
.site-meta {
  background: $blue; //天空的颜色，和我的眼镜是绝配
}

博客背景图片

打开上述相同文件

1
2
3
4
5
6
7
body {
  background-image:url(/images/background.jpg);
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position:50% 50%;
	background-size: 100% 100%;
}

背景虚化

1
2
3
4
5
6
7
8
9
10
// 修改主体透明度
.main-inner {
  background: #fff;
  opacity: 0.85;
}

// 修改菜单栏透明度
.header-inner {
  opacity: 0.85;
}

添加资源链接菜单

(1) hexo new page "resources"

(2) 编辑resources文件夹下的md页面,将类型设置为resources，主题将自动为这个页面显示所有分类。

1
2
3
4
5
6
7
title: resources
date: 2019-07-14 13:05:38
type: "resources"
comments: false
---

(3) 在菜单中添加链接,编辑主题的_config.yml，在menu中的添加如下:

menu:
resources: /resources || download

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(4) 新添加的菜单需要翻译对应的中文,打开hexo>theme>next>languages>zh-Hans.yml，在menu下添加：

```css
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404
  resources: 资源

阅读全文设置

在网站首页只显示每篇文章的部分内容，不要全部内容都展示出来。

解决

要解决这个问题有两个方法：一是修改 _config.yml 文件设置，而是直接在你的 md 中加一句代码即可。

第一种方法

用文本编辑器打开 themes/next 目录下的 _config.yml 文件，找到这段代码：

Automatically Excerpt. Not recommend.

Please use in the post to control excerpt accurately.

1
2
3
4
5
6
auto_excerpt:
  enable: false
  length: 150
把 enable 的 false 改成 true 就行了，然后 length 是设定文章预览的文本长度。

修改后重启 hexo 就ok了。

第二种方法

在你写 md 文章的时候，可以在内容中加上 ，这样首页和列表页展示的文章内容就是 之前的文字，而之后的就不会显示了。

效果

上面两种方式展示出来的效果是不一样的。

第一种修改 _config.yml 文件的效果是会格式化你文章的样式，直接把文字挤在一起显示，最后会有 …

标签云

位置：\blog\themes\next\layout\page.swig
原来：

1
{{ tagcloud({min_font: theme.tagcloud.min, max_font: theme.tagcloud.max, amount: theme.tagcloud.amount, color: true, start_color: theme.tagcloud.start, end_color: theme.tagcloud.end}) }}

修改成:(else)

1
2
3
4
5
{% if not theme.tagcloud %}
  {{ tagcloud({min_font: 12, max_font: 30, amount: 200, color: true, start_color: '#ccc', end_color: '#111'}) }}
{% else %}
  {{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}
{% endif %}

与主题样式一致的 404 页面

new page

1
2
cd <blog-path>  #定位到 Hexo 博客目录
hexo new page "404"

index.md

1
2
3
4
5
---
title: 404 Not Found
comments: false
permalink: /404
---

使用hexo-neat插件压缩页面以提高响应速度

安装hexo-neat插件

npm install hexo-neat --save

在站点配置文件中添加配置

下边是我自己站点的相关配置，直接添加到站点配置文件_config.yml的末尾就可以。可以安装自己的需求去自定义那些文件需要压缩,主要是有些js可能压缩后会失效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'  
    - '**/love.js'     //此处忽略压缩点击桃心的特效

# 压缩博文配置结束

菜单上显示数目

在next的主题配置文件中找到下面内容，设置为true即可

1
2
3
menu_settings:
  icons: true
  badges: true # 显示文章数开关

Next主题代码块加入复制功能

在Next主题的配置文件，将copy_button打开

_congig.xml 
1
2
3
4
5
6
7
8
9
10
codeblock:
  # Manual define the border radius in codeblock, leave it blank for the default value: 1
  border_radius:
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result
    show_result: true
    # Style: only 'flat' is currently available, leave it blank if you prefer default theme
    style:

修改侧边栏宽度

1
2
3
4
# Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

Hexo博客NexT主题下添加文章边框阴影效果

themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
.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);
}

.main-inner {
    background: #fff;
    opacity: 0.85;
}

保留上次阅读时候的位置

_config.xml
1
2
# Automatically saving scroll position on each post / page in cookies.
save_scroll: true

界面对齐方式

_confi.xml
1
2
3
4
5
# Set the text alignment in the posts.
text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
  desktop: justify
  mobile: justify

本文作者 : sunwengang
本文使用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议
本文链接 : https://alonealive.github.io/Blog/2019/07/13/2019/190713_hexo-improve/

本文最后更新于 天前，文中所描述的信息可能已发生改变

本文发表于  , 最后修改于 

web