Hugo Stack 简单美化/配置
前言
本篇文章主要是说说几个我在搭建博客的时候采用的几种美化/配置方式，
如大家有其他需求的话，可以去康康文末几个参考链接
分类部分加上缩略图
在你网站根目录(术语不理解的话看上一篇文章)打开终端/cmd/其他命令行工具，
并输入
hugo new categories/分类名字/_index.md
注意: index前面下划线不能少
然后修改_index.md成下面这种样子
---
title: "分类名"
date: 2022-02-08T01:03:14-05:00
image: 你的图片名(带后缀)
style:
background: "#2a9d8f"
color: "#fff"
---
注意: 请把图片和_index.md放在同一目录里
代码:给你点Color See See
咳咳，关于代码框框着色问题= =
只需要指明代码类型是可以着色的qaq
文本特效
在网站根目录/layouts/partials内新建一个文件夹head
没有的话就不用建哦awa 再建一个
custom.html在其中输入以下代码
<head>
<style>
.blur {
color: transparent;
text-shadow:0px 0px 8px rgba(0,0,0,0.5)
}
.blur:hover {
color: transparent;
text-shadow:0px 0px 0px rgba(0,0,0,1)
}
.shady {
color:#000;
font-weight: bold;
box-shadow: 0px -20px 0px rgba(0,0,0,1) inset;
transition: all 0.3s ease;
}
.shady:hover{
font-weight: bold;
color:#FFF;
box-shadow: 0px -20px 0px rgba(0,0,0,1) inset;
}
</style>
</head>
还有，由于你要在MarkDown中内嵌html代码，你需要修改一下配置文件(网站根目录下的config.yaml)
倒数第7行改为
unsafe: true
高斯模糊
在你的文章中直接输入
<span class="blur">是高斯模糊呐~ </span>
效果:
是高斯模糊呐
黑幕效果
在你的文章中直接输入
<span class="shady">诶嘿嘿，我藏好了哦</span>
效果
诶嘿嘿，我藏好了哦
坑
这样一搞的话回车键/Tab的换行就完蛋了= =, 可以用<br>放在行末尾来换行
<span class="blur">行1 <br>
行2 <br>
行3</span>
效果
行1
行2
行3
还有，你不可以将特效和MarkDown基础/特殊语法叠加使用
## 因为它没用= = 即答)
别打我 逃)
彩色丝带背景
在网站根目录/layouts/partials/footer/下新建一个custom.html
在里面写入如下代码
<script
src="https://cdn.jsdelivr.net/gh/zhixuan2333/[email protected]/js/ribbon.min.js"
integrity="sha384-UEK8ZiP3VgFNP8KnKMKDmd4pAUAOJ59Y2Jo3ED2Z5qKQf6HLHovMxq7Beb9CLPUe"
crossorigin="anonymous"
size="300"
alpha="0.6"
zindex="-1"
defer
></script>
天女散花..?
博客酱页面太单调了？我们来丰富一下它吧
在网站根目录/static/js里新建一个snow.js
(如果没有目录的话自己新建)
snow.js代码
;(function () {
const Config = {
snow: ['❄', '', '※', '⛄', '☃', '🎄', ], // 雪花的样式，可以放不同的雪花，或者任何 emoji，每次生成新雪花时会随机挑选其中一个
color: '#d9e2e7', // 雪的颜色
speed: 10, // 雪花从生成到落到最底端所经历的时间，单位是秒。数字越小落得越快
dom: document.getElementsByTagName('body')[0], // 下雪的区域，可以保持不变，这样就是全屏下雪
interval: 800 // 生成一片雪花的时间间隔，单位是毫秒
}
if (!Config.dom) {
throw Error('错误提示')
}
const $canvas = document.createElement('div')
useStyle($canvas, {
width: '100%',
height: '100%',
position: 'fixed',
top: 0,
left: 0,
pointerEvents: 'none',
zIndex: 100
})
setInterval(() => {
const $snow = document.createElement('div')
$snow.innerText = Config.snow[rand(0, Config.snow.length - 1)]
useStyle($snow, {
display: 'inline-block',
color: Config.color,
fontSize: rand(14, 25) + 'px',
position: 'absolute',
top: 0,
left: rand(0, 100) + '%',
transition: 'transform ' + Config.speed + 's linear' + ',opacity ' + Config.speed + 's linear',
transform: 'translateY(-100%)',
opacity: Math.random() + 0.3
})
setTimeout(() => {
useStyle($snow, {
transform: 'translate(0, ' + getComputedStyle($canvas).height + ') rotate(480deg)',
opacity: 0
})
$snow.addEventListener('transitionend', () => {
$snow.remove()
})
}, 100)
$canvas.appendChild($snow)
}, Config.interval)
function rand (from, to) {
return from + Math.floor(Math.random() * (to - from + 1))
}
function useStyle (dom, style) {
for (let sKey in style) {
dom.style[sKey] = style[sKey]
}
}
Config.dom.appendChild($canvas)
})()
再在网站根目录/layouts/partials/footer/下新建一个custom.html
如果已经有了这个文件可以直接在之前的代码后面追加
在里面写入如下代码
<script src="/js/snow.js"></script>
Linux下搞不了emoji?
最简单的方式Ctrl C V
左侧快捷菜单自定义
修改网站更目录下配置文件config.yaml即可
去到menu这边(176行?)
利用以下格式添加/修改
- identifier: 名字
name: 名字
url: /posts/
### Url里填要跳转的目录，注意这里/表示 网站根目录/content
weight: 300
### weight是一个整数(最好填正数罢)数越大菜单项越在下面
params:
icon: infinity
### icon(图标)位于网站根目录/themes/hugo-theme-stack/assets/icons/，输入不带后缀的文件名，当然你也可以自己添加图标
newTab: false
### newTab为true时点击会打开新标签页