Hexo折腾记

2019年8月31日 199次阅读 来源: damonare

假如时刻能够静止，我愿望就停在如今。

媒介

博主之前也有折腾wordpress和jekyll可关于一个前端er来讲，wordpress让人没法纵情，因为不晓得该怎样增加本身的代码。而jekyll就太麻烦了每一次都须要从新提交，而且款式也不是很雄厚，几乎就和鸡肋平常。食之无味，弃之可惜。

之前有听说过Hexo这个博客框架，但一向没时刻给本身搭一个，着实日常平凡也有注重到许多大牛的博客是很绮丽的，却不晓得那就是Hexo。说干就干，用时一整天，踩坑无数，终究变成了博主想要的模样。放个链接Damonare的个人博客假如你也想要一个和博主一样的博客，那就继承看下去吧。

  • 博主体系Window7,搭建博客主题Yilia。下面纪录博主搭建的悉数历程。

git和github

  • 想搭建一个博客的应当大多数都是程序员吧，那末github账号应当是肯定有的了。你如果着实清爽脱俗到连个github账号也没有，不必忧郁，给你个外链Github,账号设置然后增加SSH,如许你以后输入hexo敕令的时刻就不必一次次输入暗码了，关于怎样注册github和增加SSH，这里须要提示一点，github账号最好都是小写字母，不然轻易剖析毛病，另有邮箱，只管别用国内的邮箱，很轻易出题目了，比方你git提交的孝敬不被纪录。

  • Git身为程序员给他应当是会用的吧。好吧假定你不会运用git和github给你个外链看这里

Hexo

  • 好的，如今你有了github和git了，也设置好了，那末就须要在github新建一个堆栈了,

《Hexo折腾记》

注重：这里的堆栈称号要和你的username对应

  • Node装置

Node能够去官网下载，或是在国内下载，因为尽人皆知的缘由，这里放一个nodejs.cn的链接
Node内置npm包，我们以后就能够翻开node敕令行运用npm举行装置一些依靠，假如以为太慢，能够运用淘宝镜像cnpm

  • Hexo装置

好的，如今我们Node,git,github都弄好了，如今能够当地化一个hexo了,新建hexo文件夹，恣意盘下都能够，然后敕令行实行敕令：

npm install hexo -g  #-g示意全局装置, npm默以为当前项目装置

假如碰到毛病：

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

改用下面的敕令装置：

npm install hexo --no-optional

好的，如今hexo也停当了,hexo敕令：

cd ~/git
hexo init hexo  #实行init敕令初始化到你指定的hexo目次
cd hexo
npm install    #install before start blogging
hexo generate       #自动依据当前目次下文件,天生静态网页
hexo server         #运转当地效劳

浏览器输入http://localhost:4000就能够看到结果。
浏览目次

├── .deploy       #须要布置的文件
├── node_modules  #Hexo插件
├── public        #天生的静态网页文件
├── scaffolds     #模板
├── source        #博客正文和其他源文件, 404 favicon CNAME 等都应当放在这里
|   ├── _drafts   #草稿
|   └── _posts    #文章
├── themes        #主题
├── _config.yml   #全局设置文件
└── package.json

增加博文

hexo new "postName"  #新建博文,个中postName是博文题目

假如不想博文在首页悉数显现, 并能涌现浏览全文按钮结果, 须要在你想在首页显现的部份下增加

<!--more-->

这点和wordpress是一样的

Hexo Yilia主题设置

cd ~/git/hexo
git clone git@github.com:litten/hexo-theme-yilia.git themes/yilia

在./_config.yml，修正主题为yilia

theme: yilia

Hexo 主题

检察当地结果

hexo g
hexo s

完全设置信息以下：

# Site #站点信息
title: blog Name #题目
subtitle: Subtitle #副题目
description: my blog desc #形貌
author: me #作者
language: zh-CN #言语
timezone: Asia/Shanghai #时区

# URL
url: http://yoururl.com   #用于绑定域名, 其他的不须要设置
root: /
#permalink: :year/:month/:day/:title/
permalink: posts/title.html
permalink_defaults:

# Directory #目次
source_dir: source #源文件
public_dir: public #天生的网页文件
tag_dir: tags #标签
archive_dir: archives #归档
category_dir: categories #分类
code_dir: downloads/code
i18n_dir: :lang #国际化
skip_render:

# Writing #写作
new_post_name: :title.md #新文章题目
default_layout: post #默许模板(post page photo draft)
titlecase: false #题目转换成大写
external_link: true #新标签页里翻开衔接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #语法高亮
  enable: true
  line_number: true #显现行号
  auto_detect: true
  tab_replace:

# Category & Tag #分类和标签
default_category: uncategorized #默许分类
category_map:
tag_map:

# Date / Time format #日期时刻花样
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination #分页
per_page: 10 #每页文章数, 设置成 0 禁用分页
pagination_dir: page

# Extensions #插件和主题
## 插件: http://hexo.io/plugins/
## 主题: http://hexo.io/themes/
theme: next

# Deployment #布置, 同时宣布在 GitHub 和 GitCafe 上面
deploy:
- type: git
  repo: git@gitcafe.com:username/username.git,gitcafe-pages
- type: git
  repo: git@github.com:username/username.github.io.git,master

# Disqus #Disqus批评体系
disqus_shortname: 

plugins: #插件，比方天生 RSS 和站点舆图的
- hexo-generator-feed
- hexo-generator-sitemap

别的设置，可参考：这篇博文

Hexo Yilia Bug修正

修正参考这里基础一切的题目都能在这里处理了,所以啊，一个项目的issue真的很具有参考价值，少走不少弯路，经由过程这里的代码博主增加了 Hexo文章统计 功用，没有动画，头像设置有null的题目以及点击小房子没反应的bug。

Hexo增加文章目次

我们首先要编辑文章显现页面的模板，也就是

themes/landscape/layout/_partial/article.ejs

文件。为了将目次天生在正文之前，我们首先在这个文件中找到

<%- post.content %>

并在这一行之前到场以下代码：

<!-- Table of Contents -->
<% if (!index && post.toc){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目次</strong>
<%- toc(post.content) %>
</div>
<% } %>

这段代码的寄义清楚清楚明了，if语句中有两个前提，!index是为了不在首页的文章择要中天生目次，post.toc确保了只在显式地标记了toc: true的文章中天生目次。若这两个前提满足，则建立一个目次的div。

修正完这个文件以后，找一篇包含了多个子题目的文章，并在文章开首的front-matter中增加一句toc: true，在浏览器中接见这篇文章，应当能够看到文章的开首处已经有了带链接的目次。然则如许的目次着实太丢脸，我们还须要增加响应的CSS来将其指定为我们想要的款式。

要指定目次的款式，我们要修正的文件是

themes/landscape/source/css/_partial/article.styl

在文件的末了，增加以下代码：

/*toc*/
.toc-article
    background #eee
    border 1px solid #bbb
    border-radius 10px
    margin 1.5em 0 0.3em 1.5em
    padding 1.2em 1em 0 1em
    max-width 28%

.toc-title
    font-size 120%

#toc
    line-height 1em
    font-size 0.9em
    float right
.toc
    padding 0
    margin 1em
    line-height 1.8em
    li
    list-style-type none

.toc-child 
    margin-left 1em

因为Hexo运用的是stylus预处理器，所以CSS代码要注重缩进，不然就报错了，这类目次如果不满意完全能够根据本身志愿写一个。

Hexo 多说批评框

链接：多说社会化批评框中心剧本embed.js当地化要领
链接：多说社会化批评框增加 站长复兴 标记
链接： 多说复兴后显现浏览器及操作体系信息（Useragent）

跋文

有任何题目请在批评中复兴，博主会在批评中解答。

    原文作者：damonare
    原文地址: https://segmentfault.com/a/1190000006831597
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞