前言
-
本篇文章是在已经搭建好gitpage+hexo的博客的前提下
-
不懂怎么搭建的可以参考上一篇<搭建个人博客>
-
大致效果如我的博客所示https://moking1997.github.io/
-
我使用的是next主题,官网有简单的教程
下载next主题
- 在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：
cd your-hexo-site git clone https://github.com/iissnan/hexo-theme-next themes/next
- 注意我这里用的是克隆版本,之后的更新可以通过 git pull来快速更新
启用主题
-
与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到theme字段，并将其值更改为 next
-
然后输入以下命令查看next主题效果
hexo clean
hexo g
hexo d
- 基本配置next官网都有教程，这里不过多讲述了
设置菜单子页
- 编辑next主题配置文件，修改以下内容：
menu:
home: /
archives: /archives
#about: /about
#categories: /categories
tags: /tags
#commonweal: /404.html
-
假设要添加categories页面，先将其前的#去掉
-
再在根目录通过hexo new page "categories"创建该文件夹
-
修改index.md中的代码
---
title: All categories
date: 2014-12-22 12:39:04
type: "categories"
---
- 再在自己要分类的文章头部添加代码，如：
title: 撰写个人博客
author: Moking
tags:
- 博客
categories:
- 博客
date: 2018-05-27 14:22:39
添加背景图片
-
修改背景样式
-
修改themes\next\source\css\ _custom\custom.styl文件，这个是Next故意留给用户自己个性化定制一些样式的文件，添加以下代码：
body {
background:url(https://source.unsplash.com/random/1600x900);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}
- url()内可以换成自己文件夹下的图片如:background:url(/images/background.jpg);
- 其中images的文件目录是在next\source下
- repeat、attachment、position就是调整图片的不重复出现、不滚动，位置等等
设置next-Pisces主题透明度
调整Pisces主题内容版块的透明度
- 在\themes\next\source\css_schemes\Pisces_layout.styl目录下，修改.content-wrap中的内容，添加opacity属性：
调整Pisces主题侧边栏的透明度
- 在\themes\next\source\css_schemes\Pisces_layout.styl目录下，修改.sidebar中的内容，添加opacity属性：
炫酷动态背景
- 打开next/layout/_layout.swig文件,在</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 %}
- 打开next/_config.yml，添加以下代码
#Canvas-nest
canvas_nest: true
- 在layout文件下面的_layout.swig 添加一个canvas
<div class="bg_content">
<canvas id="canvas"></canvas>
</div>
添加网易云音乐
- 在网易云官网搜索自己喜欢的音乐生成生成外链播放器
- 我放在了layout/_macro/sidebar.swig 文件下
<div id="music163player">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
</iframe>
</div>
添加Fork me on GitHub
- 去网址https://github.com/blog/273-github-ribbons 挑选自己喜欢的样式
- 复制代码，添加到themes\next\layout_layout.swig的body标签之内即可
hexo-wordcount实现统计功能
-
wordcount可以实现字数统计，阅读时常还有总字数的统计功能
-
只需要npm install hexo-wordcount –save 就可以安装wordcount插件，
-
安装完插件之后在主题的配置文件中开启该功能就可以了
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true
Hexo-Next底部logo栏更改以及注意事项
- 用Next主题搭建起来的博客，在底部会有一个的官方logo
- 解决方案:
- 1.找到 \themes\next\layout_partials\下面的footer.swig文件，打开会发现，如下图的语句
-
第一个框 是下面侧栏的“日期❤ XXX”
如果想像我一样加东西，一定要在双大括号外面写。如：xxx,当然你要是想改彻底可以变量都删掉，看个人意愿。 -
第二个，是图一当中 “由Hexo驱动” 的Hexo链接，先给删掉防止跳转，如果想跳转当然也可以自己写地址，至于中文一会处理。注意删除的时候格式不能错，只把…标签这部分删除即可，留着两个单引号’’,否则会出错哦。
-
第三个框也是最后一个了，这个就是更改图一后半部分“主题-Next.XX”,这个比较爽直接将..都删掉，同样中文“主题”一会处理，删掉之后在上一行 ‘-’后面可以随意加上你想显示的东西，不要显示敏感信息哟，请自重
-
2.处理剩余的中文信息。打开\themes\next\languages\ 下面的语言文件zh-Hans.yml（这里以中文为例，有的习惯用英文的配置文件，道理一样，找对应位置即可）
网友评论