2022.1.25Update

发现了一个神奇的问题，关于自定义cover。最近我发现有些md文档没办法通过hexo生成html，最后发现原因在于cover的格式。

需要换行+ “-“

1
2
3
4
5
6
RIGTH FORMAT:
cover:
- https://cdn.jsdelivr.net/gh/loveXMTX/images/blog/20210526191212.png

Wrong Format:
cover:https://cdn.jsdelivr.net/gh/loveXMTX/images/blog/20210526191212.png

2021.4.25Update

​ 其实最初搭建这个博客的目的是为了公考，当时备考复习比较烦，想找点有趣的事情做，所以就有了一些关于计算机应用工具方面的文章。现在入职后由于工（mo）作（yu）相对比较清闲，我最近也常有个想法，想好好写写自己的个人博客。但是对于我一个理工科男生来说，写好文章是真的好难，完全无从下笔，于是搜索了下“如何写自己的个人博客”。

  1. 写人，写写你周围那些重要的人，梳理一下你的人际关系；

  2. 最好是早上写；

  3. 写一写不同时期的自己；

  4. 自己对于这个世界的看法；

  5. 写写自己喜欢的作家，写写自己为什么喜欢他们；

  6. 写完人，就写自己去过的地方；

  7. 接着写自己看过的书，看过电影，听过的歌

  8. 讲一件事，做到起承转合，引起话头，观照世界，引申展开，以小说大；

立个Flag，每天都写一篇千字文

这篇文章就留下来纪念吧，本来最初搭建这个博客的目的是想梳理一下行测的知识点，想用一个托管比较方便的工具，后来还是折腾了一天。。。

1.插入本地图片的方式

  • 使用官网建议的方式
1
2
3
4
5
6
7

#载入本地图片的方式，这里是官网的Demo，与一般的MarkDown格式不一致，我试过插件hexo-asset-image，在我的上面好像行不通，以后有空了再研究。
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}
# 这个path是绝对路径，在hexo的根目录下的public下。

#以下是我的测试Demo
{% img [test] /photos/1.jpg  %}

  • 搭配Typora使用

    Typora是一款很简洁的markdown文档编辑器，实现了实时预览。

    1. 在typora的偏好设置–图像中，插入图片时选择“复制到指定路径”，这里推荐相对路径，比如我的是

      image-20200706211722327

    2. 将截图复制到Typora中，此时图片保存在了本地，如图所示

      image-20200706203250687

    3. 设置typora-root-url

      可以通过./scaffolds/post.md设置，

      image-20200706212358599

      typora-root-url的意思是：声明一个在你的本地电脑中预览图片的URL前缀, 你可以在这里找到更多细节。

      比如，在YAML Front Matters中输入typora-root-url: /Users/byp/Documents/gitDir/hexoBlog/source/，那么![alt](/blog/images/test.png)在Typora中就会被识别为![alt](file://typora-root-url: /Users/byp/Documents/gitDir/hexoBlog/source/images/test.png)

      ​

    因此，如此设置后，直接drag或者粘贴到Typora中，会被存储于/Users/byp/Documents/gitDir/hexoBlog/source/images/中，而由于我们设置了typora-root-url: /Users/byp/Documents/gitDir/hexoBlog/source/，所以他可以被解析为/images/test.jpg，且Hexo会将./source/images/发布到./public/images/，因此在网页上加载也没有任何问题。

2.模版文件

  • 文件夹./scaffolds/

    image-20200706202112458

包含三份模版文件，当你使用hexo new “blog_document”，会以他们为模版

1
2
3
4
5
draft.md

page.md

post.md

3.添加文章更新时间

由于本人使用的主题没有显示更新时间，所以需要手动配置。

  • 查看主题相关文件

    • 首先查看目标主题文件夹下的themes/[你要修改的目标主题]/layout/post.ejs，发现里面引入的是 _partial/article的内容。

    • 查看./layout/_partial/article.ejs

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      cat ./layout/_partial/article.ejs

      # 找到date相关的内容，可以看到这部分是关于date、category之类的，也就是每篇文章的Head
      <div class="article-meta">
        <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
        <%- partial('post/category') %>
        <%- partial('post/busuanzi-analytics',{index: index, class_name: 'article-views'}) %>
      </div>

      #从中还可以发现，引用了post/date

    • 查看./layout/_partial/post/date.ejs

      1
      2
      3
      4
      5
      <% if (!is_current("about", false)){ %>
      	<a href="<%- url_for(post.path) %>" class="<%= class_name %>">
      	  <time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date, date_format) %></time>
      	</a>
      <% } %>

    • 因此，我们主要修改的是 ./layout/_partial/post/date.ejs、./layout/_partial/article.ejs

  • 新建updated.ejs 文件

    在./layout/_partial/post/下新建updated.ejs

    1
    2
    3
    4
    5
    <% if (!is_current("about", false)){ %>
    	<a href="<%- url_for(post.path) %>" class="<%= class_name %>">
    	  <%= __('updated') %> <time datetime="<%= date_xml(post.updated) %>" itemprop="dateUpdated"><%= date(post.updated, date_format) %></time>
    	</a>
    <% } %>

    基本与date.ejs相同，post.date 改成了 post.updated，细心的读者还会发现，多了一个 <%= __('updated') %>，这是因为原来的格式只显示时间，那么当我们全部修改好之后，就会发现文章下面确实有两个时间，但不知道哪个是哪个，看的人很乱（这里不接受修改时间当然比发布时间迟的一看就知道了这样的吐槽），为了用户体验，还是加上提示比较好。

  • 修改article.ejs文件&&增加字段

    新增了一个 update.ejs 文件，我们需要将它引用进去。打开 article.ejs 文件，找到post/date栏，在它下方插入post/updated

    1
    <%- partial('post/updated', {class_name: 'article-date', date_format: null}) %>

    image-20200710212905771

    由于 date.ejs 和 updated.ejs 中分别引入了 published 和 updated 字段，因此我们需要去在语言文件中新增对应的字段，语言文件在 hiker/languages中，你博客设置成什么语言，就修改对应的语言文件，没指定就修改 default.yml 文件。我的是zh-CN.yml

    image-20200710213120013

  • 使文章以更新时间排序

    然后找到主配置文件 _config.yml（根目录下的_config.yml），修改 index_generator 的 order_by为-updated即可开启更新时间排序，你最后修改过的文章就会显示到最前面了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Home page setting
    # path: Root path for your blogs index page. (default = '')
    # per_page: Posts displayed per page. (0 = disable pagination)
    # order_by: Posts order. (Order by date descending by default)
    index_generator:
      path: ''
      per_page: 10
      # order_by: -date
      order_by: -updated #修改为以文章更新时间排序

    如果需要显示到具体时间，可修改 date_format 部分，改成如下的 YYYY-MM-DD HH:mm:ss格式，再重新生成一下网页就能看到具体的时间了。

    1
    2
    3
    4
    5
    6
    # 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: YYYY-MM-DD HH:mm:ss
    time_format: HH:mm:ss

  • Over