只是玩玩 All work and no play makes Jack a dull boy

Wordpress 主题:二〇一九,Ghost 版

之前用的主题 Attila 自 22 年 6 月修改完成后用到现在也差不多一年了,不可否认 Attila 是个非常好的主题,而且在使用期间我还陆陆续续做了很多喜欢的功能集成,如:豆瓣、TOC、友链。 前端时间看到 imzm.im 的 Wordpress 主题 二〇一九,初见的第一眼感觉很舒服。虽然只是 Wordpress 的一个免费默认主题,但是较大的字体和舒适的排版让人在阅读方面能感受到很强烈的愉悦感,当时搜了一下发现没有 Ghost 的办法,所以就又萌生了移植的想法。 以前写 Attila 没太搞明白 Glup 的作用,但是体会过他的方便,所以这次也打算从头开始用一个比较方便的脚手架枸橘,最后选定了 @royalfig  的 Ghost-theme-starter 主题脚手架做开发,这个脚手架主要工具有下面这些: * 打包工具:Rollup * sass 工具:postcss 不过刚开始就遇到了调试环境无法启动的问题,检查后发现启动命令有点问题,看了 @royalfig 最新的一个主题的配置文件后发现启动命令要对应着修改成 "watch": "rollup -c --environment NODE_EN
设计 , 分享 ,

Pyenv 提示 error extracting the web portion from the installer 处理

错误信息 最近因为需要用 Python 写个小程序给同事用,但是用 pyinstaller 打包好后在同事的 Win7 系统上运行出错,提示如下错误: ⚠️无法启动此程序,因为计算机中丢失 api-ms-win-core-path-1-1-0.dll 缺少 DLL 一般都是因为没有运行库,我百度查了下资料,有些帖子说是因为没安装运行库,我试着重新安装了所有运行库以及那片帖子提到的库,但是好像并没有什么效果。 后来 https://cloud.tencent.com/developer/article/1848431 这篇帖子中说到是因为 3.8.6 以后的 Python 版本不在支持 Win7 了,所以需要将 Python 降级到 3.8.6 重新打包就能解决这个问题。 pyenv-win 直接安装肯定会出问题,因为我的电脑中已经安装了 3.11.0 ,因为以前了解过 nodejs 有多版本的环境管理工具,就试着搜索了一下,python 也有一款叫 pyenv-win 的 win 平台版本管理工具。 GitHub - pyenv-win/pyenv-win: pyenv for Windows. pyenv is a
设计 ,

Ghost 博客实现豆瓣观影清单

早期实现 豆瓣观影清单、书架的功能之前也做过,当时用过好几个方案 1. 当时找的一个教程,不过不记得出处了,不过我写了一篇日志记录这个事情,里面记录了实现过程,原理其实很现在这个类似 2. 另外一个是当时一个叫 mufeng 还是布克牧为的大佬搞了一个 douban 的数据站,可以缓存你豆瓣的观影数据,不过好像也停止服务了 这两个方案都或多或少的出现问题了,我后来懒也就一直没有修过,所以之前导航上一直没有书架和豆瓣的链接。 其他方案 但是在空着的这段时间我有时候也找过解决方案,有一次在木木木木木 大佬的博客里发现了一个 hugo 的实现方案,功能非常齐全,可以实现清单的分类筛选、时间筛选、评分筛选、排序等功能。 当时一下就心动了。 大佬博客也有一篇日志提到了这个功能是谁写的,并且附上了链接。 来自于 @怡红公子 的自制轮子:doumark-action ,豆瓣书影音同步 GitHub Action。 我当时尝试着弄了一下,虽然成功通过 doumark-action 缓存了我的豆瓣数据,但是后续的页面渲染把我卡住了,hugo 的模板渲染用到了一些 hugo 特有的函数,我当时也看不太
分享 , 设计 ,

Ghost 利用 CSS 选择器实现归档按月分组

JavaScript 方案 关于 Ghost 如何实现文章归档页面我之前有在关于页面的 BLogs 部分有提到过如何用 JavaScript 脚本来实现。 2016 年 & 丙申年 12 月 18 日 优化了文章归档页的实现,之前 xknow 写的 js 感觉略微繁琐,这次改用之前发现的 jquery 选择器,用 [year="2015"] 这种选择器语法直接获得当前年份的所有文章数,7 行代码就搞定了,之后完善下细节,增加年份月份折叠等功能把。 var currentYear = ""; $("#hidden-temp-container ul li").each (function (i){ var year = $(this).find ("em").attr ("year"); if (year < currentYear || currentYear == ""){ currentYear = year; $(this).before ("<h3 class='"+currentYear+"'>"+c
分享 , 设计 ,

开源主题 Attila 优化

Attila 是一款优秀简洁的开源单栏 Ghost 主题,虽然这款主题有中文汉化,但是作者并未针对中文做出相应的优化,而且搜索功能无法正常使用中文进行搜索。‌‌ 针对这个问题我数星期前提交过一个 Issue,作者虽然也有回应,并询问了我有没有实现方式,我也做出了回应,但是一直没有做出更新和优化。后来秉承着自己动手丰衣足食,在本地用发布的压缩版本修改了一个自己能用的,但是一直没去研究怎么才能搜索中文,之前用的 Kemia 这个主题是可以搜索中文的,我今天看了下代码发现应该可以实现。 刚刚索性就把源码 Fork 了一份,回家到现在花了四个小时优化、修改好后传上了 Github,希望更多的 Ghost 博友能使用上这款优秀的主题🙏。 🏗️仓库地址:https://github.com/rebron1900/attila 优化内容如下: * 优化了中文字体显示 * 缩小了主体内容区宽度, * 删除了题头图片,并更改了日期格式 * 文章简介自动截取文章前 50 个字符 * 评论适配 Twikoo,请在后台主题页面设置 Twikoo 腾讯云 id,参数名还是 Disqus 没改。 * 增加了
设计 , 分享 ,

中文排版优化

🎈 起因 我以前写文章从来没有注意过中英文混排的问题,也没有习惯在打英文或者一些特殊符号之前加上一个空格。期间博客圈的博友们也曾经讨论过这方面的问题,但是一直没太上心。 直到我偶然看到了 https://sivan.github.io/heti/ 这个项目,并通过延伸大概了解了 https://w3c.github.io/clreq/ 这个规范。 因为该规范涉及了字体的使用、出版物的排版规范等等细则,我没有深入接触,因为毕竟是专业排版规范的文章,其实我也没咋看明白,大概瞄了下以下两节。后来找到一篇总结文章:中文文案排版指北,才算是正儿八经看明白。 3.1 标点符号与其排版 3.2 中、西文混排处理 引用 heti 这个项目的一句总结: 在当下前端技术尚不能完美解决中西文混排间距的情况下,常见的输入习惯是手动在中西文间加入空格(https://github.com/vinta/pangu.js)。这样做的弊端一是间距不可控(有时显得过大),二是通过空格符来排版只能算无奈之举。好消息是在最新的 macOS、iOS 中,使用原生语言开发的文本区域会自动处理中西文混排的间距(无论是否加空格)
设计 ,

搭建属于你自己的 flomo 应用:Memos

之前有讲过在使用 trilium 作为自己的主力笔记软件使用,不过 trilium 的手机端不太好使,有时候一些碎片化的想法或者片段或者其他一些东西希望能通过手机快速记录,显然 trilium 暂时达不到这个要求。 碎片化记录工具之前其实有接触过 ——flomo,最近挺火的一个工具,博客圈的群里也有不少人在使用,不过他和 notion 一样是纯线上的服务,而且好多功能用买 VIP 才能使用,所以我在想开源社区有没有类似 flomo 这样的笔记应用?你别说我还真找到了两个。 第一个:neno none 是一个使用 svelte+tailwindcss 仿照 flomo 写的 pwa 应用,通过利用 github 甚至可以无后端私有化使用。而且作者最近更新还比较勤快,增加了 notion 同步的功能。不过我觉得前端使用起来有点怪怪的,但是软件功能没什么问题。 GitHub - Mran/neno: 使用 svelte+tailwindcss 仿照 浮墨 写的 pwa 应用使用 svelte+tailwindcss 仿照 浮墨 写的 pwa 应用. Contribute to Mran/neno development by creat
分享 , 设计 ,