LITREILY

建站日志

2016-12-12杂物柜

使用 hexo 建站后，改用了新的主题，但存在许多问题，后续将不断修复更新，本文将记录主要的更新内容。

Before

在使用 primer 主题之前，我使用 jekyll 建站，配合 coding-pages 服务部署网站，站点所有样式均为自定义。

Infomation

Display

jekyll-homepage

jekyll-blogpage

jekyll-category

jekyll-about

2016-12-11

经好友 smslit 推荐，使用 hexo 主题建站，纠结许久后决定使用 primer 主题，并根据个人需求进行定制和优化。好了，下面对建站过程进行简要介绍。

Install

  • 安装 hexo

在确保安装好 node.js 以及 git 的情况下执行以下指令

npm install hexo-cli -g
hexo init hexoBlog
cd hexoBlog
npm install

hexo系统默认下载主题 landscape ，折腾了一小会觉得除了代码高亮不错外，其它样式略显一般，所以直接放弃，改用 primer。

  • 下载 primer

在 hexoBlog\themes 目录下克隆主题

git clone https://github.com/yumemor/hexo-theme-primer.git
  • 新建 github 远程仓库

为了使用 github pages ,需要将仓库名称设为 [username].github.io ，后续配置 _config.yml 时，需要将 deploy 的属性 repo 设为该仓库目录。

  • 安装插件

为了使用 hexo 的发布功能、站内搜索等功能，需要安装以下插件

npm install hexo-server --save
npm install hexo-renderer-less --save
npm install hexo-generator-feed --save
npm install hexo-generator-search --save

Config

  • 修改 根目录 下的 _config.yml
# Site
title: LITREILY
subtitle: simple life
description: Stay Hungry, Stay Foolish
author: litreily
language: default
email: 707922098@qq.com

# URL
url: www.litreily.top/

# Writing
## transplant from jekyll system which post-name write  with date
## so it's needed to change the name of new posts
new_post_name: :year-:month-:day-:title.markdown

# Pagination
## Set per_page to 0 to disable pagination
per_page: 8
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: primer

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:Litreily/Litreily.github.io.git
  branch: master

# Search
search:
  path: search.xml
  field: post
  • 修改 主题目录 下的 _config.yml
menus:
    -
        name: 首页
        link: /
    -
        name: 分类
        link: categories/
    -
        name: 开源项目
        link: open-source/
    -
        name: 留言板
        link: message/

# Profile
profile:
    location: QingDao, China
    github: litreily
    organization: upc

# Github
github:
  username: litreily
  popular_repos: [hexoBlogProject,jekyllBlog,Student]

# Comments
youyan_username: litreily
duoshuo_username: litreily # 多说配置
#disqus_username: litreily # disqus 配置

# Search
## google | local
search:
    use: local

Deploy

  • 将 jekyll 系统中的博客复制到文件夹 /source/_posts 中

  • 发布博客

hexo clean
hexo generate
hexo deploy
  • 本地服务器
hexo serve

Fix

  • 解决代码高亮不正常问题

由于 primer主题自带高亮样式，所以需要将原有样式禁用，修改 根目录 下的 _config.yml 文件

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:
  • 解决首页显示全部博文问题

首次使用 primer 主题，成功发布后发现主页博客列表显示了整个博文内容，而非摘要，后来查找主题文件发现原主人使用了 excerpt 变量，而我原先使用的均是 description ，所以将主题文件 primer\layout\_partial\article.ejs 中的 excerpt 替换为 description 后便可以了。

  • 解决留言板样式不正常问题

首先需要说明的是， primer 主题自带 首页、分类 、 开源项目 和 留言板 4个页面，当然在使用时，需要通过

hexo new page categories
hexo new page open-source
hexo new page message

创建好除首页外的其它三个页面后，因为主题中都有 layout 文件 categories.ejs 与 open.ejs与之对应，所以category 和 open-source 都能够正常显示。

而 message 页面并没有，它默认使用 layout:page ，导致页面中保留了目录栏和分享栏，而这并不是我想要的，所以我在 primer\layout\_partial\ 中添加 message.ejs 文件，在 article-post.ejs 文件基础上删除了多余项。

最后在 primer\layout\ 中添加 message.ejs（与_partial文件夹中的不同）文件，写入以下内容即可。

<body>
    <%- partial('_partial/header') %>
    <%- partial('_partial/banner-post',{post: page,index: true}) %>
    <%- partial('_partial/message',{post: page,index: false}) %>
  • categories 与 tags

在 jekyll 中，分类与标签基本是一个概念，但在 hexo 却截然不同， categories 有级别之分（按先后顺序分级），而 tags 并没有。所以需要将原有博客重新归类并设置标签。

2016-12-12

  • 将评论系统改为 多说
  • 将原有博文的 h4 标题统一改为 h3
  • 添加博文 "建站日志" ，用以记录网站建设过程
  • 将博客部署到域名 www.litreily.top
  • 修改 primer\layout\_partial\footer.ejs ，配置 RSS 路径，将 atom.xml 改为 search.xml。

2016-12-14

  • 用PS手绘字母 L ，修改网站logo
  • 修复了博文中所有引用 > 显示异常的问题
  • 修复了博文中图片错位的问题
  • 修改了 footer 中的主题链接，已修改为 https://github.com/Litreily/hexo-theme-primer

2016-12-15

  • 对部分博文重新分类，减少 categories 数量
  • 将分类页面的标签栏 Blog Tags 换为分类栏 Blog Categories，并给所有类型添加链接
  • 去除留言板页面中标题下方的时间显示
  • 在 css/_partial/article.styl 中添加了 pre.descriptions 样式
pre.descriptions
    font-size: 14px !important;
    border-left: 3px solid #4996D1;
    border-radius: 0 !important;
    background-color: rgba(255,255,255,0) !important;
    margin-left: 2em;

示例

<pre class="descriptions">
1. step1
2. step2
3. step3
</pre>
  • 针对特定博文添加了两个标签样式 tagBlack & tagGrey
.tagBlack a, .tagGrey a{
    text-decoration: none !important;
    transition: background-color .2s ease;
    padding: .4em .6em;
    margin: 0 3px 3px 0;
    line-height: 1;
    white-space: nowrap;
    font-size: 12px;
    border: 1px solid transparent;
    display: inline-block;
    border-radius: 4px;
}

.tagBlack a{
    color: #FFF;
    background-color: #2f3337;
    &:hover{
        color: #FFF;
        background-color: #0C0D0E;
    }
}

.tagGrey a{
    color: #535a60;
    background-color: #eff0f1;
    border-color: #d6d9dc;
    &:hover{
        color: #535a60;
        background-color: #D6D9DC;
    }
}

示例

<div class="tagBlack"><a href="http://www.mymmqm.com/">莫明棋妙</a></div>
<div class="tagGrey"><a href="http://www.xiami.com/artist/68934">河图</a></div>
  • 在菜单栏加入 标签 项，并在标签页内中加入 标签云
tags.ejs: 标签云界面
tag.ejs:  单个标签页，显示某标签内的博客列表，并在侧边显示带有链接的标签栏

  • 修改 search.js 与 search-local-js.ejs ，在搜索后的路径中添加 http:// , p修复搜索框链接出错问题

  • 在 themes\primer\source 中添加文件 CNAME，添加域名

www.litreily.top

2016-12-23

  • 修复RSS，将主题中的 footer.ejs ，将 search 改为 atom
<a href="/atom.xml">

当然，让博客成功生成 atom.xml 的前提是安装好 feed 生成插件

npm install hexo-generate-feed --save
  • 参考不蒜子，添加站点流量统计服务

在 head 中导入所需的 js 文件：

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

并在 banner.ejs 添加两个标签：

<span class="meta-info">
    <span class="octicon octicon-pulse"></span>
    <span id="busuanzi_value_site_pv" class="views"></span>
</span>
<span class="meta-info">
    <span class="octicon octicon-flame"></span>
    <span id="busuanzi_value_site_uv" class="views"></span>
</span>
  • 添加百度统计服务

在百度统计中添加好站点，根据提示获取统计代码

<script>
    var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?d34587ee0aac7488b7dd789f9f17f366";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
    })();
</script>

在 head.ejs 中的 </head> 前添加以上代码，往后便可在百度统计中查看站点的详细信息啦。

2016-12-24

  • 修复RSS无法被正常获取资源的问题

今天用 FeedDemon 获取本站点的 RSS 资源，发现能够得到列表，但点击链接后发现多了一个站点根目录的前缀，后来发现是自己的根目录设置有问题。于是我修改了站点配置文件_config.yml，加上前缀http://就ok了。

url: http://www.litreily.top/
root: /

但是修改以后发现搜索功能又出问题了，这才意识到原来修改 search.js 与 search-local-js.ejs 才是多此一举，原来的问题同样出在这个url，所以只能又将这两个文件的 http:// 去掉了。

2017-04-29

  • 更换新主题 maupassant，大道至简
  • 解决代码高亮不正常问题
  • 替换搜索引擎至本地搜索

2017-04-30

  • 更新主题样式，修复部分文章显示异常的问题
  • 更新标签云样式

2017-05-01

  • 在About页面添加联系方式和一句简短的介绍
  • 在菜单中添加了gitbook笔记的接口

参考资料

域名

hexo

其它

本文作者：litreily
本文链接：https://www.litreily.top/2016/12/12/blog-log/
版权声明：本博客所有文章除特殊声明外，均采用 CC BY-NC 4.0 许可协议。转载请注明出处 litreily的博客！
jekyllhexolog