年前就有自定义自己的blog主题的想法,直到tg有人问我当前默认主题我也没有开动,但是提醒了我之前的这个计划……趁着过年补学了nodejs的web framework:express和view engine:ejs的相关知识。在这里,我将用不需要系统学习这些额外开发知识的方法,简单地讲一下如何自己魔改官方的主题(这里我魔改的是Gridea的Notes,且暂时没有用到less开发)
首先,先是一波卖瓜自夸(不是) 主题展示:

默认文章图片配图,和首页右侧的图片都是可以自定义的。
在这里,我用了tailwindcss引擎来输出首页要用的css主题模板,同时修改了首页的nodejs,让他们读取配置文件。

修改需要的知识

ejs

ejs是为了实现动态模板,加载javascript变量到html中而设计的,它是配合express使用的view engine之一。文件扩展名不再是 .html 而是 .ejs 。在 ejs 文件下,有以下几种表达

  • <% %> : 用于插入一些javascript的语法,例如一些逻辑判断,循环,数组遍历等
  • <%= %> : 用于将对应的javascript变量显示出来。默认变量处理后,输出的都是 string类型
  • <%- %> : 用于读取一些raw html的内容,为了将header,footer这种重复的html导入。从而减少代码冗余

Gridea-自定义配置文件

config.json 下。注意符合json格式要求,不然gridea会闪退而不是报错(昨天不小心多了一个逗号)。我的主题新增了以下两个配置:

    {
      "name": "defaultPostPic",
      "label": "默认首页文章图片",
      "group": "图片",
      "value": "https://i.imgur.com/9gj5PAl.png",
      "type": "textarea",
      "card": "other",
      "note": "图片网址"
    },
    {
      "name": "bgPic",
      "label": "首页侧边图",
      "group": "图片",
      "value": "https://i2.100024.xyz/2023/01/29/1764550262.webp",
      "type": "textarea",
      "card": "other",
      "note": "图片网址"
    }

当你使用ejs的时候,导入则仅用 site.customConfig.bgPic 即可

  <body class="bg-custom" style="background-image: url('<%= site.customConfig.bgPic %>')" >

未来考虑首页文章默认配图可以提供多个,然后随机选择为文章配图。(当然,如果文章本身设置了配图选项,则不会调用这个配图库随机选择的函数)

最后的最后大雾吐槽:明明是喜欢萌妹,可是为什么现在首页看起来这么的弍刺螈(恼)