hexo进阶使用

来源:互联网 发布:淘宝上色盲眼镜有用吗 编辑:程序博客网 时间:2024/05/17 07:02

在上一篇文章中,记录了我通过hexo+github来搭建博客的过程,本文提供导航功能,介绍一些hexo的进阶用法,让博客显得更有范儿!不过我还是建议大家多关注博客内容,而不是沉迷于折腾中无法自拔 : )

如何应对错误?

在使用命令行搭建博客的过程中,不可避免的会出现错误,如果你是新手,不要慌,这种情况对于有经验的程序员来说,已经是家常便饭了: ) ,不过我可以教大家两个常用的应对错误的方法,错误代码同常在一大堆不知所云的英文字母开头几行,如ERROR balabala,can`t find/load balabala,在其后会跟着出错的文件位置,可以做以下两点:
- 去出错的文件,具体到行,列,如果你看得懂代码,你大概会知道错在哪
- 复制错误信息至搜索引擎寻求网友帮助

另外,在站点配置文件_config.yml中,如果你启用了插件plugins:,hexo server(简写为hexo s)命令会无法识别,我也不知道为什么,这是个bug,把相关代码用#注释掉就行了,不会影响到插件的使用。

配置你喜欢的hexo主题

hexo官网已经提供了一部分的主题,从中选择你喜欢的一个,为你的博客换件新衣服,不过还有许多主题并没有收录到官网里,这要靠你自己去发现了。每个主题都会有安装使用的介绍,有些是官方文档,有些在相应的github主页上,他们的使用大多是一样的:
- clone到本地hexo-site/theme
- 修改站点配置文件_config.yml里的theme字段为刚下载的主题文件夹名
- 修改一系列个人信息、集成插件、主题布局字段

具体以NexT主题官方说明文档为例,不懂的地方可以问我meetdevin.zh@outlook.com.

绑定独立域名

首先,我要给大家简单介绍下,这里面的思路。域名与IP有什么区别?

IP是每台主机的唯一标识,是一串数字,就相当于身份证,当我们的浏览器访问一个网站的时候,首先要找到IP,而域名是为了方便人们记忆而产生的符合人们语言习惯的标识DNS,而DNS就是他们两者的映射表,你可以理解为翻译官。现在你的域名是your_site.github.io,当你在浏览器键入这个地址,你想要浏览器显示github上你的网站资源, 你的电脑会先检查本地的DNS缓存,是否有这个地址的对应IP,如果没有,则会请求当前子网的DNS服务器,DNS服务器返回相应的IP地址,而如果这个DNS服务器也没有,它会把请求发给上一级子网的DNS服务器,层层递进,这就叫域名解析。现在我们的目的就明确了:把你的独立域名解析到github。具体来说:
- 购买独立域名
- 设置DNS解析
- 让github认可我们的域名

购买独立域名

域名提供商有很多,有DNSPod , Gandi,阿里云等,都支持支付宝付款。我推荐DNSPod,因为他提供免费的DNS解析服务。

设置DNS解析

无论在哪里购买,都要设置DNS服务器,如果你使用DNSPod的域名解析服务,在控制台里把DNS服务器地址改为:f1g1ns1.dnspod.netf1g1ns2.dnspod.net,参考DNSPod 各个套餐的 DNS 地址。

让github认可我们独立域名

在hexo-site/sourse下新建文本文档,重命名为CNAME,注意没有后缀,在里面写上你的域名,如:your_site.com,保存,然后编译上传:

hexo g -d

优化你的博客加载速度

如果你使用了一个比较牛掰的主题,图片资源较多,或者大量使用了HTML5,这就比较吃性能了,你会发现在浏览器进你的博客比进小伙伴们的都要慢,那怎么办呢?不怕,我给大家挑出了几个靠谱的方案:
- 性能优化篇-joway
- Hexo博客优化-Jory He

这两篇博文都放了一些干货,如果你喜欢折腾,就去试试他们的方法,但你如果是像我这样比较懒的,那我也给你推荐一个立竿见影的方法:

站点配置文件hexo-site/_config.yml主题配置文件hexo-site/theme/theme_name/_config.yml中,需要用到的图片,还有你在博文里插入的图片,都放到七牛云-对象存储里。

其实,这个七牛云-对象存储,大家可以理解为:网盘(但其实不是的,七牛云是CDN,是一种缓存机制,CDN=多台服务器+智能DNS),因为github服务器在国外(之前还被墙过),而七牛云本身就是做云服务的,你从七牛云里拿图片,肯定是比从github拿图片要快的,还能为你节省github page存储,一举两得!

推广

既然搭了博客,那肯定要很多人看才有意思,第一步当然是要让搜索引擎发现我们,至于google在大陆的…科学上网跨过去就好了,让google收录是很简单的,百度反而有点矫情。

收录

在百度-站长工具,google提交入口先手动提交我们的网站,在提交之后,会验证网站所有权,这样才能收录我们的网站,他们都有这么几种验证方式:
- 文件验证
- HTML标签验证
- CNAME验证

我个人觉得HTML标签验证最简单,点击HTML标签验证,然后点击显示完整代码,将代码复制到你的最新一篇博文的开头,然后

$ hexo g -d 

直接发布博文就好了。但是对于google,我试了好几次都没成功,最后用的文件验证:

下载该HTML文件,放到你的hexo-site/public目录,然后:

hexo g -d

这时,可以在浏览器通过http://your_site.com/name.html访问该文件,这时再在google上点击验证。

提交sitemap

sitemap是你的站点地图,它列出你网站上的网页,将网站内容的组织架构告知搜索引擎。

安装插件:

npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save 

站点配置文件hexo-site/_config.yml中添加以下代码:

# 自动生成sitemapsitemap: path: sitemap.xml #注意前面有空格baidusitemap: path: baidusitemap.xml #注意前面有空格

编译上传

hexo g -d

hexo/public目录下可找到sitemap.xmlbaidusitemap.xml文件,我们先验证下:

浏览器访问http://your_site.com/sitemap.xml
http://your_site.com/baidusitemap.xml

如果出现一堆代码,说明生成成功,然后进入百度站长工具
- 点击左侧链接提交
- 下拉,自动提交,选择sitemap
- 填写http://your_site/baidusitemap.xml,提交

同样进入Google站长工具提交sitemap.xml,吐槽一句,google比百度方便多了。

以后每次我们执行hexo g -d命令的时候,这两个站点地图文件就会更新,搜索引擎便能通过上面两个网址抓取我们的内容。

自动推送

这个功能只有百度有,上面步骤完成之后,再点击自动提交->自动推送,复制百度给出的代码,留着,以后每次写博文,就粘贴到博文结尾位置,对博文内容没有任何影响,这段JS代码的作用是:页面被访问时,页面URL将立即被推送给百度。

方便写作

hexo/sourse/scaffolds目录下,放的是我们的文章模板,有三个,默认是post,这个可以在站点配置文件hexo-site/_config.yml中更改,我们可以自定义post的内容以便符合我们的使用习惯。

你可以执行下列命令来创建一篇新文章。

$ hexo new layout title

在命令中指定文章的模板,不写就默认为post,title指文章标题。

基本属性

Front-matter 是文章最上方以 — 分隔的区域,用于指定文章的变量,常用的有:

title: Hello Worlddate: 2013/7/13 20:46:25tags: - 标签1 - 标签2categories:   - 分类1 - 分类2  #hexo不支持多个同级分类,这样分类,会把分类2变成分类1的子类comments: true #开启文章评论---

我们可以把这些都写到模板中,不用每次都写,另外,我们之前复制的百度自动提交JS也可以放的文章模板里,是不是很方便?

标签

「标签」(Tag Plugin) 是 Hexo 提供的一种快速生成特定内容的方式。完整的标签列表可以参考内置标签。 另外,Hexo 也开放来接口给主题,使主题有可能提供给写作者更简便的写作方法。这里介绍一个常用的,插入图片,同时指定图片大小:

<!--指定大小图片-->{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

文章摘录

在首页显示一篇文章的部分内容,并提供一个链接跳转到全文页面是一个常见的需求。某些主题有这样的功能集成,但还是推荐hexo官方的方法,这样除了可以精确控制需要显示的摘录内容以外,这种方式也可以让 Hexo 中的插件更好的识别:

在文章中使用 <!-- more -->手动进行截断

ba la ba la  <!-- more -->ji xu ba la ba la 

使用位置在一行的顶左空一行,不然无效,这是博主试了很多遍试出来的。

更多语法规则:

  • 写作-hexo官网
  • Markdown 语法

附录

折腾的过程中,会对站点配置文件hexo-site\ _config.yml改来改去,这有一份备份,配置参考配置-hexo官网

# Hexo Configuration## Docs: http://zespia.tw/hexo/docs/configure.html## Source: https://github.com/tommy351/hexo/# Sitetitle: my blog #站点名,站点左上角subtitle: Walk steps step by step #副标题,站点左上角description: Walk steps step by step #给搜索引擎看的,对站点的描述,可以自定义author: zippera #博主email: #你的联系邮箱language: zh-CN #中文# URL #这项暂不配置,绑定域名后,欲创建sitemap.xml需要配置该项## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: http://zipperary.comroot: /permalink: :year/:month/:day/:title/tag_dir: tagsarchive_dir: archivescategory_dir: categories# Writing 文章布局、写作格式的定义,不修改new_post_name: :title.md # File name of new postsdefault_layout: postauto_spacing: false # Add spaces between asian characters and western characterstitlecase: false # Transform title into titlecasemax_open_file: 100filename_case: 0highlight:  enable: true  backtick_code_block: true  line_number: true  tab_replace:# Category & Tagdefault_category: uncategorizedcategory_map:tag_map:# Archives 默认值为2,这里都修改为1,相应页面就只会列出标题,而非全文## 2: Enable pagination## 1: Disable pagination## 0: Fully Disablearchive: 1category: 1tag: 1# Server 不修改## Hexo uses Connect as a server## You can customize the logger format as defined in## http://www.senchalabs.org/connect/logger.htmlport: 4000logger: falselogger_format:# Date / Time format 日期格式,不修改## Hexo uses Moment.js to parse and display date## You can customize the date format as defined in## http://momentjs.com/docs/#/displaying/format/date_format: MMM D YYYYtime_format: H:mm:ss# Pagination 每页显示文章数,可以自定义,我将10改成了5## Set per_page to 0 to disable paginationper_page: 5pagination_dir: page# Extensions 这里配置站点所用主题和插件,暂默认,后面会介绍怎么修改## Plugins: https://github.com/tommy351/hexo/wiki/Plugins## Themes: https://github.com/tommy351/hexo/wiki/Themestheme: lightexclude_generator:plugins:- hexo-generator-feed- hexo-generator-sitemap# Deployment 站点部署到github要配置,上一节中已经讲过## Docs: http://zespia.tw/hexo/docs/deploy.htmldeploy:  type: github  repository: https://github.com/zippera/zippera.github.io.git  branch: master
原创粉丝点击