使用gridea搭建博客,github pages

原文见: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出现“不要扒我了”弹框

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值