Helloworld hugo 博客

这是一篇介绍如何编写Hugo博客的文章，让编写文章更加简单。

PaperMod主题

本站基于PaperMod主题修改实现。本文介绍修改后的一些功能。

页面快捷键

全屏模式切换: alt+w键
页面主题切换: alt+z键
页面回到顶部: alt+g键
主页跳转控制: alt+q键
页面刷新控制: alt+r键
sidebar文章切换: alt+x键
sidebar目录切换: alt+c键

提示

所有的快捷键都放在了单独的shortcuts.html中配置，次文件会在 footer.html最后添加。希望定义属于自己的快捷键可以在shortcuts.html中进行修改。

shortcode使用

可以看到，上面的tip就是一个shortcode示例。

接下来，我们来看一些更有趣的shortcode示例.

了解全面的shortcodes介绍可以看官网shortcodes，本文不再多说。

TypeIt示例

pythontutor代码可视化

语法高亮

其实Hugo本就支持Markdown的代码高亮功能，但这里的语法高亮是在展示可以用shortcode实现的功能，你可以在这基础上扩展更丰富的可能，这才是 shortcode 的可能性。

使用 shortcode 为 highlight 的Go语言代码高亮显示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// GetTitleFunc 返回一个可用于将字符串转换为标题样式的函数。
//
// 支持的样式有：
//
// - "Go" （使用 strings.Title 函数）
// - "AP" （参见 https://www.apstylebook.com/）
// - "Chicago" （参见 https://www.chicagomanualofstyle.org/home.html）
//
// 如果提供了未知或空样式，将使用 AP 样式。
func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
  default:
    return transform.NewTitleConverter(transform.APStyle)
  }
}

这是使用Markdown的代码段语法显示效果:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// GetTitleFunc 返回一个可用于将字符串转换为标题样式的函数。
//
// 支持的样式有：
//
// - "Go" （使用 strings.Title 函数）
// - "AP" （参见 https://www.apstylebook.com/）
// - "Chicago" （参见 https://www.chicagomanualofstyle.org/home.html）
//
// 如果提供了未知或空样式，将使用 AP 样式。
func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
  default:
    return transform.NewTitleConverter(transform.APStyle)
  }
}

以下是一些主流编程语言的 “Hello, World!” 示例代码：

1. Python:

python

1
print("Hello, World!")

2. JavaScript (Node.js):

javascript

1
console.log("Hello, World!");

3. Java:

java

1
2
3
4
5
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

4. C:

1
2
3
4
5
6
#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}

5. C++:

cpp

1
2
3
4
5
6
#include <iostream>

int main() {
    std::cout << "Hello, World!" << std::endl;
    return 0;
}

6. Ruby:

ruby

1
puts "Hello, World!"

7. Swift:

swift

1
print("Hello, World!")

8. Go:

1
2
3
4
5
6
7
package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

9. Rust:

rust

1
2
3
fn main() {
    println!("Hello, World!");
}

10. Kotlin:

kotlin

1
2
3
fun main() {
    println("Hello, World!")
}

这只是一小部分编程语言的示例，实际上还有很多其他语言。

代码片段shortcode

下面时gist分享的一个网络优化配置 sysctl.conf 文件内容:

asciinema代码演示示例:

emgithub 与gist效果相似，但导入代码为 github 文件.

视频shortcode

bilibili示例:

youku短代码示例:

图片类型shortcode

figure示例

InTextImg示例: 这是一个简单的示例。

**InTextImg**示例: 这是一个简单的示例。支持“标准”Markdown / CommonMark和Github风格的语法，也可变身为代码编辑器；支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；

gallery示例:

chart图表

Github示例

switchToLinux/one4all

a Linux “one for all” script tools to install/config what you want to

Shell

解决无法引用公众号图片的方法

方法很简单，只需要在<header>标签中加入如下代码:

html

1
2
<meta name="renderer" content="webkit">
<meta name="referrer" content="never">

这样就可以引用公众号图片了。

其他文本示例

一段abbr缩写示例:

HL 是一个缩写abbr短代码示例，鼠标悬浮在HL上就可以看到全称信息。

collapse示例:

折叠文本

折叠文本示例

markdown语法示例

主要特性

支持“标准”Markdown / CommonMark和Github风格的语法，也可变身为代码编辑器；
支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
支持ToC（Table of Contents）、Emoji表情、Task lists、@链接等Markdown扩展语法；
支持TeX科学公式（基于KaTeX）、流程图 Flowchart 和时序图 Sequence Diagram;
支持识别和解析HTML标签，并且支持自定义过滤标签解析，具有可靠的安全性和几乎无限的扩展性；
支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
兼容主流的浏览器（IE8+）和Zepto.js，且支持iPad等平板设备；
支持自定义主题样式；

Editor.md模板

markdown

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
# Heading 1 link [Heading link](https://github.com/pandao/editor.md "Heading link")
## Heading 2 link [Heading link](https://github.com/pandao/editor.md "Heading link")
### Heading 3 link [Heading link](https://github.com/pandao/editor.md "Heading link")
#### Heading 4 link [Heading link](https://github.com/pandao/editor.md "Heading link") Heading link [Heading link](https://github.com/pandao/editor.md "Heading link")
##### Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link")
###### Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link")
#### 标题（用底线的形式）Heading (underline)


This is an H1
=============

This is an H2
-------------

字符效果和横线等

~~删除线~~ 删除线（开启识别HTML标签时） 斜体字 斜体字 粗体粗体 粗斜体 粗斜体

上标：X2，下标：O2

缩写(同HTML的abbr标签)

即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启

The HTML specification is maintained by the W3C.

引用 Blockquotes

引用文本 Blockquotes

引用的行内混合 Blockquotes

引用：如果想要插入空白换行即<br />标签，在插入处先键入两个以上的空格然后回车即可，普通链接。

锚点与链接 Links

普通链接

普通链接带标题

直接链接：https://github.com

锚点链接

GFM a-tail link @pandao

@pandao

多语言代码高亮

行内代码

执行命令：npm install marked

缩进风格

即缩进四个空格，也做为实现类似<pre>预格式化文本(Preformatted Text)的功能。

<?php
    echo "Hello world!";
?>

预格式化文本：

| First Header | Second Header |
| ------------ | ------------- |
| Content Cell | Content Cell  |
| Content Cell | Content Cell  |

JS代码　

javascript

1
2
3
function test(){
	console.log("Hello world!");
}

HTML代码

html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
    <head>
        <mate charest="utf-8" />
        <title>Hello world!</title>
    </head>
    <body>
        <h1>Hello world!</h1>
    </body>
</html>

图片 Images

Image:

![](https://pandao.github.io/editor.md/examples/images/4.jpg)

Follow your heart.

![](https://pandao.github.io/editor.md/examples/images/8.jpg)

图为：厦门白城沙滩

图片加链接 (Image + Link)：

[![](https://pandao.github.io/editor.md/examples/images/7.jpg)](https://www.learnhard.cn/)

图为：李健首张专辑《似水流年》封面

列表 Lists

无序列表（减号）Unordered Lists (-)

列表一
列表二
列表三

无序列表（星号）Unordered Lists (*)

列表一
列表二
列表三

无序列表（加号和嵌套）Unordered Lists (+)

列表一
列表二
- 列表二-1
- 列表二-2
- 列表二-3
列表三
- 列表一
- 列表二
- 列表三

有序列表 Ordered Lists (-)

第一行
第二行
第三行

GFM task list

GFM task list 1
GFM task list 2
GFM task list 3
- GFM task list 3-1
- GFM task list 3-2
- GFM task list 3-3
GFM task list 4
- GFM task list 4-1
- GFM task list 4-2

绘制表格 Tables

项目	价格	数量
计算机	$1600	5
手机	$12	12
管线	$1	234

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

Function name	Description
`help()`	Display the help window.
`destroy()`	Destroy your computer!

Left-Aligned	Center Aligned	Right Aligned
col 3 is	some wordy text	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Item	Value
Computer	$1600
Phone	$12
Pipe	$1

特殊符号 HTML Entities Codes

X² Y³ ¾ ¼ × ÷ »

18ºC " '

下面是代码：

&copy; &  &uml; &trade; &iexcl; &pound;
&amp; &lt; &gt; &yen; &euro; &reg; &plusmn; &para; &sect; &brvbar; &macr; &laquo; &middot; 

X&sup2; Y&sup3; &frac34; &frac14;  &times;  &divide;   &raquo;

18&ordm;C  &quot;  &apos;

Emoji表情

Blockquotes :star:

GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:

:smiley: @mentions, :smiley: #refs, links, formatting, and tags supported :editormd-logo:;
list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
[ ] :smiley: this is a complete item :smiley:;
[]this is an incomplete item test link :fa-star: @pandao;
[ ]this is an incomplete item :fa-star: :fa-gear:;
- :smiley: this is an incomplete item test link :fa-star: :fa-gear:;
- :smiley: this is :fa-star: :fa-gear: an incomplete item test link;

原始内容:

- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:;
- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
- [x] [ ] :smiley: this is a complete item :smiley:;
- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao; 
- [ ] [ ]this is an incomplete item :fa-star: :fa-gear:;
    - [ ] :smiley: this is an incomplete item [test link](#) :fa-star: :fa-gear:;
    - [ ] :smiley: this is  :fa-star: :fa-gear: an incomplete item [test link](#);

反斜杠 Escape

*literal asterisks*

\*literal asterisks\*

水平线

---

rawhtml短代码示例

dotline虚线短代码示例

End

原文作者: 根叔

原始链接: https://www.learnhard.cn/posts/helloworld/

发表时间: 2023-12-25 13:43:54 +0800 CST

PaperMod主题#

页面快捷键#

shortcode使用#

TypeIt示例#

pythontutor代码可视化#

语法高亮#

1. Python:#

2. JavaScript (Node.js):#

3. Java:#

4. C:#

5. C++:#

6. Ruby:#

7. Swift:#

8. Go:#

9. Rust:#

10. Kotlin:#

代码片段shortcode#

视频shortcode#

图片类型shortcode#

chart图表#

Github示例#

解决无法引用公众号图片的方法#

其他文本示例#

markdown语法示例#

主要特性#

Editor.md模板#

字符效果和横线等#

引用 Blockquotes#

锚点与链接 Links#

多语言代码高亮#

行内代码#

缩进风格#

JS代码 #

HTML代码#

图片 Images#

列表 Lists#

无序列表（减号）Unordered Lists (-)#

无序列表（星号）Unordered Lists (*)#

无序列表（加号和嵌套）Unordered Lists (+)#

有序列表 Ordered Lists (-)#

GFM task list#

绘制表格 Tables#

特殊符号 HTML Entities Codes#

Emoji表情#

GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:#

反斜杠 Escape#

水平线#

End#