hexo建站系列(一)

admin 2022年1月6日01:38:36安全博客评论14 views5980字阅读19分56秒阅读模式

目录介绍

hexo安装完毕后目录如下

1
2
3
4
5
6
7
8
9
10
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
├── themes
├── _config.yml
└── package.json
  • .deploy:执行hexo deploy命令部署到GitHub上的内容目录
  • public:执行hexo generate命令,输出的静态网页内容目录
  • scaffolds:layout模板文件目录,其中的md文件可以添加编辑
  • scripts:扩展脚本目录,这里可以自定义一些javascript脚本
  • source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
    _drafts:草稿文章
    _posts:发布文章
  • themes:主题文件目录
  • _config.yml:全局配置文件,大多数的设置都在这里
  • package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮

Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中,在执行hexo deploy时将其复制到.deploy文件夹中。

Hexo图片路径问题

  • 首先确认_config.yml 中有 post_asset_folder:true
    Hexo 提供了一种更方便管理 Asset 的设定:post_asset_folder
    当您设置post_asset_foldertrue参数后,在建立文件时,Hexo
    会自动建立一个与文章同名的文件夹,您可以把与该文章相关的所有资源都放到那个文件夹,如此一来,您便可以更方便的使用资源。

  • 在hexo的目录下执行npm install https://github.com/CodeFalling/hexo-asset-image --save(需要等待一段时间)。

  • 完成安装后用hexo新建文章的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹。图片就可以放在文件夹下面。结构如下:

    1
    2
    3
    4
    5
    本地图片测试
    ├── apppicker.jpg
    ├── logo.jpg
    └── rules.jpg
    本地图片测试.md
  • 这样的目录结构(目录名和文章名一致),只要使用 ![logo](本地图片测试/logo.jpg) 就可以插入图片。其中[]里面不写文字则没有图片标题。
    生成的结构为:

    1
    2
    3
    4
    5
    public/2016/3/9/本地图片测试
    ├── apppicker.jpg
    ├── index.html
    ├── logo.jpg
    └── rules.jpg
  • 同时,生成的 html 是

<img src="/2016/3/9/本地图片测试/logo.jpg" alt="logo">

Hexo 导航菜单栏设置

在Hexo里,默认的导航菜单只有Home和Archives两项。

如何添加其他项?

打开主题里的配置文件:_config.yml

搜索menu

1
2
3
4
menu:
Home: /
Archives: /archives
About: /about

名称:路径

这里名称About的访问路径为about

建立about目录,运行:

1
hexo n page "about"

会在source目录里生成一个对应的about目录,该目录下的index.md即为访问所指文件。

Hexo 添加RSS和Sitemap

1、使用npm安装插件

1
2
npm install hexo-generator-feed
nmp install hexo-generator-sitemap

2、在配置文件里引用插件

1
2
3
plugins:
hexo-generator-sitemap
hexo-generator-feed

此时sitemap也已经配置好了,重新生成后直接访问/sitemap.xml即可看到站点地图

3、在导航上添加rss链接

在themes 自己所用的主题目录下,打开_config.xml

rss: 部分修改为 rss: atom.xml

menu中添加 Rss: /atom.xml

Hexo-Light添加百度搜索

由于hexo默认的为google搜索,对于国内用户很不友好,所以我们改为百度。

修改目录themes/light/layout/_widget/search.js

1
2
3
4
5
6
7
8
9
10
<div class="search">
<form action="//baidu.com/baidu" method="get" accept-charset="utf-8">
<input type="search" name="word" results="0" placeholder="<%= __('search') %>">
<input type="hidden" name="si" value="<%- config.url.replace(/^https?:\/\//, '') %>">
<input name=tn type=hidden value="bds">
<input name=cl type=hidden value="3">
<input name=ct type=hidden value="2097152">
<input name=s type=hidden value="on">
</form>
</div>

Hexo添加加密功能

安装

在站点根目录中执行以下命令安装依赖:

1
npm install --save hexo-blog-encrypt

在站点配置文件中添加如下字段:

_config.ymlencrypt:

1
2
3
enable: true
default_abstract: 此文章已被加密,需要输入密码访问。 //首页文章列表中加密文章的默认描述文案
default_message: 请输入密码以阅读这篇私密文章。 //文章详情页的密码输入框上的默认描述文案

重启服务器,这个时候可能需要经历较长一段时间的加密过程,请耐心等待,加密完成后刷新页面将会显示密码输入框,输入密码后才能继续访问文章内容。

该功能只会加密文章正文,其他内容如打赏、版权信息、标签等则不会被加密隐藏,这样看起来有点奇怪,所以建议加密文章隐藏掉打赏和版权信息内容。

美化

密码输入错误时将会显示浏览器默认告警弹窗,可以使用 sweetalert 来美化错误提示:

其中 ‘-’ 代表去掉该行, ‘+’代表添加该行

在主题自定义布局文件中添加如下代码:

themes\next\layout_custom\custom.swig

1
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

如果 custom.swig 文件不存在,需要手动新建并在布局页面中 body 末尾引入

themes\next\layout_layout.swig

1
2
3
4
5
6
7
8
      ...
{% include '_third-party/exturl.swig' %}
{% include '_third-party/bookmark.swig' %}
{% include '_third-party/copy-code.swig' %}

+ {% include '_custom/custom.swig' %}
</body>
</html>

在 node_modules 依赖库中修改 hexo-blog-encrypt 源码:

node_modules\hexo-blog-encrypt\lib\blog.encrypt.js

1
2
3
4
5
6
7
8
9
10
11
12
13
  ...
} catch (e) {
- alert(decryptionError);
+ swal({
+ text: "憨批!密码错了!",
+ icon: "error",
+ className: "password-error",
+ timer: 1000,
+ button: false
+ });
console.log(e);
}
...

1
2
3
4
5
6
7
swal({   
text: "憨批!密码错了!",
icon: "error",
className: "password-error",
timer: 1000,
button: false
});

在自定义样式文件中添加如下代码:

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

1
2
3
4
5
6
7
8
9
//密码错误sweetalert弹框样式修改
.swal-overlay {
background-color: transparent;
}

.password-error {
box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
border-radius: 4px;
}

由于是在 node_module 中修改的依赖文件,一旦更新或者重装依赖都会覆盖修改,需要重新修改一遍。

效果展示

image-20191015230506307

报错

Unhandled rejection TypeError: Cannot read property ‘toString’ of null

结果:尝试卸载重装,尝试npm audit fix 但是都不行,百度也没有什么好的方法,暂时搁置。

image-20191015230719705

添加分类及标签

1、创建“分类”选项

1.1 生成“分类”页并添加tpye属性

打开命令行,进入博客所在文件夹。执行命令

1
$ hexo new page categories

成功后会提示:

1
INFO  Created: ~/Documents/blog/source/categories/index.md

根据上面的路径,找到index.md这个文件,打开后默认内容是这样的:

1
2
3
4
---
title: 文章分类
date: 2017-05-27 13:47:40
---

添加type: "categories"到内容中,添加后是这样的:

1
2
3
4
5
---
title: 文章分类
date: 2017-05-27 13:47:40
type: "categories"
---

保存并关闭文件。

1.2 给文章添加“categories”属性

打开需要添加分类的文章,为其添加categories属性。下方的categories: web前端表示添加这篇文章到“web前端”这个分类。注意:hexo一篇文章只能属于一个分类,也就是说如果在“- web前端”下方添加“-xxx”,hexo不会产生两个分类,而是把分类嵌套(即该文章属于 “- web前端”下的 “-xxx ”分类)。

1
2
3
4
5
6
---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories:
- web前端
---

至此,成功给文章添加分类,点击首页的“分类”可以看到该分类下的所有文章。当然,只有添加了categories: xxx的文章才会被收录到首页的“分类”中。

2、创建“标签”选项

2.1 生成“标签”页并添加tpye属性

打开命令行,进入博客所在文件夹。执行命令

1
$ hexo new page tags

成功后会提示:

1
INFO  Created: ~/Documents/blog/source/tags/index.md

根据上面的路径,找到index.md这个文件,打开后默认内容是这样的:

1
2
3
4
---
title: 标签
date: 2017-05-27 14:22:08
---

添加type: "tags"到内容中,添加后是这样的:

1
2
3
4
5
---
title: 文章分类
date: 2017-05-27 13:47:40
type: "tags"
---

保存并关闭文件。

2.2 给文章添加“tags”属性

打开需要添加标签的文章,为其添加tags属性。下方的tags:下方的- jQuery - 表格
- 表单验证就是这篇文章的标签了

1
2
3
4
5
6
7
8
9
10
---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories:
- web前端
tags:
- jQuery
- 表格
- 表单验证
---

至此,成功给文章添加分类,点击首页的“标签”可以看到该标签下的所有文章。当然,只有添加了tags: xxx的文章才会被收录到首页的“标签”中。

细心的朋友可能已经发现,这两个的设置几乎一模一样!是的,没错,思路都是一样的。所以我们可以打开scaffolds/post.md文件,在tages:上面加入categories:,保存后,之后执行hexo new 文章名命令生成的文件,页面里就有categories:项了。

scaffolds目录下,是新建页面的模板,执行新建命令时,是根据这里的模板页来完成的,所以可以在这里根据你自己的需求添加一些默认值。

不蒜子统计功能

NexT主题集成了不蒜子统计功能,以下为我的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
copy# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer: 人次
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer: 次
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i>
page_pv_footer: 次

enable: true时,代表开启全局开关。若site_uv、site_pv、page_pv的值均为false时,不蒜子仅作记录而不会在页面上显示。
site_uv: true时,代表在页面底部显示站点的UV值。
site_pv: true时,代表在页面底部显示站点的PV值。
page_pv: true时,代表在文章页面的标题下显示该页面的PV值(阅读数)。
site_uv_headersite_uv_footer这几个为自定义样式配置,相关的值留空时将不显示,可以使用(带特效的)font-awesome。

FROM :b0urne.top | Author:b0urne

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年1月6日01:38:36
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  hexo建站系列(一) http://cn-sec.com/archives/722065.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: