Nemophila 主题开发日志 log[0]

Article author's Avatar

一之濑亚子

· · Loading...次阅读

前言

从21年开始玩博客到现在也五年多了，之前一直在使用 Mashiro 大佬的 Sakura 主题（由honjun移植到hexo后再被我魔改的版本（笑））。Sakura主题真的非常好看而且很可爱，我见到她的第一眼就喜欢上了。但是，当我几年后再点开当年乱改的样式和标签，我感觉我已经没有力气再去整理它们了（哭）。

于是，继承Sakura意志的全新的 Monica 主题被提上了日程。
25年暑假的时候，我沉迷于一本叫《Silent Witch》的小说，于是想着以可爱的女主莫妮卡为原型设计一个博客主题吧（干劲十足）！当我在Figma完成设计稿时，暑假已经接近结束了，因而项目被迫搁置。

到了26年的寒假，我继续这个项目时，非常现实的 —— 我更喜欢别的东西了=￣ω￣=。从年末开始我就沉迷于ヰ世界情緒小姐无法自拔，而蓝情的代表花卉就是Nemophila，一种蓝色小花，也正因此我对主题进行了重新设计，最后有了现在的Nemophila主题。

home_Monica homeDark_Monica articleList_Monica articlePage_Monica

这个主题在很多地方都参考了 Sakura 主题，也融入了一点小巧思，但几乎所有代码都是从零开始实现的。在前前后后搞了一个月后，我终于得到了一个能满足基本需求的版本 v0.1.0, 目前代码已经开源，欢迎使用。


接下来，本文将记录截至该版本已实现的page和功能。

页面

主页 index

在 v0.1.0 中，我暂时抛弃了主页大头图的设计，改用了纯色背景，在下一版本中将加入切换功能。

index

Hi

这里的 Hi, xxx 会随着hexo配置文件中的 author 字段变化。

在 Hi, xxx 的下方是通信方式，可以通过在主题配置文件配置contact字段进行设置。其中的icon字段支持图片链接或者font awesome。需要注意的是：若不使用默认的icon，建议全部采用font awesome以保证视觉上的整齐划一。

1
2
3
4
5
contact:
  'Github': {uid: 'imouup',path: 'https://github.com/imouup' ,icon: '/ico/contact/github.svg'}
  'Twitter': {uid: '@iznyaku',path: 'https://x.com/iznyaku' ,icon: '/ico/contact/twitter.svg'}
  'Bilibili': {uid: '438518095' ,path: 'https://space.bilibili.com/438518095' ,icon: '/ico/contact/bilibili.svg'}
  'Email': {uid: 'iznyaku@outlook.com' ,path: 'mailto:iznyaku@outlook.com', icon: far fa-envelope}

该主题的 About me 入口页从导航栏移动到了 Hi, xxx 的下方。

Tweet

在 Hi, xxx 的右方是一个你可以随时更新的动态（类似QQ空间），暂且命名为 Tweet 。其中的用户名为hexo配置文件中的 author_name_in_mother_tongue 请务必配置。
要使用该功能，你首先需要为其配置后端：

  1. 创建workers
    将 /api 目录下的 tweet_api_workers.js 部署到 cloudflare workers。
    选择从Hello Worls开始,进入后点击编辑代码删掉原本的代码并粘贴 tweet_api_workers.js 的内容。
    创建Worker
  2. 配置Workers KV
    在cloudflare的控制台进入 存储和数据库 下的 Workers KV。新建一个Instance，随意命名。
    然后回到先前闯进的workers的页面，选择 绑定 ，添加绑定一个KV命名空间，变量名称填写 DB ，KV命名空间选择先前创建的Workers KV.
    添加 KV 命名空间
  3. 绑定自定义域名
    进入Worker的设置，绑定一个域名（workers.dev在已被GFW拦截）
  4. 设置Secret
    进入Worker的设置，添加一个变量，名称为API_SECRET

得到后端的域名后回到主题配置文件，填入 Tween 字段下的 api 内。
当然，若不需要该功能，可在 enable处填 false 。

Tweet API Docs

  • /tweet 获取当前的动态
  • /update 更新动态：文档类型 json, 接收字段：content (动态内容，纯文本)，always_on (是否置顶)
1
2
3
4
5
6
7
8
9
{
content = "xxx", always_on = 0 // 普通动态，不置顶
}
{
content = "xxx", always_on = 1 // 置顶动态，将忽略之后所有普通动态
}
{
content = "", always_on = -1 // 撤销当前置顶动态并显示最新的动态
}

主页文章列表

我参考了 Sakura 主题的文章列表，做了这种上浮出现，下滑加载的样式。
目前文章卡片上只有阅读次数和Category，之后还将加入Tag。

阅读次数获取调用了 Vercount 的api （￣︶￣）↗　。

Postlist

文章页 post

主要有 有头图 和 无头图 两种样式，可以通过在对应文章的md文件头部设置 cover_showInPost 的值( true / false )来为特定文章选择样式，默认为有头图。

文章页 post 无cover | cover_showInPost: false
文章页 post 有cover | cover_showInPost: true

目前，我已经重构了markdown的大部分常用样式：

标题

标题

代码块

1
2
3
4
def hello_world()
    print('hello world!')

hello_world()

行内代码：elements.forEach((ele)=>{return ele.name});

列表：

无序列表

  • Kaguya
  • Yachiyo
  • iroha

有序列表：

  1. ヰ
  2. 世界
  3. 情緒

表格

markdown HTML
inline codeblock `yachiyo()` yachiyo()
bold **“Isn’t this fun?”** Isn’t this fun?

引言

希望我的歌声与画作，能成为引导你走向某处的契机。 我至今的「创作」，都是为了这个目的。
—— ヰ世界情緒

图片

目前还没有图片加入放大查看功能，先加入 TODO List。

超かぐや姫！ @oda_koden

视频

目前已对bilibili, youtube的嵌入链接以及video标签进行了简单适配，但需要注意：
b站的嵌入链接需要包裹 <div class="video-container"></div>,例如：

1
2
3
<div class="video-container">
<iframe src="//player.bilibili.com/player.html?isOutside=true&amp;aid=115973126364952&amp;bvid=BV1HLz9BJEgi&amp;cid=35670851653&amp;p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>

KaTex

本主题支持 KaTex 公式渲染，不过前提是你需要安装 hexo-renderer-markdown-it-plus 才能正确渲染公式。

1
2
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save

安装后使用 $ $ 包裹行内公式，$$ $$ 包裹独行公式（），示例：

E=hμE = h\mu

∮lH⋅dl=∑I\oint_l \textbf H \cdot d\textbf l = \sum I

目录

目录上的蓝色星星会跟随你目前所在的位置以及你鼠标的位置。

toc

自定义页面 page

这是所有无特定 layout 的自定义页面的模板，采取了与文章页相似的设计，目前还不能设置特定页面的头图。

自定义页面

分类归档页 categories/<category>

分类归档页 categories/tech

每个Category的归档页是在 page 模板的基础上开发的，但你可以为每个Category设置头图：只需编辑博客根目录下的 source/_data/categoryCover.yml 文件，若 _data 目录或 categoryCover.yml 文件不存在请自行创建，然后按以下格式填写：

1
2
3
4
- name: tech
  cover: /images/article_banner/banner1.jpg
- name: note
  cover: /images/article_banner/banner1.jpg

友链页 friends

friends

欢迎交换友链描 ヾ(≧▽≦*)o

音乐播放列表页 music

我 抄了 借鉴了 Apple Music的设计，爆改了 Aplayer 的CSS。大家可以来看一下。
现在这个设计我总感觉与主题有点不合，在下一版本中将设计一个纯色背景的版本。

music

本主题支持 Aplayer 和 Metingjs，你可以通过编辑博客根目录下的 source/music/index.md 的头部来指定使用的播放器和播放列表.

使用 Aplayer 并自定义播放列表的示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
title: music
date: 2026-02-06 17:01:16
cover: 
layout: music
player_type: "aplayer"
audio_list:
    - name: "Remember"
      artist: "Yachiyo"
      url: "https://music.163.com/song/media/outer/url?id=3340112781.mp3"
      cover: "images/music_cover_test.jpg"
      lrc: "assets/Remember.lrc"
    - name: "Remember"
      artist: "Yachiyo"
      url: "https://music.163.com/song/media/outer/url?id=3340112781.mp3"
      cover: "images/music_cover_test.jpg"
      lrc: "assets/Remember.lrc"  
---

使用 Metingjs 并使用网易云播放列表的示例

1
2
3
4
5
6
7
8
9
10
---
title: music
date: 2026-02-06 17:01:16
cover: 
layout: music
player_type: "metingjs"
server: "netease"           
meting_type: "playlist"     
meting_id: "4924556205"  
---

404页 nofound

如果你点击导航栏的搜索键应该会进入本主题的404页面（搜索功能还在实现中🥲）

404 No Found

功能

为了方便站内和站外链接，本主题定义了一个 <link-ing> 标签，具体语法如下：

1
<link-ing type="" link="" title=""></link-ing>

站内链接示例

<link-ing type="inside" link="/about" title="About me"></link-ing>

站内链接是行内元素，例如：
当然其也可以独行放置：

站外链接示例

<link-ing type="outnside" link="https://2heng.xin/" title="樱花庄的白猫"></link-ing>


Aplayer & Metingjs

本主题对 Aplayer 的样式进行了调整以贴合主题的风格。由于Aplayer的css是固定在主题内的，故不支持升级版本。

Aplayer 测试

Metingjs测试


Waline

请看下面的评论区吧。
本主题使用的是 Waline v3.8.0，由于CSS改动较大，请不要进行版本升级，目前使用的是主题内部的Waline样式表。
使用Waline请参考 Waline文档，并在主题配置文件中进行设置：

1
2
3
waline:
  enable: true
  serverURL: 'https://waline.cdn.mouup.top/'

ICP 字段

主题配置文件中的 icp_license 字段可设置ICP号

1
2
3
icp_license: 
  icp_license_link: "https://icp.gov.moe/?keyword=20212022"
  text: "萌ICP备20212022号"

CC License 字段

可以在主题配置文件中选择是否为文章启用cc协议，并选择协议

1
2
3
4
cclicense:
  enable: true
  type: "知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议"  # 说明文字，例如：知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
  url: "https://creativecommons.org/licenses/by-nc-sa/4.0/"

RSS feed

在安装 hexo-generator-feed 插件后可以在主题配置文件中配置RSS feed

1
2
3
4
5
6
7
8
9
10
11
12
# rss
feed:
  type: atom           
  path: atom.xml       
  limit: 0           
  hub:                 
  content: true        
  content_limit: 140   
  content_limit_delim: ' ' 
  order_by: -date      
  icon: ico/Nemo.svg       
  autodiscovery: true

最后

TODO

博客配置文件中部分字段说明

back_to_top 图片

现在右下角的图片，点击回到顶部

1
back_to_top_img: images/yachiyo.PNG

lazyload 图片懒加载

为全站图片设置懒加载动画或图片：

1
2
3
lazyload:
  enable: true
  loading_img: /images/yachiyo_loading2_640.webp

例如：
lazyload1
lazyload2

最后的最后

目前已经完成的内容大概就是这么多了，虽然还有不少工作要做，但基本的骨架已经搭好了。
在写这篇文章的过程中我也发现了许多bug 😄，欢迎大家一起来找bug。
这是本人第一次写这么多CSS，很多地方可能不太规范，恳请大家一起来完善 q(≧▽≦q)。

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

Next Post

RVC模型训练