「哔哔点啥」微信公众号

看到 @熊野 说可以用「微信公众号」发哔哔,还基于腾讯云函数,也能部署到 Leancloud ,立马 勾搭 加上微信好友。熊大神连夜折腾匹配一夜一天,远程手把手指导部署,整个过程:失败,等,失败,等等,失败,等等等等……成啦!太、太神奇!

「哔哔点啥」微信公众号

食用步骤

1.按照原作者 @daibor 的教程在 Leancloud 建好应用,进入设置–应用 Keys,留存 AppIDMasterKeyRequest 域名

撸个 Alfred 插件「b言b语」

bb-1

虽说 iOS 的快捷方式足够优雅,但还是想着 Mac 上也更舒坦地随意发布。VSCode 的 REST Client 插件能用但没有一键直达,看到 @xwlearn 分享的 Python 代码,立马想到神器 「Alfred」!

插件撸起

bb-3

安装依赖:

sudo pip install urllib3

云 VSCode 云编码

code-server 云 VSCode 云编码,安装踩坑无数,Docker 一条部署:

docker run --name vscodeserver --user root -it -d -p 0.0.0.0:8080:8080 -e PASSWORD='youMiMa' -v "$PWD:/home/coder/project" codercom/code-server:latest

此刻 http://ip:8080 输入密码 youMiMa ,等等等失败,挂上特殊通道,等等等,成功。

废话胶囊,值得拥有

@Elizen 的知识星球,得知还有人折腾了这货 无点赞评论版微博b言b语,原来是基于 LeanCloud 来实现的,无比亲切。

这不,折腾折腾已整合到主题中(这里)。另外,又学了几招。

前端用 AppIDAppKey 来展示,并把 class 的 create 、delete 、update 三项权限设置为「指定用户」,后端用 MasterKey 来更新,避免数据被更改。

Hugo 自定义文章样式

之前 WordPress 推出不同文章样式,如轻博客一样,发一句话、链接或视频有不同的显示效果。之后,用 Hexo、Bitcron 时都以文件夹形式进行文章分类,并以此为判断条件。

效果见:https://immmmm.com/posts/chat/

content
├── posts
│   ├── chat
│   ├── coding
│   ├── daily
│   ├── reading

chat 目录内的 md 文件是以一句话的模式(头像+时间)显示,怎么实现呢?利用 Hugo 的 .File.DirreplaceRE 正则。

Hugo 显示指定文件夹内图片

效果见文章底部,这些图片非手动一张张插入,文章头部一句 path: 2004gd 搞定!

直接看代码:

{{ if .Params.path }}
    {{$Path := .Params.path}}
    {{- range (readDir (printf "%s%s" "./static/images/" $Path )) -}}<img loading='lazy' src="{{(printf "/images/%s/%s" $Path .Name ) | absURL}}" />{{- end -}}
{{ end }}

当文章中写了 path: 2004gd 表示 Hugo 遍历根目录 /static/images/2004gd 内的图片并显示。

Hugo 总文章数和总字数

前者在某个大神主题中翻到,一句代码:

共 {{ len (where .Site.RegularPages "Section" "posts") }} 篇文章

总字数没有现成参数,官方手册看到 .Scratch.Add 瞎折腾完成:

{{$scratch := newScratch}}
{{ range (where .Site.Pages "Kind" "page" )}}
    {{$scratch.Add "total" .WordCount}}
{{ end }}

新建了个参数累加所有文章的 .WordCount 字数,一般放 footer 头几行,下面是调用代码:

总计 {{$scratch.Get "total" }} 字

Hugo 音乐短代码

感谢 LoveItMetingJS 真方便!

具体源码见:shortcodes/music.html,把这个文件丢入自己的主题文章内插入调用代码即可,已粗暴的把 js 和 css 丢在一起。

Hugo 添加相册页面

效果见: https://immmmm.com/photos/

总有那么一瞬间特别特别想发一张照片,但不是以文章形式发布。

实现思路是程序自动遍历指定文件夹内的图片,并展示在一个页面上。有了思路,剩下的就是看文档、看文档、看文档,此功能利用 Hugo 的 readDir function 函数达成。

日常更新把图片丢到 static/photos 中即可(搭配 Github Action 自动化部署更香):

static
└── photos
    ├── 落樱缤纷.jpeg
    ├── 想象中的自由.jpeg
    └── 儿时登过顶的狮子山.jpeg

Hugo 文章内链优化显示

好久好久之前(2年前),写过这功能:《Bitcron 文章内链自动优化显示》,如下效果:

Bitcron 文章内链自动优化显示

#折腾 
当我们在文章内引用了一个站内的链接,一般只是超级链接,其实,也可以为这个超级链接提供更好的表现方式。 这是看起来很简单,但确实一个超赞的想法,来自于 Jimmy。效果如下(中间部分,hello 为标题):

本文利用 Hugo 的 Shortcodes 功能和 .GetPage 函数来实现。

VS Code 初体验

Visual Studio Code 久仰大名,但一直误认为是个臃肿大部头,毕竟是微软出品。 🙇

一试,直接拉取仓库开启 Git 同步,成了,满足本地码字同步而不用碰终端,不用碰终端,碰终端!

二试,使用 gpm 插件更能多仓库管理,也成了,好感爆棚。没遇到什么权限问题,应该是之前终端里配置过的关系。

再试,GitHub 网页上更改,VS 里拉取变更,丝滑,这下舒心到随心咯!

Hugo 主题常用的代码片段

全站 Site

网址:.Site.BaseURL

标题:.Site.Title,示例:

<a href="{{ $.Site.BaseURL }}">{{ $.Site.Title }}</a>

副标题:.Site.Params.description

关键词:.Site.Params.keywords

头部菜单:

{{ range $.Site.Menus.main }}
	<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}

Hugo 添加面包屑导航

黑+白,疗效好

「不问明天,悠然浪费」,多少年前看到的一句话,一直作为博客的 Slogan ,如同“谶语”般的存在! 😷

说回正题,折腾流程如下:

添加 Google Fonts 思源宋体

谷婶大法好,在线字体都支持中文咯! 👍

访问 Google Fonts,点选需要的字体,简单设置能获得样式链接。虽听闻字体服务器国内也有节点,但还是启用 loli 的 CDN,感谢!

前端编辑 Hugo 文章

目前发文是直接在 Github 前端进行,Hugo 的构建交给 Github Actions 实现自动化部署。因此,产生个需求,文章里改个错别字什么的,能不能一键直达 GIthub 编辑页面?

# 当面页面链接
https://immmmm.com/hugo-themes/
# Github 编辑页面链接
https://github.com/lmm214/immmmm/edit/master/content/posts/coding/hugo-themes.md

Hugo 主题推荐

人工 Github 搜索 “Hugo theme” 按 stars 排序,挑出以下十款。

Hugo 图片懒加载

起因,想给文章插入的 img 图片添加 loading='lazy',果然有爱折腾的,看(这里),官方说明 #render-hook-templates,Hugo v0.62+

简单说能对md内的链接(link)和图像(image)自定义渲染,比如实现以上需求,只需在主题新建 layouts/_default/_markup/render-image.html

Hugo Theme Webstack

效果预览:https://edui.fun/

仓库下载:https://github.com/lmm214/hugo-theme-webstack

Valine 懒加载

博客都已静态,想再提速,要么换国内云服,要么优化一个个 JS 加载。立竿见影办法是使用 CDN 来加载,或者前端延迟加载,甚者后端判断按需加载。

在需要加载的一串 JS 里,找来找去,Valine 这货最强大 💪

47.5KB --> https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js
75KB   --> https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js
6.4KB  --> https://js.fundebug.cn/fundebug.1.9.0.min.js

撸起袖子,月干!

Hello Hugo

哈喽,🐯🐶!(开机声~)

hugo-2

主站顺利切换到 Hugo ,直接在 Github Web 端码字,或者本地码好拖进去,自动更新,自动部署,舒心!

就待它的 Github APP 端支持编辑代码咯!