useinfo

2025-04-18 阅读量

作为一个 hexo 笔记框架的老用户，通过每次对笔记的内容的修改来对 hexo 框架进行学习和记录; 不会把这个形式当作教程，而是把他们当作 record 来进行。每次有的好的想法或者事件都会在这里进行记录；

1、通过 npm 来封装的一层接口

通过下面的 package.json 文件，来看看这个项目通过 node 自带的包管理器来实现了哪些内容

{
"scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "dev": "hexo clean && hexo server",
    "new": "hexo new draft $npm_config_name",
    "publish": "hexo publish $(ls -t source/_drafts | head -1)",
    "draft": "hexo server --draft"
  }
}

创建了一个 dev 这样的话使用： npm run dev 就可以自动的进行 clean 和 server 这两个操作了；

对于 “草稿” 这种类型，也是我在第一次使用 Hexo 这种类型的时候忽略的一种文本类型。我们在这个项目中也对这个类型进行了修改；

1 2	"new": "hexo new draft $npm_config_name", "publish": "hexo publis $(ls -t source/_drafts \| head -1)"

这里的第一个语句，非常有意思，当时的设计是，希望能够在命令行中使用npm run new [filename]的这样的一种创建方式；
后来这种的选择了现在的方式，$npm_config_xxx 变量可以让我们在进行命令行的输入的时候传入变量，比如：

1	npm run new --xxx=yyy

这个时候，就会将 yyy 这个值传给 npm_config_xxx 变量; 从而可以发到我们想要的动态创建草稿的目的(经实验证明是有效的);

我们，如果想要看一下写的草稿的样式，但是还不想将其发布到服务器的时候。可以使用 npm run draft 我们在这里可以看到他实际上运行的指令是：hexo server --draft。由此，便可在本地查看 draft 中的内容所对应的效果;

🔔 Tips：
但是，其实在这里是存在框架的一个坑的，我们使用npm run publish 的时候，他会把xxx.md 转换为 xxx-md 并且，框架中的正则表达式的形式也无法将输入的文件从草稿箱中进行发表，针对这里的问题将在下面创建文件的部分进行讲解;

2、创建文章：

框架不负责解决工作流程的问题，好的程序员应该使用框架所提供的接口，定义适合自己工作流程的开发方式；而，目前现有的开发方式不是直接的使用 Hexo 给的 hexo new post <filename> 的方式来进行进行文件的创建；

2.1、定义工作流：

在有了更多的经历之后，才发现自己对程序的理解更深入了一个层次。考虑的不单单是程序开发者所关心的技术问题，还有本身对用户来说的体验问题；着这两者中达到平衡才是对一个程序员能力纬度挑战；

工作流：

放弃: hexo new post <filename> 直接创建; ❎

选择: npm run new --name=<filename> 创建草稿, npm run draft 本地预览草稿, npm run publish 自动发布, npm run deploy 远程部署这样的一套组合方式；✅

所以，针对上述的需求，在package.json中做了对应的调整；

创建 category, 现在的 url 的构成：主类/子类s/文章名称 其中的汉语都转换为汉语拼音的方式了;

开发过程中的框架问题：

由于使用node publish + <filename> 的方式一直在抱文件不存在的错误；于是进行查找，发现是由两个问题导致的

对用户的输入进行过滤的时候，将xxx.md 转变为了 xxx-md;
在进行正则表达式的时候，使用至少存在一个的 + 而不是可有可无的 *;

第一个问题非常容易解决，在对应的文件 /Users/jiafeng/Downloads/first_blog/node_modules/hexo/lib/hexo/post.js 处，创建一个新的变量进行赋值即可；第二个问题，在进行排查的时候由于正则表达式的基本功不够扎实，花了好久排查出来，于是在对应的文件的行数的所在位置/Users/jiafeng/Downloads/first_blog/node_modules/hexo/lib/hexo/post.js:322 将代码做如下的修改即可；

1	const regex = new RegExp(`^${escapeRegExp(data.slug)}(?:[^\\/\\\\]+)`);

将上述的正则表达式改为, 如下的形式：

1	const regex = new RegExp(`^${escapeRegExp(data.slug)}(?:[^\\/\\\\]*)`);

修改完毕之后便可以成功的使用上述自己封装的自动发布接口;

3、新的需求：

我使用的 hexo 的主题是 yillia ，当时想在菜单栏创建一个新的标签，并把这个标签命名为：项目。当我点击 “项目” 时候，希望能够将category 的父标签为 tech 值的文章全部罗列出来；

3.1）最初的尝试

思路：创建一个 page，使用hexo new page <pagename>; 然后，在新创建的 page 中使用 hexo 自带的模版引擎 Nunjucks 将内容展示到页面上；

对应的代码如下所示：

---
title: 项目
date: 2025-04-19 13:42:17
category_filter: 物理
---

{% for post in site.posts %}
  {% if '物理' in post.categories %}
    ## [{{ post.title }}]({{ post.url }})
    <ul>
    <li> {{post.title}} {{post.url}}</li>
    </ul>
  {% endif %}
{% endfor %}

但是，事实上。这个方式只对了一半；他指挥奖上述的 <ul> 标签中的内容展示在页面上。但是不会以内容的方式展示在主题上面；这个现象需要自己踩过坑才能完全理解；

3.2）新的方案：

在询问了 deepseek 的需求之后，给出了一个更好的方式。并在一系列的代码试验之后，验证了最后的可行性；

最后的展示效果为：

在 themes/yilia/layout/page.ejs 文件中进行修改，将代码修改为如下的样式：

<% site.posts.forEach(function(post){ %>
    <% if(post.categories.length != 0 && post.categories.data[0].name == page.category_filter){ %>
        <%- partial('_partial/article', {post: post, index: true}) %>
    <%}%>
<% }); %>

使用 page.category_filter 来确定分类的值，将所有页面中的这个category值进行遍历，将符合要求的值传入到 themes/yilia/layout/_partial/article.ejs 文件中，并把index值改为true。如此，便可使上述的效果；

对 article.ejs 文件的研究, 对应的问价的整体样式是由这个文件来进行控制的；后续的组建和插件都将会放入到这里；
当然上述的代码没有判断如果为空的情况，相同的思路，只需要自己补充到位即可；

下面展示的内容，是当时在进行研究的时候做的一些锚点：

CommandLine
  hexo new page --path custom/tech "技术专栏"

---
title: 技术专栏
layout: post        # 复用文章布局
category_filter: 技术
---

{% for post in site.posts %}
  {% if post.categories contains '技术' %}
    ## [{{ post.title }}]({{ post.url }})
    {{ post.excerpt }}
  {% endif %}
{% endfor %}


  {% if '物理' in post.categories %}
    ## [{{ post.title }}]({{ post.url }})
    {{ post.excerpt }}
  {% endif %}


  [
  'title',     'date',        'toc',
  'top',       'mathjax',     '_content',
  'source',    'raw',         'slug',
  'published', 'updated',     'comments',
  'layout',    'photos',      'link',
  '_id',       'content',     'site',
  'excerpt',   'more',        'path',
  'permalink', 'full_source', 'asset_dir',
  'tags',      'categories',  'prev',
  'next',      '__post'
]

<%- partial('_partial/article', {post: page, index: false}) %>

本文作者： zhongyupei
本文链接： http://zhongyupei666.github.io/uncategorized/useinfo-md/
版权声明： 本作品采用进行许可。转载请注明出处！