返回

博客 | 仓库施工手册(扫盲进行时)

学混了!有点哭笑不得,但不管怎样还是留个记录比较好。

主题:从meme到stack

《仓库施工手册》简称《手册》。《手册》又称《学习串》。


参考


碎碎念

我是在2021年12月04日晚11点左右才开始研究怎么搭个人博客的。这事做起来说实话有点令人发怵,因为我对码是字面意义上的一窍不通,光是想想后面还要做些什么我都觉得一片灰暗,啥也不懂着实不安!好在我看的那篇教程写得好,我花一两个小时照葫芦画瓢也能画出个样来。在5号凌晨1点前后,博客已经搭好了。

前期准备工作并不多,主要是注册github,下载Hugo、Git、Github Desktop、VScode,然后注册Vercel等。从理论上来说,这个过程可以更快,因为在我花的那一两个小时里,光在注册Vercel一步上卡的时间就有十来二十分钟。

我一开始用的是meme主题,后来发现stack更好看,于是醒来后毅然决然地把主题换了。同时也因为换了主题,装修难度发生了超级无敌加倍(后来我发现,这得怪我当时不会善用搜索——看看我后来是怎么在《日志》里堆了这么多经验贴的)!我捣鼓了一下午才把首页修得差不多(此处附带一张第二次大装修后的个站首页):

左栏虽然捣鼓出来了,但顺序也仍需调整——Rss订阅栏应该放在最后才对。about、archives和search页我是直接从exampleSite里复制粘贴到根目录下的\content\里的,这可比修改config要更方便……而且也没有出问题。


tips

根目录与其他目录

根目录指的是\hugo\
根目录底下值得注意的是这两个文件夹:\content\和\themes\,以及一个叫config的文件。
所有博文都存在\content\post里。
网站的装修主要靠根目录下的config,有些主题还能点进\hugo\themes里慢慢深入动工。

写博客

在根目录里右键点击Git Bash Here
输入hugo new posts/文章标题.md
按下回车键
按\hugo\content\posts这个路径打开文件夹,你会发现里面有一个新的Markdown源文件
用Markdown编辑器打开,然后就可以编辑了

侧栏Sidebar

左栏

stack主题的左栏可添加内容有三块:
1.头像,昵称,个人简介;
2.social栏的链接;
3.主页/Home,暗色模式。
第三块可以自由添加新页面(即page)

网站icon

在根目录\hugo底下新建\static\img文件夹
将icon命名为favicon.png,并放入该文件夹内
打开config,查找favicon定位到params底下的那个favicon
修改成favicon: /img/favicon.png

格式设置

写码用的好像是html?如果是html的话,我在往AO3上搬文的时倒是了解过一点。

不,等等,html可以写码,但是我现在修个站用的MarkDown和html是两个不同的东西——

既然如此,那就只能细分标题等级了(沉重),分别列出html和MarkDown。

超链接与插入图片

插入超链接:

准备:
  ·\hugo\content\post目录下的一个Markdown源文件
  ·此时有:链接,链接配字,文章(文件)
执行:
  ·打开文章,[链接配字](链接)
  值得注意的是,](这两个符号要贴在一起才能有反应。

插入图片:

准备:
  ·在\hugo\content\post里新建一个文件夹
  ·放入图片与文章对应的Markdown源文件
  ·此时有:图片(文件);图片名字;图片格式;图片配字;文章(文件);文章名字。
执行:
  ·将文章名字改为index。
  ·打开文章,![图片配字](图片名字.图片格式)

首行缩进,空格,空行

  • 半角的空格(英文下使用):  
  • 全角的空格(中文下使用):  
  • 不换行空格:  

  以上每个表示一个空格,中文缩进两字符一般常用  你的内容即可 //效果是[空格][空格]你的内容

注意(解释是从网上复制粘贴来的):
- 英文分号;不能漏掉。
- ensp=En Space。它叫“半角空格”,全称是En Space,en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性:透明的,此空格有个相当稳健的特性,就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。
- emsp=Em Space。它叫“全角空格”,全称是Em Space,em是字体排印学的计量单位,相当于当前指定的点数。例如,1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性:透明的,此空格也有个相当稳健的特性,就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。
- nbsp=Non-Breaking Space。它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加,该空格占据宽度受字体影响明显而强烈。
- thinsp=Thin Space。它叫窄空格,全称是Thin Space。我们不妨称之为“瘦弱空格”,就是该空格长得比较瘦弱,身体单薄,占据的宽度比较小。它是em之六分之一宽。
- zwnj=Zero Width Non Joiner。它叫零宽不连字,全称是Zero Width Non Joiner,简称“ZWNJ”,是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”(zero width non-joiner,U+200C),HTML字符值引用为: ‌
- zwj=Zero Width Joiner。它叫零宽连字,全称是Zero Width Joiner,简称“ZWJ”,是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ‍)。

以上是空格的打法。想在前端显示空行的话,要在编辑区的空白行里打 

我原本以为应该可以做到全文默认首行缩进的,但想了想,如果在注释和碎碎念的部分里也进行首行缩进,那也太怪了……遂接受现实,以后发文逐行copy代码。

字体效果

字体效果分别有:粗体,斜体,删除线,下划线,粗斜体

  • html

我从html里学来的:

部分加粗
  <strong><b>加粗部分</b></strong>
全加粗
  <b>加粗部分</b>
  <strong>加粗部分<strong>
斜体
  <em>斜体部分</em>
下划线
  <u>下划线部分</u>
  • MarkDown

MarkDown就是新知识了:

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
~~删除线文本~~

锚点跳转链接

Markdown html:

示例:yz0
一、name
点1跳2
<a href="#yz0">天气真好</a>
↓
<a name="yz0"></a>对啊对啊
      
点2跳1
<a href="#yz0">对啊对啊</a>
↓
<a name="yz0"></a>天气真好
最后更新于 2022-04-27 00:00 CST
.. ... ...
Built with Hugo
Theme Stack designed by Jimmy

本站访客数人次 总访问量 本文阅读量