Hexo的使用

前言: 一直对hexo的风格所喜欢者,只是在开始的时候选择阴差阳错的选择了workpress ,搭建的博客也是很好使用,最近看到一篇关于hexo搭建的网页,我觉得我还是在来折腾一次,趁着年轻,赶快折腾.

Hexo的安转

首先是你有自己的云主机; 其次就是你使用软件登录进去,这些我前面都有自己的文件.

我们手下是xshell进行登录:

安转git

Linux (Ubuntu, Debian)：sudo apt-get install git-core
Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

上面对Linux根据不同使用到的安装git的命令.

之后就是安转nodes

连接地址: (hexo的使用手册)https://hexo.io/zh-cn/docs/index.html

根据这个手册在使用的时候出现的信息是不是我所想要的, 执行安转nodes 的第二个命令的时候出现了错误.

其实我们不需要自己输入,直接复制在到xhsell中右击粘贴回车就ok了!

图片一

使用到的命令行如下:

https://hexo.io/zh-cn/docs/index.html

https://hexo.io/zh-cn/docs/index.html

之后的操作就是重启连接终端,执行命令进行安转hexo

nvm install stable

安装Nodes.js之后我们才开始安装Hexo

安装Hexo

直接复制命令行进行安装:

npm install -g hexo-cli

之后就是安装的hexo的初始化等的操

我们是安装在/opt/hexoflolder文件夹下面.我们使用xftp看看安装完成后的目录结构.

使用到的命名行如下:

$ hexo init <folder>
$ cd <folder>
$ npm install

第一次安装之后的访问地址

在这次是我自己的服务器外地址的:

自己服务器的ip地址: 116.196.91.100

我们的访问网址: http://116.196.91.100:4000/ 对我们直接访问就可以了!

我们在访问这个地址的时候我们首先要保证的是hexo的服务是不是启动的,启动之后我么 访问才能访问到.

我们首先要进入的是hexo的root很目录,这里面是blog
在输入: hexo s

访问成功:

按照简书的学习一边再做总结

新建一个页面(进入到blog根页面)

hexo new "页面的名称"

此时会生成一个”页面名称”.md 的文件,地址在:/root/blog/source/_posts

展示如图:

以后生成的所有的页面都会在这个文件中有对应的md文件.

之后的操作就是使用 hexo generate 生成静态的文件,这个命令的含义是将md文件转化为html文件.

hexo generate 

之后在blog/public的目录下面会有对应的html.

2018里面就是刚才的新建的页面你的html.

展示的结果

总结: 以后新建页面的时候 使用 的命令分别是

hexo new "post的提交的页面的名称"

之后修改里面的内容.

只有生成静态的文件:
hexo generate

之后启动页面 :

hexo s (hexo  server)

绑定独立的域名

安装next主题

第一步 git pill next主题
我们首先进入的是我们的hexo的根目录:(这里是进入 blog)

git clone https://github.com/iissnan/hexo-theme-next themes/next

回车,等待完成:

第二步 配置主题

修改为next主题

清楚缓冲,并且开启debug服务

hexo clean 

开启debug的服务

hexo s --debug

ok,不在展示了!

修改主题的scheme

注意修改的主题配置文件

是在根目录下面的 theme文件夹下面 我们打开next目录,之后的我们修改配置文件 下面的scheme

修改主题的文字支持

注意修改的是站点配置文件

修改的是language: zh-hans (注意配置文件都需要空一格之后再书写)

出错了,明天解决

问题的展示:

对于这个问题,我只是修改了站点的配置文件为 语言的设置,还有就是设置的是主题的配置文件,最后重新运行之后出现的错误,

查询之后出现的问题是,在配置文件的时候需要 空一格在书写相应的配置信息.

重新修改配置信息.空格之后开始相应的配置. 重新运行就可以了!

设置主题

修改的文件是主题配置文件

其他的问题

修改hexo的默认端口,第一个就是在站点配置文件中添加下面的代码:

  server:
  port: 4001 (自己任意填写)
  compress: true
  header: true

第二个就是直接使用命令行来修改:

进入根目录: hexo server -p(自己喜欢的端口)

之后重新运行,就ok,访问的地址变成: http://116.196.91.100:40001/

后台运行

hexo s &

http://www.tuijiankan.com/2015/05/08/hexo-forever-run/

关于hexo的菜单的设置

菜单的显示如下三部分:

第一部分是设置菜单的内容

在主题配置文件中:
menu:
home:
about:/about/ ||user (user表示的就是展示的图标)
这里设置的不会显示在页面,而是根据这里的字段去我们在站点配置文件中设置的语音找对应字段去解析出来的文字才是战士的额文字.
第二部分解析文字
比如我们在我们的站点配置文件中设置的语言是 zh-Hans,之后会在theme这个文件下面的next主题下寻找 zh-Hans.yml去解析 home对应的文字解析,

第三部分解析图标
menu-icon 表示的就是对于解析的图标.其中 enable 表示的是对图标展示的控制 true 表示的就是显示图标 false表示就是不显示图标

* 关于主题的推荐*

https://www.zhihu.com/question/24422335

next主题的使用文档:

http://theme-next.iissnan.com/

傻瓜式安装搭建博客

https://portablehexo.bitmoe.cn/

关于头像的设置

修改的主题配置文件 avatar

创建page

首先是 进入根目录

hexo new page about 

之后就会生成相对应的page页面,这个页面不是文章页面不会显示在页面列表中.

此时会在 resource目录下生成about 文件,并且生成index.md文件

部署就行了.

记录一下子自己的配置的

图片有几点需要在此记录一下子.

首先是图片这个菜单项的添加和初见这个页面文字的居中展示和分类标签的设置.

一个就是菜单的图片的显示

说明一下子,我使用的主题是 next 主题.

其他的站点配置不需要更改,我们需要的是修改主题页面 下的_config.yml配置文件.

在menu 下面 添加photo: /categories/图片

然后在主题的lauguage目录下找到你在站点配置文件下面设置的站点的语言信息,比如我在我的站点的语言配置的是zh-Hans ,在next主题下面的languange文件夹下面寻找到 zh-Hans.yml 在里面添加解析字段:

主题文档的文字解析:

你们看到我在menu下面添加的 photo: 图片

注意的是在设置配置的时候 需要的而是空一格在填写.

我们在看一个图片:

这个是我们新建文章的时候 layout的类型,默认是post类型:

page.md是页面,会在sources下面创建对应的文件夹,生成index.md文件.

draf.md 是我们文章的草稿就是这个类型.

新建photo.md类型,里面的格式如下:

新建一个文章 hexo new layout phot “初见”

关键点就是在这个文章md中添加: categories: 图片

试试直接新建一个页面 不适用photo 只是添加分类为图片,我们看看
最后测试,只要设置了 categories: 图片 都会分类到图片这个菜单下.

配置文字居中显示
学习连接:

https://hexo.io/zh-cn/docs/tag-plugins.html

文字居中两种使用:

1. HTML方式: 给img添加属性 class=”blockquote-center”
2. 标签的方式使用 : 使用的标签是 centerquote或者是 cq

使用样例:

<!-- 标签 方式，要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}

<!-- 标签别名 -->
{% cq %} blah blah blah {% endcq %}

突破容器宽度限制的图片

作用: 图片自动扩大26%,并突破文章容器的宽度.
使用的方式两种:

1. HTML 使用 添加 class=”full-image”

2. 标签的使用方式:

   
   
   

   
   {% fullimage /image-url, alt, title %}

   
   {% fi /image-url, alt, title %}

我习惯是在md文件中直接引用图片的文件,这样设置我们成功.

开启评论功能

文章的md的开头:

开启评论的设置

comments 设置为true 就可以了!

设置阅读更多的操作:

方式有三种:

1. 第一种是使用 之歌标志之前的会作为简介来展现,出现点击阅读全文的字样.
2. 在文章的 front-matter(hexo中–之间的的文字描述—) 中添加description,,,,,,具体的格式是如下: description: 这是我要展示的简介文字

3. 第三个就是 配置主题文件的配置文件

   auto_excerpt”
   enable: true
   length: 150(表示截取的长度是150字符,也是默认的)

最后关于tags和categories

首先是tags 是会展示在文章的最后的 开头是#区别

categories是分类,展示在文档的首页.