【建站6】装修博客记录

Table of contents


注:博主使用的主题为stack。

官方文档参考: https://stack.jimmycai.com/guide/getting-started

后期博客的改动,一般都是在theme文件夹的\assets\scss里的costum.css文件改动



修改字体

参考教程:

【Hugo之路 番外6】hugo自定义全局字体

补充:

换字体参考网站

中文排版需求

霞鹜文楷

中文文案排版指北


修改背景色及布局

参考教程: 使用 Hugo 对博客的重建与 Stack 主题优化记录

一些配色设计&工具网站:

https://www.happyhues.co/palettes/17

https://www.magicpattern.design/tools/css-backgrounds

https://colorhunt.co/

https://www.color-hex.com/


滚动条样式修改

参考:https://xrg.fj.cn/p/hugo-stack主题更新小记/#主页布局


修改社交icon

用到的网站:

https://feathericons.com/

https://www.svgrepo.com/


修改网站图标

参考文章:  Hugo博客 | stack主题修改第一站 (munlelee.github.io)

我的做法

先在免费图标模板Free logo maker 里找合适的模板,修改好后download,不需要多清晰的

把模板图上传至这个**Favicon Generator**网站 里生成.ico等文件包,下载到

解压后保存在网站根目录 /static/ 文件夹中,重命名为 favicon.ico,修改主题配置文件config.toml

[params]
mainSections = 'post'
featuredImageField = "image"
rssFullContent = true
enableimgloop = true
favicon = "/favicon.ico "

隐藏主页按钮

参考: Hugo|自定义 hugo-theme-Stack (ponder.lol)  

在 /themes/hugo-theme-stack/assets/scss/custom.scss添加

/* 隐藏主页按钮 */
.menu {
li:first-child {
display: none;
}
}

添加相册

参考教程:

Hugo 添加相册页面


添加动画

参考教程:

利用CSS给Blog增加动画


添加打字动画

参考教程:

https://shishuochen.gitee.io/2020/uffick8u1/#8-subtitle打字机显示

我的改法: 在D:\blog\myblog\themes\hugo-theme-stack\layouts的index.html开头贴上

{{ define "main" }}
<!-- index.html or home.html -->
<div id="text">
<p style="font-size: 3rem; text-align: center; font-weight: bold;"></p>   // 设置想打的字的样式,3rem是大小
</div>
<!-- ... other HTML content ... -->
<script>
let divTyping = document.querySelector('#text p');
let i = 0,
timer = 50,  // 修改为适当的时间间隔,以控制打字速度
str = 'Humo sum, humani nihil ame alienum puton.';  // 修改为自己想打的字
function typing() {
  if (i <= str.length) {
    divTyping.innerHTML = str.slice(0, i++) + '_';
    timer = setTimeout(typing, timer);
  } else {
    divTyping.innerHTML = str; // 结束打字,移除 _ 光标
    clearTimeout(timer);
  }
}

typing();
</script>

发现暗色模式下文字不会跟着变色,因此还需要再改

{{ define "main" }}
<!-- index.html or home.html -->
<div id="text">
<p style="font-size: 3rem; text-align: center; font-weight: bold; color: var(--card-text-color-secondary);"></p> <!-- 在这里替换为你想要的颜色变量 -->
</div>
<!-- ... other HTML content ... -->
<script>
let divTyping = document.querySelector('#text p');
let i = 0,
timer = 50,  // 修改为适当的时间间隔,以控制打字速度
str = 'Humo sum, humani nihil ame alienum puton.';  // 修改为自己想打的字

function typing() {
  if (i <= str.length) {
    divTyping.innerHTML = str.slice(0, i++) + '_';
    timer = setTimeout(typing, timer);
  } else {
    divTyping.innerHTML = str; // 结束打字,移除 _ 光标
    clearTimeout(timer);
  }
}

typing();

</script>

添加返回到顶部插件

参考教程:

https://ponder.lol/2023/custom-hugo-theme-stack/#返回顶部按钮


显示/统计文章发布数量

参考教程:

https://thirdshire.com/hugo-stack-renovation/#总字数统计发表了x篇文章共计x字


添加文章加密功能

目前只成功实现一种网页前端加密的方法,不过对我来说够了。

参考天堂错误文件-Loading:《hugo 装修日志 03》 操作后,在要加密的文章头部添加


password: "xxxx"  

password_hint: "xxxxx"

即可对显示的网页加密。


外部链接后显示图标

参考第三夏尔:Hugo stack 主题装修笔记


短代码应用

参考:

Hugo | 在 Stack 主题上可行的短代码们

短代码(Shortcodes)

在博客进行一些实施成功的样式:

文本效果语法

文本折叠

折叠↓实际使用时别忘了换成双括号!

文本模糊

手动打码效果

文本黑幕

数据删除!数据删除!

文本位置

文字居左

文字居中

文字居右

摘录引用

There is no possibility that any perceptible change will happen within our own lifetime. We are the dead. Our only true life is in the future. We shall take part in it ashandfuls of dust and splinters of bone. But how far away that future may be, there is no knowing.

George Orwell 《1984》

插入图片

图1

图1

调整大小:

Alt Text

轮播图功能

前提是准备好图床。

短代码教程参考:

https://www.sleepymoon.cyou/2023/hugo-shortcodes/#图片轮播


neodb引用

参考木木木木木大佬的NeoDB嵌入教程

书籍:

0
A Room of One's Own, based on a lecture given at Girton College, Cambridge, is one of the great feminist polemics, ranging in its themes from Jane Austen and Carlotte Brontë to the silent fate of Shakespeare's gifted (imaginary) sister and the effects of poverty and sexual constraint on female creativity. Virginia Woolf (1882-1941) is regarded as a major 20th century author and essayist, a key figure in literary history as a feminist and modernist, and the centre of 'The Bloomsbury Group'. This informal collective of artists and writers which included Lytton Strachey and Roger Fry, exerted a powerful influence over early twentieth-century British culture. Between 1925 and 1931 Virginia Woolf produced what are now regarded as her finest masterpieces, from Mrs Dalloway (1925) to the poetic and highly experimental novel The Waves (1931). She also maintained an astonishing output of literary criticism, short fiction, journalism and biography, including the playfully subversive Orlando (1928) and A Room of One's Own (1929) a passionate feminist essay. If you enjoyed A Room of One's Own, you might like Woolf's Orlando, also available in Penguin Modern Classics. 'Probably the most influential piece of non-fictional writing by a woman in this century' Hermione Lee, Financial Times
book
影视:
8.9
《戴洛奇小镇》(Deadloch)是由亚马逊出品的澳大利亚犯罪悬疑黑色喜剧电视连续剧,由凯特·麦卡特尼和凯特·麦克伦南创作。 《戴洛奇小镇》以塔斯马尼亚州的一个虚构小镇 Deadloch 为背景,做事严谨的当地高级警长Dulcie Collins正应妻子要求放慢工作节奏,以平衡生活。这时,一具男尸被冲上沙滩,Dulcie又被推回侦探工作中。高级调查员Eddie Redcliffe,从达尔文空降支援这起案件,但她粗鲁不羁的破案行事风格引起了Dulcie的不满。随着死亡人数的不断增多,她们必须化解分歧和矛盾,联手侦破这起目标为顺直白男的连环杀人案。
tv
游戏:
8.8
《弹丸论破 希望的学园与绝望高中生》(日语:ダンガンロンパ 希望の学園と絶望の高校生)是一套由日本游戏开发商Spike(日语:株式会社スパイク)制作,于2010年11月25日开始发售的PlayStation Portable游戏。
game


插入网易云音乐外链

在文章里输入 {< netease XXXXXXXXX 0 >} //歌曲的id;是否自动播放(1为自动播放,0为手动播放),输入时加两个{}

效果:


插入B站视频外链

{< bilibili XXXXXXXXXXX 0 >} //BV号,分p数,0/1为是否自动播放;输入时加两个{}

效果:



魔法区项目

添加Channel.io私信插件

参考: 给 Hugo 加一点好玩的功能


添加ko-fi打赏功能

参考Ko-fi官网 一步步做,链接直接复制在left.html里就行


添加Waline评论

参考:

Waline官方文档

天堂错误文件-Loading hugo 装修日志 02

waline无法登录(vercel.app被污染)

结果:因vercel被墙需要额外解析dns,不魔法好像加载不出来,算了就这样吧。


添加Arititalk说说界面

有些短打和碎碎念就不打算单独在博客里弄成文章发,所以给博客添加一个类似空间说说的分区。

参考Artitalk使用文档

注:

LeanCloud用的是国际版,在自己原来建waline评论区的那个应用里做上述教程就好了,不要单独新建应用,不然后期会出现冲突。

然后参考Loading:《hugo 装修日志 04》

编辑eki.html文件时,国际版的LeanCloud不需要填serverurl

头像要url链接,把图转存到某个图床,然后在LeanCloud设置里添加url。

结果:本地预览模式加载不出,但网页模式可以加载。



暂时就优化到这个地步,发现有些浏览器可能界面显示有差异,但大多数都是正常的。

可以愉快地开启新的赛博魂器地的存档了!


发表了101篇文章 · 总计63.76w字
本博客已稳定运行
载入旅行者一号离地球距离信息...