原文见:https://www.yuque.com/asuncat/blog/hrmaio
博客地址
Github Pages:https://yquanmei.github.io/
主题:https://github.com/yquanmei/gridea-theme-asuncat
electron桌面端应用:https://github.com/yquanmei/gridea-electron
前言
意外发现了搭建博客的好东西:Gridea,为不太会搞设计的前端打开了一扇新的大门。当然,接下来,就是内容的纠结、纠结、纠结…
博客搭建框架
一、框架
● Gridea
homepage:https://gridea.dev
介绍:一个静态博客写作客户端
二、评论
● Gitalk
● DisqusJS
内容
20220209:刚好趁着春节想了一下内容,自己喜欢的有阅读、健身、穿搭、宠物,但是放到个人博客去更新,投入总是要大于产出的。因为自己会长期维护语雀的知识库,也会在这上面花费大量时间,所以我想让个人博客的内容不需要自己想,但是又能展现给阅读者有用的东西。有一天我突然想到我可以将喜马拉雅app中的每周一本书放在博客上,之前想到的有关阅读的都是要不要收集书籍的读后感在个人博客上,现在如果是把别人想好的内容直接展示在博客上,刚好能满足我的需求。不过更新时间暂定为一个月一本书。
博客搭建过程
根据文档搭建:https://gridea.dev/docs
主题开发
一、拉取代码:https://github.com/getgridea/gridea-theme-starter.git
二、启动项目
yarn install
yarn run dev
1、报错:node:internal/process/promises:246
triggerUncaughtException(err, true /* fromPromise */);
^<ref *1> Error: read ECONNRESET
at TLSWrap.onStreamRead (node:internal/stream_base_commons:220:20) {
原因:获取git资源慢,https://raw.githubusercontent.com/getgridea/mock-json/master/list.json
解决:把这个json文件拷贝下来放到项目mock文件夹下
三、文件目录
asuncat - 主题文件夹名称 (建议用小写,中划线分隔)
├── assets - 资源文件夹(必须,不可更名)
│ ├── media - 主题静态资源存放目录(可选,不可更名)
│ │ └── fonts - 字体图标文件夹(示例)
│ │ │ ├── icomoon.ttf
│ │ │ └── icomoon.woff
│ │ └── images - 主题用图片文件(示例)
│ └── styles - 样式文件夹(必须,不可更名)
│ ├── _blocks - 样式模块文件夹(可选,可自定义命名)
│ │ ├── footer.less
│ │ ├── header.less
│ │ └── tag.less
│ ├── _core - 样式模块文件夹(可选,可自定义命名)
│ │ ├── base.less
│ │ ├── colors.less
│ └── main.less - 主样式文件 (必须,不可更名)
└── templates - 页面模版文件夹(必须,不可更名)
│ ├── _blocks - 页面模版文件夹(可选,可自定义命名)
│ │ ├── footer.ejs
│ │ ├── head.ejs
│ │ ├── header.ejs
│ ├── index.ejs - 主页,列表页 (必须,不可更名)
│ ├── post.ejs - 文章页 (必须,不可更名)
│ ├── archives.ejs - 归档页 (必须,不可更名)
│ ├── tags.ejs - 标签列表页 (必须,不可更名)
│ ├── tag.ejs - 标签详情页 (必须,不可更名)
│ └── friends.ejs - 自定义模版 (可选,任意命名)
└── config.json - 主题配置文件 (可选,推荐)
└── style-override.js - 主题样式自定义文件 (可选)
四、主题自定义配置
文件:config.json
electron桌面端开发
因为是推荐书,所以不可避免地需要写上作者,想到了两个方案:标题中、标签中
● 标题:总觉得加上作者突兀不好看
● 标签:首页显示还好,标签页会有书籍类别、作者的超多标签,觉得不够美观
所以决定还是自己在源码的基础上,开始了桌面端的开发改进。
真正把代码拉下来,改了改,发现还是挺简单的,在原js的基础上套了壳。第一次接触electron,揭开了它神秘的面纱,发现一切并没有想象中难…
功能点
● 自定义主题
○ 修改头像
○ 修改本站名称与用户名的样式
○ 修改文章标题样式
● iconfont制作语雀图标并引入
待改进
● 修改Gridea桌面端源码
○ git内容添加readme文件
○ post配置增加author(20220225:完成)
● theme
○ 20220209:用些好看的字体,应该能为个人博客网站加分(20220220:完成)
○ 鼠标hover,cursor修改(得找个图)
■ 参考(爱心):https://www.cnblogs.com/scriptchild/p/10914219.html
○ f12出现“不要扒我了”弹框