发表更新日志随笔22 分钟读完 (大约3288个字)0次访问

hexo日记本

打算从纸质日记转到电子日记。

之前是一个月的日记放在一个 markdown 文件里面，每天一个一级标题。昨天突发奇想，为啥不用 Hexo 来搭建日记本呢？它本来就是用来写博客（blog 网络日志）的呀。

于是今天就来搭建 hexo 日记本

前言

本文只分享设计思路以及步骤，不提供详细教程，详细教程可以看这个：【持续更新】最全 Hexo 博客搭建+主题优化+插件配置+常用操作+错误分析-遇见西门

优点

利用 hexo 搭建日记本有很多优点：

  • 好看，并且可以随时换主题
  • 比我之前的方式更加地将日记格式化，便于以后编写脚本来管理
  • 可以在scaffolds里面设置日记模板
  • 可以设置分类与标签
  • 有的主题甚至能搜索文章

需求

  • 不联网：这个日记本和我部署到 github 上面的博客有些不一样，因为这个是比较隐私的，我不打算放在网上，仅利用移动硬盘备份。并且看日记都在本地，不使用外链图片，以免断网的时候无法查看

  • 功能少：并且不需要评论，阅读计数等功能，起到的只是一个阅读器的作用。

  • 重美观：需要能够方便地切换主题。

  • 无需侧边目录：因为我打算一篇只记录一天的内容，写不了太多，标题层级不会太多。

  • 写日记要便捷

步骤

参考链接：

初始化 hexo

刚开始的时候我不是很清楚 hexo 在一台电脑上是否可以搭多个博客，后来发现，hexo 的每个博客其实就是一个“项目”，那些命令得在已经搭建博客的文件夹里面才能使用，而不是我之前想的“全局命令”。

首先初始化：

1
2
3
hexo init <folder>
cd <folder>
npm install

然后就可以通过以下命令查看本地内容了：

1
hexo server

或简写为

1
hexo s

全局设置

在博客根目录下的_config.yml内配置

标题相关

1
2
3
4
5
6
7
title: 日记
subtitle:
description:
keywords:
author: 憧憬少
language: zh-CN
timezone:

这个设置会决定你的文件最后渲染之后放在哪里。

利用hexo g来渲染 markdown 文件，它会将渲染好的 html 文件放在public目录下，部署到 github 时，上传的就是这个文件夹里面的内容。

比如最开始的设置：

1
permalink: :year/:month/:day/:title/

则会将最开始的hello-world.md示例文章给生成在public\2019\06\26\hello-world这个文件夹当中。

我觉得一天的内容单独放一个文件夹有点不太合适，而一年的内容全部放在一个文件夹的话，三百多个文件也不好管理，所以按照一个月的内容放在一个文件夹内的规则，将这个设置改成：

1
permalink: :year/:month/:title/

new_post_name

新建文章的文件名，因为日记按照时间管理比较方便，因此在文件名中加入日期

1
new_post_name: :year-:month-:day-:title.md # File name of new posts

图片问题

我之前一直是将图片上传到 github 的一个 repo 上面然后使用链接的，看了文档之后才发现原来还有更简便的方法！

方法一 外链

首先开启仓库的 github page 这个设置。

比如用户名是HaneChiri，创建的仓库名叫blog_images，那么在这个仓库根目录下的图片avatar.jpg的链接就是

1
https://hanechiri.github.io/blog_images/avatar.jpg

而不是

1
https://github.com/HaneChiri/blog_images/avatar.jpg

后者是浏览编辑这个图片的链接，而不是图片本身。

上传之后无法访问这个链接也不要急，等几分钟就可以了。

日记本不能使用这个，因为我需要在不联网的时候也能看。

方法二 资源文件夹

来自资源文件夹-hexo 官方文档

资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的 Hexo 项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

早知道认真看文档了，插图片就简单多了。

这个是将图片放在source/images中，而我将 Typora 设置成将图片自动保存在同目录下的images中，编辑之后只要将这个文件夹内图片给复制到前者所述文件夹，就可以在编辑以及渲染时都看到图片了。

方法三 下载插件

Hexo 文章中插入图片的方法-CSDN

我不需要每个文章的图片分开管理，这样会导致source\_posts\内有太多没用的空文件夹，因此我使用方法二，读者可以选择适合自己的方法。

主题

为了防止和联网的博客弄混（毕竟一旦将日记上传上去，repo 里面就会留下痕迹，哪怕删掉也看得到，除非删 repo），我打算换个别的主题。

找到了几个心仪的：

  • Gal ：galgame。和我第一次用的夏娜 shana主题是同类型的
  • Sakura ：樱。贼好看，功能蛮多的样子
  • One ：单页面。每个文章都可以配图，上面的几个也是

但是考虑到个人的一些因素，还是先用着 Next 吧，反正可以换。

外观

Next 主题有四种外观（scheme），在配置文件（themes\next\_config.yml）中可以找到并修改：

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

侧边栏

社交链接

最右边的||后面跟着的是文字边上显示的图标

1
2
3
4
5
6
7
8
9
10
11
12
13
social:
  GitHub: https://github.com/HaneChiri || github
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
  Bilibili: https://space.bilibili.com/13290087

头像

在对应的位置放上头像图片

1
2
3
4
5
6
7
8
9
10
11
12
# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.gif
  # If true, the avatar would be dispalyed in circle.
  rounded: false
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: false

左右

为了防止和博客混淆而误将日记上传，而将侧边栏调整到相反方向

1
2
3
4
sidebar:
  # Sidebar Position, available values: left | right (only for Pisces | Gemini).
  #position: left
  position: right

回到顶部

这么好用的小功能当然要开着呀！

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

菜单

首先在解开“分类”(categories)和“标签”(tags)的注释

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

但是这个还只是在侧边的菜单栏处显示了“分类”和“标签”两项，还没有功能。

需要在根目录下使用指令来生成这两个页面：

1
2
hexo new page categories
hexo new page tags

这下能显示了，但是仍然不够，因为 Next 还没有识别出这两个页面就是分类和标签页面。

打开source\categories\index.md，里面是：

1
2
3
4
5
---
title: categories
date: 2019-06-26 15:44:09
---

在里面加上一句，变成：

1
2
3
title: categories
date: 2019-06-26 15:44:09
type: "categories"

这样就能识别出这是分类页面了，能够使用了。标签页面同理。

本地搜索

第一步 修改主题设置

找到这个设置：

1
2
3
4
5
6
7
8
9
10
11
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false

将enable改为 true 之后就会在菜单显示一个”搜索“，但是还无法使用。

照着注释里面那个 github 项目内的说明

第二步 下载插件：

1
npm install hexo-generator-searchdb --save

第三步 添加全局设置

在根目录下的_config.yml加上如下设置：

1
2
3
4
5
6
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  content: true

我把帮助中的注释复制过来就是下面这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# see https://github.com/theme-next/hexo-generator-searchdb
search:
  # file path. By default is search.xml . If the file extension is .json, the output format will be JSON. Otherwise XML format file will be exported.
  path: search.xml
  #  the search scope you want to search, you can chose:
  #    post (Default) - will only covers all the posts of your blog.
  #    page - will only covers all the pages of your blog.
  #    all - will covers all the posts and pages of your blog.
  field: post
  # the form of the page contents, works with xml mode, options are:
  #    html (Default) - original html string being minified.
  #    raw - markdown text of each posts or pages.
  #    excerpt - only collect excerpt.
  #    more - act as you think.
  format: html
  #define the maximum number of posts being indexed, always prefer the newest.
  limit: 10000
  # whether contains the whole content of each article. If false, the generated results only cover title and other meta info without mainbody. By default is true.
  content: true

意外地轻松便捷呢。

编写快捷打开的脚本

虽然弄好了，但是每次想写还得打开命令行输入命令，再进入文件夹用 Typora 打开文件，太麻烦了。

于是写一下 bat 批处理脚本。

这东西其实就是把在命令行执行的命令放在一个文本文件然后把后缀名改成.bat 而已。

不过我不是很熟命令，弄了很久。

快速打开本地预览

首先是快速查看我的日记。目标是双击一下脚本文件就可以在浏览器中看到我的日记。

一般情况下的步骤：

  1. 在根目录打开命令行
  2. 输入hexo s
  3. 打开浏览器
  4. 在地址栏输入localhost:4000

我写出来的.bat 文件是这样的：

1
2
set browser="C:\Program Files (x86)\Tencent\QQBrowser\QQBrowser.exe"
%browser% localhost:4000 && hexo s

只有两行，第一行是设置用于打开日记本的浏览器所在的位置，当然，如果设置了环境变量，这里可以直接写浏览器的名字。

第二行是利用这个浏览器打开localhost:4000，打开成功才执行hexo s来启动 hexo。

新建日记

一般情况下的步骤：

  1. 在根目录打开命令行
  2. 输入hexo new <title>
  3. 打开source\_posts\
  4. 找到并打开新建的日记

获取标题

1
set /p title=请输入标题:

/p表示动态输入

创建文件

1
hexo new "%title%"

%变量名%表示引用已经赋值的变量。

打开文件

由于我设置的文件名不只是标题，因此还需要获取日期来组成文件名。

1
2
3
4
5
6
7
8
set year=%date:~0,4%
set month=%date:~5,2%
set day=%date:~8,2%

rem 在这里设置你的文件名格式
set new_post_name=%year%-%month%-%day%-%title%

"S:\Program Files\Typora\Typora.exe" source\_posts\%new_post_name%.md

其中：

  • %date%是系统变量，用于获取系统时间，返回的值的格式是2019/06/26 周三
  • %date:~x,y%代表从第 x 个字符开始，获取 y 个字符

刚开始的脚本代码是这样的：

1
2
3
4
5
6
7
8
9
10
set /p title=请输入标题:
hexo new "%title%"
set year=%date:~0,4%
set month=%date:~5,2%
set day=%date:~8,2%

rem 在这里设置你的文件名格式
set new_post_name=%year%-%month%-%day%-%title%

"S:\Program Files\Typora\Typora.exe" source\_posts\%new_post_name%.md

但是我发现在执行完hexo new "%title%"之后，命令行直接退出，加pause都没用。

猜测是因为，hexo 创建文件需要时间，还没创建好就打开，于是出错了。

后来改成：

1
hexo new "%title%" && call z_open_editor.bat

在创建完之后，才会执行后面的内容，后面的代码都放在z_open_editor.bat里面

最终代码：

1
2
3
4
rem z_new_diary.bat
@echo off
set /p title=请输入标题:
hexo new "%title%" && call z_open_editor.bat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
rem z_open_editor.bat
rem 本文件只支持打开默认布局的文件
@echo off
set year=%date:~0,4%
set month=%date:~5,2%
set day=%date:~8,2%

dir source\_posts

if not defined title set /p title=请输入标题:

rem 在这里设置你的文件名格式
set new_post_name=%year%-%month%-%day%-%title%

echo source\_posts\%new_post_name%.md

"S:\Program Files\Typora\Typora.exe" source\_posts\%new_post_name%.md

hexo日记本

https://yxchangingself.xyz/posts/hexo_diary/

作者

憧憬少

发布于

2019-06-26

更新于

2019-06-26

许可协议

#
×