博客主题配置

Posted on | Post modified: | In | Visitors:
Words count in article: 1,009 | Reading time ≈ 5分钟

hexo基本使用

创建新页面

1
hexo new page your_page_name

执行命令后会生成/source/your_page_name/index.md。

接着在theme/next/_condig.yml找到menu属性设置路由即可。

如有必要，需要在theme/next/languages找到menu进行设置。

创建新博客文章

1
2
3
4
# 创建新的文章
hexo new post your_post_name
# 创建新的草稿
hexo new draft your_draft_name

博客主题的基本配置

博客基本信息修改位置为：/_config.yml

博客logo修改位置为：

1
/themes/next/source/images/apple-touch-icon-next.png;/themes/next/source/images/favicon-16*16-next.png;/themes/next/source/images/favicon-32*32-next.png;

三个文件需要修改，缩放图片建议使用百度搜索的改图宝。

博客大背景图片修改位置为：

/theme/next/source/css/_custom/custom.styl

在右上角实现fork me on github:

从这里复制代码到themes/next/layout/_layout.swig文件中的<div class="headband"></div>一句下面并修改href。

点击动画特效：

修改位置为themes/next/source/js/src/click-effect.js，动画特效可以自己DIY,默认设置的特效为社会主义核心价值观。

修改文章底部的那个带#号的标签为更漂亮的样式：

修改模板/themes/next/layout/_macro/post.swig，搜索rel="tag">#，将#换成<i class="fa fa-tag"></i>

修改作者头像：

/themes/next/source/images/avater.jpg

语言设置bug:

1
2
1.在hexo 文件夹里主题 next文件夹里的language 文件夹 找到 zh-Hans.yml 重命名 zh-CN.yml
2.在hexo 文件夹里的_config.yml 修改 language: zh-CN

文章加密访问：

打开themes->next->layout->_partials->head.swig文件，在rel="stylesheet"的下一行添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    (function () {
        if ('{{ page.password }}') {
            if (prompt('请输入文章密码') !== '{{ page.password }}') {
                alert('密码错误！');
                if (history.length === 1) {
                    location.replace("http://xxxxxxx.xxx"); // 这里替换成你的首页
                } else {
                    history.back();
                }
            }
        }
    })();
</script>

使用方法如下：

友情链接设置：在/themes/next/_config.yml的Blog rolls中这只链接即可

1
2
3
4
5
6
7
8
# Blog rolls
links_icon: link
links_title: 友情链接
# links_layout: block
links_layout: inline
links:
  your links

自定义鼠标样式：

在/themes/next/source/css/_custom/custom.styl中添加如下代码

鼠标样式的ico文件有需要的话可以来这里自己DIY。

博客添加打赏功能：

在/themes/next/_config.yml中搜索reward并对收款码进行修改。

第三方服务配置

添加RSS:

配置位置分别为/_config.yml与/themes/next/_config.yml

访客统计：

根据教程，在leancloud注册并新建应用，获取id和key后填写到_config.yml里leancloud_visitors的属性中。

为博客添加宠物：

在终端输入npm install -save hexo-helper-live2d在/themes/next/_config.yml中添加代码,详情请见这里

博客在线显示pdf功能

首先安装插件

1
npm install --save hexo-pdf

使用方法为
1
2
{% pdf http://your_pdf_link.pdf %}
{% pdf ./your_pdf_**relative**_path %}

修改博客的搜索功能：

建议使用algolia,因为swiftype已收费。

1
2
3
4
5
6
7
8
npm install hexo-algolia --save
```    
在`/themes/next/_config.yml`中搜索algolia,添加代码：
``` js
algolia:
  applicationID: your_algolia_ud
  apiKey: your_apiKey
  indexName: your_index

文章置顶功能

安装第三方插件

1
npm uninstall hexo-generator-index --save

对需要置顶的文章添加属性即可
1
2
3
4
5
6
---
title: hexo+GitHub博客搭建实战
date: 2017-09-08 12:00:25
categories: 博客搭建系列
**top: true**
---

参考与引用

  1. https://blog.csdn.net/qq_33232071/article/details/51108062
  2. https://hexo.io/zh-cn/docs/setup.html
  3. http://mashirosorata.vicp.io/HEXO-NEXT%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E5%8C%96%E9%85%8D%E7%BD%AE.html
  4. https://segmentfault.com/a/1190000009544924#articleHeader21
  5. https://github.com/shenzekun/shenzekun.github.io/blob/hexo/themes/next/layout/_layout.swig
  6. https://baike.baidu.com/item/%E7%A4%BE%E4%BC%9A%E4%B8%BB%E4%B9%89%E6%A0%B8%E5%BF%83%E4%BB%B7%E5%80%BC%E8%A7%82/3271832?fr=aladdin
  7. https://blog.csdn.net/ganzhilin520/article/details/79048021
  8. https://www.zhihu.com/question/41625825
  9. https://www.jianshu.com/p/f5c184047e72
  10. https://github.com/xiaweizi/BackupBlog/commit/b97173da33837604a31f2e5f78b17ba819306f74
  11. https://blog.csdn.net/luzheqi/article/details/52798557
  12. https://blog.csdn.net/qwerty200696/article/details/79010629
  13. https://blog.csdn.net/pop1586082213/article/details/54576131
  14. https://github.com/nodejs/node-v0.x-archive/issues/3911
请zzy824喝杯咖啡
0%