郑六科技工作室

玩命手搓<完成度97%>的赛博世界

0%

公告

发表于： 更新于：

本人作为新时代中国特色社会主义新中年，始终坚持奉行社会主义核心价值观：

富强、民主、文明、和谐；自由、平等、公正、法治；爱国、敬业、诚信、友善

由于本站部分内容可能为爬虫获取、非站长原创，如发现本站涉及违法侵权的相关内容，请及时联系站长第一时间删除并道歉。

发表于： 分类于：
本文所写皆为Windows下VSCode的使用方法。 1. 安装 访问 Visual Studio Code 下载对应系统版本并安装。 安装完默认界面语言是英语，按Ctrl+Shift

发表于： 分类于：
1. 原理 Git是一个基于快照的分布式版本控制系统，通常用于代码版本控制。 在使用上需了解工作区、暂存区、本地仓库、远程仓库，尤其是分支的概念。 工

发表于： 分类于：
1. 标题 1 2 3 4 5 6 # 1级标题 ## 2级标题 ### 3级标题 #### 4级标题 ##### 5级标题 ###### 6级标题 效果： 1级标题 2级标题 3级标题 4级标题 5级标题 6级标题 2. 字体 1

发表于： 分类于：

1. 快速上手

  1. 下载 Hugo 对应系统版本并安装。

Windows

将hugo.exe放到任意目录，并将该目录添加到系统-高级系统设置-环境变量

Linux

将hugo放到/usr/local/bin下

Mac

通过homebrew安装

1

brew install hugo

检查安装是否成功

1
2

hugo help
hugo version
  1. 创建新站点
1

hugo new site quickstart
  1. 添加主题
1
2
3
4

cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo theme = \"ananke\" >> config.toml
  1. 添加内容
1

hugo new posts/my-first-post.md
  1. 启动服务器
1

hugo server

如果需要外部访问，执行命令时指定绑定IP：0.0.0.0

1

hugo server --bind="0.0.0.0"
  1. 访问 http://localhost:1313/

2. 配置

2.1. .toml和.yml

学习配置之前必须掌握toml和yaml的用法，以免遇到不必要的报错。

TOML详细用法查看 TOML教程

YAML详细用法查看 YAML教程

3. 部署

GitHub Pages的部署方法请参考 道破——GitHub Pages

4. 主题

官方文档中用例是 Ananke 。

如果不喜欢这款主题，可以去 Hugo Themes 挑选一款最近仍在更新的主题。

一定要注意主题作者提供的使用文档，我在试了几个主题之后，发现需要修改太多以前写作的md文本Front-matter，如果不按照作者提供的关键字修改， 服务根本跑不起来，所以我选择了从Hexo-NexT移植的 hugo-theme-next 主题，可以参考作者提供的文档进行配置。

4.1. NexT快速上手

1
2
3
4
5
6
7

hugo new site hugo-next-example
cd hugo-next-example
git init
git submodule add https://github.com/hugo-next/hugo-theme-next.git themes/hugo-theme-next
cp -r themes/hugo-theme-next/exampleSite/* .
rm -rf config.toml
hugo server

执行完以上命令后，访问 http://localhost:1313/

后续更新主题只需要在你的站点目录中，执行如下命令：

1
2

cd hugo-next-example
git submodule update --remote

作者非常贴心，把已实现的和计划实现的功能配置都写在config.yml中了，注释直观清晰，有需要的功能直接改。

4.2. 创建新篇

使用Hugo快速创建新篇。

1

hugo new posts/hello-world.md

关于文章头部那些参数作用的说明参考如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

---
# 文章标题
title: ""
# 文章内容摘要
description: ""
# 文章内容关键字
keywords: ""
# 发表日期
date:
# 最后修改日期
lastmod:
# 分类
categories:
 -
# 标签
tags:
  -
  -

# 原文作者
#author:
# 原文链接
#link:
# 图片链接，用在open graph和twitter卡片上
#imgs:
# 在首页展开内容
#expand: true
# 外部链接地址，访问时直接跳转
#extlink:
# 在当前页面开启或关闭评论功能
#comment:
# enable: false
# 开启文章目录功能
#toc: false
# 绝对访问路径
#url: "{{ lower .Name }}.html"
# 开启文章置顶，数字越小越靠前
#weight: 1
---

4.3. 主题支持语法

4.3.1. 块引用

在引用一些经典名言名句时，可以采用此短语，语法参考如下：

1
2
3
4

{{< quote >}}
  ### block quote
  写下你想表达的话语！
{{< /quote >}}

实际效果：

希望是无所谓有，无所谓无的，这正如地上的路。

其实地上本没有路，走的人多了，也便成了路。

鲁迅

4.3.2. 信息块

支持 default，info，success，warning，danger 等五种不同效果的展示，语法参考如下：

1
2
3
4

{{< note [class] [no-icon] >}}
  书写表达的信息
  支持 Markdown 语法
{{< /note >}}

实际效果：

4.3.3. Default Header without icon

Welcome to Hugo NexT!

4.3.4. Default Header

Welcome to Hugo NexT!

4.3.5. Info Header

Welcome to Hugo NexT!

4.3.6. Success Header

Welcome to Hugo NexT!

4.3.7. Warning Header

Welcome to Hugo NexT!

4.3.8. Danger Header

Welcome to Hugo NexT!

5. Emoji

Emoji 可以通过多种方式在 Hugo 项目中启用。

emojify 方法可以直接在模板中调用, 或者使用 行内 Shortcodes .

要全局使用 emoji, 需要在你的 网站配置 中设置 enableEmoji 为 true， 然后你就可以直接在文章中输入 emoji 的代码。

发表于： 分类于：
1. 开始 1.1. 准备环境 VuePress v2.0.0-beta.49 Nodejs 18.7.0 (npm 8.15.0) Yarn 1.22.19 yrm 1.0.6 下载Nodejs 对应版本并安装。 安装yarn 1 npm install -g yarn --registry=https://registry.npm.taobao.org 安装yrm并指定淘宝源 1 2 3 npm install -g yrm --registry=https://registry.npm.taobao.org yrm ls yrm use taobao