Hexo入门

文章目录

1. 安装
2. 使用
   1. 首页显示文章摘要和图片
   2. markdown 语法
      1. hexo 标签语法
3. 主题
   1. hexo-theme-yilia
   2. hexo-theme-next
   3. hexo-theme-snippet
   4. hexo-theme-hiero
   5. hexo-theme-jsimple
   6. hexo-theme-BlueLake
   7. landscape-plus
   8. hexo-theme-indigo
4. 配置
   1. 标题和 header 文字字体
   2. footer 文字
   3. i18 文字
   4. 添加 icon
   5. 添加 RSS
   6. 添加访问统计
   7. 增加文章目录，参考
   8. 添加返回顶部
5. 问题
   1. 引用显示居中问题
6. 文档

如何搭建 Hexo，以及简单的使用；包括主题的安装和一些定制；最后是相关问题的解决

安装

1. 安装脚手架
   npm install -g hexo-cli

2. 初始化项目（网络原因，很大可能性会到安装 theme landscape 时 失败）
   hexo init blog

   手动安装 theme landscape 方法：
   git clone --depth 1 https://github.com/hexojs/hexo-theme-landscape themes/landscape

3. 安装（如果不执行这一步，hexo 就没有 server 命令，generate 时会什么页面也不生成）
   cd blog;npm install

使用

1. 创建新 blog
   hexo new first-blog
2. 生成静态页面
   hexo generate
3. 本地运行
   hexo server

首页显示文章摘要和图片

添加图片：在内容上面添加如下代码

<br/>
<img src="/imgs/hexo.png" width = "900" height = "600" alt="hexo 简单描述" align=center />

添加摘要：简短说明文章的大概内容（这里不支持任何 markdown 语法）
添加显示摘要：<!-- more -->

markdown 语法

hexo中的markdown语法

*** 是分割线
删除线
使用~~需要删除的文字~~来表示，这个要被删除

---

测试删除

计划表的效果
给-/+ 和文字中间加入 [ ] 
+ 计划A
  + [ ] A计划第一步
    +  [x]首先XXX
- [ ] 计划B
  - [ ] B计划第一步
    -  [x]首先XXX

• 计划A
  • A计划第一步
    • [x]首先XXX

• 计划B
  • B计划第一步
    • [x]首先XXX

插入图片
![Alt text](图片链接 "optional title")
“optional title”：鼠标悬置于图片上会出现的标题文字，可以不写
原生的语法使用效果不好，推荐使用后面hexo以及next的插入图片对应标签语法

表格
使用|来分隔不同的单元格，使用-来分隔表头与其他行
写法

| 名字 | 性别 | 年龄 |
| ---- | ---- | --- |
| 张三 | 男 |  18 |
| 赵淑芬 | 女 | 20 |

名字	性别	年龄
张三	男	18
赵淑芬	女	20

:— 代表左对齐
:–: 代表居中对齐
—: 代表右对齐
默认是左对齐,实际测试结果貌似怎么写都是左对齐
| 名字 | 性别 | 年龄 |
| ----: | :----: | :--- |
| 张三 | 男 |  18 |
| 赵淑芬 | 女 | 20 |

名字	性别	年龄
张三	男	18
赵淑芬	女	20

hexo 标签语法

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

content 测试标签语法

[ice[source]] [http://localhost:4000] [测试]

content

[author[source]] [link] [source_link_title]

普通引用

普通引用

• 引用块引用

  content 引用块引用

• 对书上语言的引用

  talk is cheap , show me the code

  ice名人名言

• 对网络上的引用

  有时候，“爱国”，是一个空洞的词语。更多的人是在言语里，在诗歌里”爱国“，他们没有一点点实际行动，甚至充满抱怨

  @余秀华 blog.sina.com.cn/yuxiuhua1976

主题

hexo-theme-yilia

git clone --depth 1 https://github.com/litten/hexo-theme-yilia.git themes/yilia
页面显示有问题时需要安装：npm i hexo-generator-json-content --save

hexo-theme-next

git clone --depth 1 https://github.com/iissnan/hexo-theme-next themes/next
Hexo和NexT写作基本操作：NexT技巧
Hexo版本升级和Next主题升级之坑
Hexo-NexT配置超炫网页效果

hexo-theme-snippet

git clone --depth 1 https://github.com/shenliyang/hexo-theme-snippet.git themes/hexo-theme-snippet

hexo-theme-hiero

git clone --depth 1 https://github.com/iTimeTraveler/hexo-theme-hiero.git themes/hiero

hexo-theme-jsimple

git clone --depth 1 https://github.com/tangkunyin/hexo-theme-jsimple themes/jsimple

hexo-theme-BlueLake

git clone --depth 1 https://github.com/chaooo/hexo-theme-BlueLake.git themes/BlueLake

landscape-plus

git clone --depth 1 https://github.com/xiangming/landscape-plus.git themes/landscape-plus

hexo-theme-indigo

git clone --depth 1 https://github.com/yscoder/hexo-theme-indigo.git themes/landscape-plus

配置

标题和 header 文字字体

修改：themes\landscape\source\css\_variables.styl

logo-size = 60px

修改：themes\landscape\source\css\_partial\header.styl

$nav-link
增加：font-size: 25px
修改：opacity: 0.6 到 opacity: 0.9

footer 文字

修改：themes\landscape\layout\_partial\footer.ejs

i18 文字

修改：themes\landscape\languages\zh-CN.yml

添加 icon

将自己的 favicon.ico 放到 themes/landscape/source 目录下即可

添加 RSS

安装 hexo-generator-feed 插件
npm install hexo-generator-feed
修改 _config.yml，增加如下内容：

feed:
    type: atom
    path: atom.xml
    limit: 20

添加访问统计

使用不蒜子的服务

• 修改：themes\landscape\layout\_partial\after-footer.ejs

  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  partial 下，添加 busuanzi_count.ejs
  <span id="busuanzi_container_page_pv">
    本文总阅读量<span id="busuanzi_value_page_pv"></span>次
  </span>
  <% } %>

• 修改：themes\landscape\layout\_partial\article.ejs

  <%- partial('post/tag') %>在此之后添加：
  <%- partial('busuanzi_count') %>

• 修改：themes\landscape\layout\_partial\footer.ejs

  <!-- busuanzi_count -->
  本站总访问量<span id="busuanzi_value_site_pv"></span>次
  本站访客数<span id="busuanzi_value_site_uv"></span>人次<br>
  <!-- busuanzi_count -->

  增加文章目录，参考

• 新增：themes\landscape\layout\_partial\toc.ejs

  <% if (post.toc != false) { %>
  <div id="toc">
    <%- toc(post.content, {list_number: false}) %>
  </div>
  <% } %>

• 添加到页面：themes\landscape\layout\_partial\article.ejs

  <div class="article-entry" itemprop="articleBody">
    <% if (post.excerpt && index){ %>
      <%- post.excerpt %>
      <% if (theme.excerpt_link){ %>
        <p class="article-more-link">
          <a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
        </p>
      <% } %>
    <% } else { %>
      <%- partial('toc') %>
      <%- post.content %>
    <% } %>
  </div>

• 修改目录样式：themes\landscape\source\css\_partial\article.styl

  ...
  #toc
    float right
    background-color #eee
    font-size 0.8em
    color color-link
    margin 5px
    .toc
      list-style none

  添加返回顶部

• 新增 ejs 文件：themes\landscape\layout\_partial\top.ejs

  <div id="top">
      <a href="#">▲</a>
      <a href="#footer">▼</a>
  </div>

• 修改页面：themes\landscape\layout/_partial/footer.ejs
<%- partial('top') %>
• 添加样式：themes\landscape\source\css\_partial\footer.styl，在最后添加如下代码

  #top
    width 30px
    height 50px
    background rgba(85, 85, 85, 0.3) none repeat scroll 0% 0%
    position fixed
    bottom 1%
    right 3%
    text-align center
    cursor pointer
    a
      display block
      font-size 18px
      line-height 25px
      color #FFF
      text-decoration none
     a:hover
       background-color #258FB8

问题

引用显示居中问题

修改样式：themes\landscape\source\css\_partial\article.styl

blockquote
    font-family: font-serif
    font-size: 1em
    padding: 0 15px
    text-align: left
    color: #777
    border-left: 4px solid #ddd;
    footer
      font-size: font-size
      margin: line-height 0
      font-family: font-sans
      cite
        &:before
          content: "—"
          padding: 0 0.5em

文档

• Hexo博客优化——库、字体、收录、统计
• Hexo添加Toc支持，生成文章目录
• hexo优化及主题Landscape-F
• 【持续更新】Hexo个人博客搭建+主题优化+插件配置
• Hexo 博客配置 landscape 主题
• hexo 搭建博客
• 用markdown写博客：hexo + gitcafe
• hexo代码高亮
• 回到顶部按钮
• 可以在博客某个位置固定显示一个目录吗？
• Hexo主题添加目录
• Hexo之next主题设置首页不显示全文(只显示预览)
• hexo小技巧-首页显示文章摘要及图片