Dream主题配置详解 @ Wings            分类 软件
发布于 星期一, 十月 19 日, 2020 年
更新于 星期二, 七月 20 日, 2021 年

Hugo主题Dream配置及魔改注释笔记

结构

archetypes	# 模板 存放不同的头模板
data		# 数据 目前里面存放的是一些关于日期的翻译
docs		# Dream主题的帮助文档
exampleSite	# Dream主题的样例
i18n		# 翻译文件
images		# Dream作者放的图片(不是放写文章的图片的地方)
layouts		# HTML布局 博客的框架
netlifyCMS	# 一个内容管理器?
src 		# 作者写的js等源代码
static		# 静态文件, js, css, img等
.editorconfig	# 不知道
.prettierrc	# 不知道
gulpfile.js	# 不知道
package.json 	# 不知道
theme.toml 	# Hugo主题的配置文件
yarn.lock 	# 不知道

使用方法

./themes/hugo-theme-dream/exampleSite/config.toml复制到./下并替换原来的

编辑config.toml即可

config.toml 详解

baseurl = "https://example.com"		# 博客地址
languageCode = "en"					# 语言
defaultContentLanguage = "en"		# i18n 配置
title = "Hugo Theme Dream"			# 标题
theme = "hugo-theme-dream"			# 主题

copyright = ""						# 版权说明

googleAnalytics = ""				# 谷歌分析

disqusShortname = ""				# disqus评论

enableRobotsTXT = true				# ?

[params]
  background = "black"				# 背景(图片)
  backgroundImage = "/me/background.jpg"
  linkColor = "seagreen"			# 链接颜色

  author = "Yue Yang"				# 博客作者
  description = ""					# 作者简介
  avatar = "/img/avatar.jpg"		# 头像
  motto = "Motto"					# 签名
  categoriesLimitInHeader = 6		# Header的目录数量限制
  headerBottomText = ""				# Header底部的文字

  rss = false						# rss

  utterancesRepo = ""				# 一个评论方式, 还需学习

  valine = false					# 另一个评论方式, 还需学习
  LEANCLOUD_APP_ID = ""
  LEANCLOUD_APP_KEY = ""

  email = "g1enyy0ung@gmail.com"	# 联系方式, 会显示在Header上和反面
  twitter = ""
  facebook = ""
  instagram = ""
  mastodon = ""
  linkedin = ""
  github = ""
  stackoverflow = ""
  codepen = ""

  siteStartYear = 2016				# 网站起始时间

  favicon = "/favicon.ico"			# 网页图片, 放在./static 里

  highlightjs = true				# 高亮设置
  highlightjsCDN = "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"		# 高亮js地址
  highlightjsExtraLanguages = ["ocaml"]		# 其他语言高亮支持设置
  highlightjsTheme = "gruvbox-light"		# 亮色主题下的高亮主题
  highlightjsThemeDark = "gruvbox-dark"		# 暗色主题下的高亮主题

  # search
  enableSearch = true				# 搜索功能

  # options
  showSummaryCoverInPost = true		# 显示封面
  hasTwitterEmbed = true			# 推特的东西, 我又不搞推特, 就不学了

  # dark mode						# 暗色模式下的一些东西, 可以不用管他
  darkLinkColor = "darkseagreen"
  darkNav = true
  dark404 = true

新增内容

basic

hasCJKLanguage = true				# 开启可以统计汉字的字数

params

[params]
	images = [""]					# OG ? 还需学习

outputs

[outputs]
  home = ["HTML", "RSS", "JSON"]	# 搜索功能需要添加JSON

自定义其他内容

要自定义的东西都复制到根目录下对应的地方, 在此处修改. 根目录下的文件优先级高于主题文件夹里的

头模板

直接放我修改过的内容


---
title: {{ replace .TranslationBaseName "-" " " | title }}
date: {{ .Date }}
lastmod: {{ .Date }}
author: Wings
authorlink: {{ .Site.BaseURL }}
cover: /img/{{ .TranslationBaseName }}/cover.jpg
categories:
  - category1
tags:
  - tag1
  - tag2
draft: true
---

这里写概述, 会显示在首页上

<!--more-->

这里写正文

添加MathJax

见博文

修改/添加默认封面

打开./layouts/_default/summary.html

找到第6行(下面是已经修改过的)

<img src="/img/default-cover/{{ index (shuffle (seq 1 14)) 0 }}.jpg" alt="{{ .Title }}" />

img src 后面写图片, 其中 {{ index (shuffle (seq 1 14)) 0 }} 是一个函数, 返回的是1到14的随机数.

如需要添加图片, 则需要修改图片名称为序号, 然后修改这个函数的参数.

修改透明度

打开 ./static/css/semantic.min.css

找到 ui.segment 如下:

.ui.segment {
     position: relative;
     background: rgba(255,255,255,0.5);
     -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
     box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
     margin: 1rem 0;
     padding: 1em 1em;
     border-radius: .28571429rem;
     border: 1px solid rgba(34, 36, 38, .15)
 }

其中 background 就是底色了, 用 rgba() 修改透明度即可.

但是博文卡片底色不会修改, 修改卡片需要找到 .ui.card, .ui.cards>.card 如下

.ui.card, .ui.cards>.card {
     max-width: 100%;
     position: relative;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     width: 290px;
     min-height: 0;
     background: #fff;
     padding: 0;
     border: none;
     border-radius: .28571429rem;
     -webkit-box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
     box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
     -webkit-transition: -webkit-box-shadow .1s ease, -webkit-transform .1s ease;
     transition: -webkit-box-shadow .1s ease, -webkit-transform .1s ease;
     transition: box-shadow .1s ease, transform .1s ease;
     transition: box-shadow .1s ease, transform .1s ease, -webkit-box-shadow .1s ease, -webkit-transform .1s ease;
     z-index: ''
 }

修改 background 即可

但是上述修改只能针对亮色主题, 暗色主题往下看

找到 .ui.inverted.segment, .ui.primary.inverted.segment 如下

.ui.inverted.segment, .ui.primary.inverted.segment {
   background: rgba(27, 28, 29, .8);
   color: rgba(255, 255, 255, .9)
 }

其中 background 是底色, 而 color 是上层的文字颜色

修改完这个以后, 暗色的博文卡片颜色也会修改(作者暗色是后来写的, 可能直接把卡片一起写进来了? 反正我不懂)

博客卡片封面透明度也是可以修改滴:

找到 .ui.card>.image>img, .ui.cards>.card>.image>img 如下

 .ui.card>.image>img, .ui.cards>.card>.image>img {
     display: block;
     width: 100%;
     height: auto;
     opacity: .8;
     border-radius: inherit
 }

加入 opacity 即可(上面是已经加了的).

但是高亮代码块没透明…

继续改.

打开 ./layouts/partials/highlight.html, 找到

$('pre').css('background', isDark ? 'rgba(51, 51, 51, 0.7)' : 'rgba(255, 255, 255, 0.4)')

前面一个颜色是暗色背景下的颜色, 后面一个是亮色的.

还有markdown的表格及图片…

打开 ./static/css/github-markdown.css

表格在 .markdown-body table tr.markdown-body table tr:nth-child(2n)

.markdown-body table tr {
  background-color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid #c6cbd1;
}

.markdown-body table tr:nth-child(2n) {
  background-color: rgba(246, 248, 250, 0.6);
}

表格设置 background-color

图片在

.markdown-body img {
  max-width: 100%;
  box-sizing: initial;
  opacity: .9;
  background-color: #fff;
}

图片设置 opacity

修改字体大小

打开 ./static/css/semantic.min.css, 找到 thml 如下

 html {
     font-size: 20px
 }

修改这里的字体就是全局字体了, 其他的字体大小是根据这个字体大小的相对值来计算的.

设置每次打开都是暗色主题

打开 ./static/js/theme.js

直接在头上修改 isDark = "y"

暴力就完事了.

添加友链

见博客

留下昵称和邮箱, 可在第一时间获悉回复通知哦~

2021 FLAG

  • 找个妹子
  • 进计科
  • XCPC拿块金牌
  • 补全算法知识, 整全板子
  • 学会Web开发相关知识
  • 在服务器上搭建电子书库
  • 写个游戏并上线
  • 能弹一首曲子
  • 写首完整的曲子
  • 练习悠悠球

个人简介

我叫 Wings, 来自江西上饶, 目前人在西安, 是西电的一名学生.

常以 WingsWingsZengWingsWings的ID在各大小网站上游走, 一般来说, Wings不是我 😔, WingsZeng 一定是我 😊.

热爱算法, 喜欢钻研各种计算机技术.

业余爱好广泛, 只要不是文化课基本上都感兴趣😏.

开发/项目经历

  1. Android游戏 小墨滴的复仇 (弃坑)
  2. Android游戏 Circle Run (弃坑)
  3. Windows游戏 Snague (可能弃坑了吧)
  4. Python后端 Fathy' (可能弃坑了吧)

to be continued

教育经历

时间 学历 学校
2008-2014 小学 上饶市第十二小学
2014-2017 初中 上饶市第四中学
2017-2020 高中 上饶市第一中学
2020-2024 本科 西安电子科技大学
to be continued

比赛/竞赛经历

太久远太小的记不到了…

  1. 2017 国学竞赛初赛江西 没有分数或排名 二乙
  2. 2018 NOIP提高 258 省二
  3. 2019 CSP-S江西专场 145 省二
  4. 2019 数学竞赛初赛 70 没排名 (复赛打铁qaq)
  5. 2020 Gitee|Python贪吃蛇魔改大赛 可能是第四? 二等奖
  6. 2020 西电ACM训练基地熊猫杯 第四 银牌
  7. 2020 西安三校微软学生俱乐部Hackathon 和二等奖最后一名差0.5分 三等奖
  8. 2020 西电星火杯 三等奖
  9. 2020 西电ACM新生赛 第九 金牌
  10. 2020 ICPC 亚洲区域赛 济南站 132名 铜牌
  11. 2020-2021 第二届全国大学生算法设计与编程挑战赛(冬季赛) 924名 铜牌 (别骂了别骂了)
  12. 2020 ICPC 亚洲区域赛 昆明站 打星
  13. 2020 ICPC Asia-East Continent Final 签完到溜 打铁
  14. 西电"智能星"第一届自动驾驶小车比赛 第五 优胜奖|极速奖 本来可以冠军的别骂了别骂了
  15. 2021团体程序设计天体赛(CCCC) 个人二等奖
  16. 2021 西电 miniL CTF 优胜奖
  17. 2021 西电ACM校赛 第9名 金牌
  18. 2021 西电数模校赛 二等奖
  19. 2021 第15届IEEE 第48名
  20. 2021 CCPC 桂林站 打星

to be continued

爱好

技术

  • 算法
  • 独立游戏开发

游戏

  • Minecraft
  • Black Survival
  • I Wanna
  • Celeste
  • Life is Strange
  • Need for speed

运动

  • 篮球
  • 桌球
  • 乒乓球
  • 羽毛球
  • 慢跑

音乐

  • 吉他
  • 词曲
  • 流行

玩具

  • 魔方
    • 三阶速拧
    • 三阶盲拧
    • 高阶
  • yoyo球

追星

  • VAE
  • Benedict Cumberbatch