博客搭建 on Logan的博客

hugo博客-配置baseUrl的坑

Wed, 10 Apr 2024 00:00:00 +0800

hugo博客配置baseUrl的坑

本地启动

不管配置文件怎么改，默认的baseUrl都为localhost，bind的ip为127.0.0.1;
生成的public里的html中的url都不会是你配置文件里的baseUrl
-D包含草稿

`1`	`hugo server -D`

Copied!

除非在后面加上 –baseURL

`1`	`hugo server -D --baseURL http://www.xxx.com/`

Copied!

启动局域网连接

`1`	`hugo server -D --bind=0.0.0.0 --port=1313`

Copied!

所以本地开发测试时，不需要关心baseUrl，server启动时就一定是localhost

本地或服务器打包

打包时，hugo会严格按照配置文件中的baseUrl创建静态页面，与--environment无关
--gc构建站点时会自动执行垃圾回收;--minify对输出的 HTML、CSS 和 JavaScript 进行压缩和优化

`1`	`hugo -D --gc --minify`

Copied!

服务器多环境打包

我的博客，同一套代码在github pages和vercel上都有部署,分别是不同的域名，所以就需要区分两个环境的baseUrl,我是这样做的：

把原本的hugo.yaml当作是vercel 的配置，复制原本的配置为hugo-git.yaml当作github pages的配置
两个文件只有baseUrl不同
在启动Hugo打包的时候，需要加具体的配置文件名参数

1
2

hugo -D --gc --minify --config hugo.yaml # 在vercel上使用，默认为vercel
hugo -D --gc --minify --config hugo-git.yaml #在github action中使用

Copied!

图片相关模板

Sat, 20 Apr 2024 00:00:00 +0800

放在同一个目录下的图片，支持PhotoSwipe图册

图片自动在一个图册里,默认需要 回车 或者其他元素，改动gallery.ts，注释if (!isNewLineImage) continue; Photo by mymind and Luke Chesser on Unsplash

网络链接支持PhotoSwipe图册

static目录支持PhotoSwipe图册

assets目录支持PhotoSwipe图册

svg不支持PhotoSwipe图册

使用figure短代码引入图片

vh为相对于窗口高度的百分比短代码的页绑定图片和全局图片都可以使用PhotoSwipe图册，网络链接不可以

页绑定图片

全局图片

网络链接

可以写markdown

图片轮播引入全局资源

图片轮播引入网络链接

img标签引入图片

使用imgproc，不能使用网络链接

这是本地图片

用gallery短代码引入网络图片

其他模板

Wed, 10 Apr 2024 00:00:00 +0800

原生代码块

window.addEventListener("onColorSchemeChange", (colorScheme) => {
  yzhanweather.clear() // Stop and clear all animations
  //yzhanweather.destory() // Destory the instance and free up memory
  yzhanweather_fun();
});

Copied!

highlight shortcode 高亮代码

42{{ range .Pages }}
43<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
44{{ end }}

md高亮代码

`1`	`echo "hello"`

Copied!

Gitlab Snippets Shortcode

Github Card

`1`	`\{\{< github title="gohugoio/hugo" >\}\}`

Copied!

Quote Shortcode

Stack adds a quote shortcode. For example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
― A famous person, The book they wrote

bilibilibi Shortcode,1为自动播放，0为手动播放

网易云,1为自动播放，0为手动播放

获取电影数据，打包时需要魔法；把\去掉

{{< neodb “https://neodb.social/book/5SJvkuHNGL4XhBddW2J4EJ" >}} {{< neodb “https://neodb.social/movie/1bgVODaWCBKlCQ1AuGlLzC" >}} {{< neodb “https://neodb.social/tv/season/5es8Us1HHOhVz3UlLmTspr" >}} {{< neodb “https://neodb.social/game/5pvs201VxbkldH4LOEtDVt" >}} {{< neodb “https://neodb.social/podcast/5tlY7lSI0WfXcoHstz7u4S" >}}

测试标题，一级(顶级)

奥斯特洛夫斯基曾经说过，共同的事业，共同的斗争，可以使人们产生忍受一切的力量。而这些并不是完全重要，更加重要的问题是，带着这些问题，我们来审视一下学生会退会

二级

三级

四级

五级

六级

####### 七级没有处理，没有样式奥斯特洛夫斯基曾经说过，共同的事业，共同的斗争，可以使人们产生忍受一切的力量。而这些并不是完全重要，更加重要的问题是，带着这些问题，我们来审视一下学生会退会

时间轴

2023-09-10

聊天气泡

John Doe 2023-09-12 14:30

这是左边的消息内容。

2023-09-12 14:45 Alice

这是右边的消息内容，测试长长长长长长长长长长长长长长长长长长长长长长长长度。

文字渐变色

我挑的配色很好看吧！
好喜欢蓝色（再次）（再次）
但总之换行的话就加个空标签。

文字高斯模糊

一些手动打码效果！
但总之换行的话就加个空标签。

github卡片

内容折叠

用法

在markdown里写下

键盘标签

在 Windows 操作系统中，「复制」功能的快捷键是：CTRL + C

总星数实际星数

卡片

可以在这里插入链接假装是卡片式链接。
好像不能插入图片？
换行需要空标签。实际使用需要双括号。

代码折叠

package com.logan;

import com.alibaba.fastjson.support.spring.GenericFastJsonRedisSerializer;
import io.lettuce.core.ReadFrom;
import org.springframework.boot.autoconfigure.data.redis.LettuceClientConfigurationBuilderCustomizer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.lettuce.LettuceConnectionFactory;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.serializer.RedisSerializer;

/**
 * @author logan
 * @version 1.0
 * @date 2022/5/24
 */
@Configuration
public class RedisConfig {

    /**
     * 配置redis集群的读写分离
     */
    @Bean
    public LettuceClientConfigurationBuilderCustomizer clientConfigurationBuilderCustomizer() {
        return clientConfigurationBuilder -> clientConfigurationBuilder.readFrom(ReadFrom.REPLICA_PREFERRED);
    }

    /**
     * 集群客户端是不支持多数据库db的，只有一个数据库默认是SELECT 0;
     */
    @Bean
    public RedisTemplate customRedisTemplate(LettuceConnectionFactory lettuceConnectionFactory) {
        //创建新的redisTemplate
        RedisTemplate<String, Object> redisTemplate = new RedisTemplate<>();
        //设置key序列化
        redisTemplate.setKeySerializer(RedisSerializer.string());
        redisTemplate.setHashKeySerializer(RedisSerializer.string());
        //设置value序列化
        redisTemplate.setValueSerializer(new GenericFastJsonRedisSerializer());
//        redisTemplate.setValueSerializer(RedisSerializer.json());
        redisTemplate.setHashValueSerializer(RedisSerializer.json());
        //设置连接工厂
        redisTemplate.setConnectionFactory(lettuceConnectionFactory);
        return redisTemplate;
    }
}

Copied!

卡片链接

hugo-theme-luna

A simple, performance-first, SEO-friendly Hugo theme hugo-theme-luna.

https://github.com/Ice-Hazymoon/hugo-theme-luna

Markdown语法指南

Fri, 10 May 2024 00:00:00 +0800

Markdown语法指南

概述

Markdown 由 Daring Fireball 创建，原始指南在这里。但是，它的语法因不同的解析器或编辑器而异。Typora
正在使用 [GitHub Flavored Markdown][GFM]。

块元素

段落和换行符

在普通文本中/普通段落/引用(quote) 中遵循以下规律;
在代码块或者有序或者无序列表中,一个回车就是换行

语法层面：
1. 使用两个以上空格加上回车
  - 注意某些非markdown的编辑器会自动删除行尾空格，比如使用了 EditorConfig 的, 需要设置:
    1 2
    
    [*.md] # 对所有 md 文件生效 trim_trailing_whitespace = false # 保留行末的空格
    Copied!
2. 也可以在段落后面使用一个空行来表示重新开始一个段落
在Typora中
- 编辑->空格与换行->取消‘保留单换行符’，即严格换行模式
- 您只需按下 Return 即可创建新段落。
- 按 Shift + Return 可创建单个换行符。但是，大多数 markdown 解析器将忽略单行中断，要使其他 markdown 解析器识别您的换行符，可以在行尾留下两个空格，或者插入  .
在Obsidian中
- 使用easy-typing-obsidian 插件，可以保证在普通段落编辑时，每次按回车换行时，生成两个换行符
- 也可以使用在行尾留下两个空格，然后按回车，来手动换行
- 按 Shift + Return 可创建单个换行符，渲染时会变成同一行

标题

标题在行的开头使用1-6个＃字符，对应于标题级别1-6。例如：

# 这是一级标题

## 这是二级标题

###### 这是六级标题

Copied!

在typora中，输入＃后跟标题内容，按下 Return 键将创建标题。

引用文字

Markdown 使用 > 字符进行块引用。在typora中，只需输入’>‘后跟引用内容即可生成块引用。Typora将为您插入正确的“>”或换行符。通过添加额外级别的“>”允许在块引用内嵌入另一个块引用。它们表示为：

> 这是一级缩进  
>> 这是二级缩进  
>>> 这是三级缩进  
> 
>> 再来一个二级缩进  
>>> 再来一个三级缩进  

>> 这是新的块引用

Copied!

效果如下：

这是一级缩进

这是二级缩进

这是三级缩进

再来一个二级缩进

再来一个三级缩进

这是新的块引用

列表

输入 - list item 1 将创建一个无序列表，该 - 符号可以替换为 + 或 *.

输入 1. list item 1 将创建一个有序列表，有序和无序列表都可以缩进, 其 markdown 源代码如下：

#### 无序列表
- 红色
  - 绿色
- 蓝色

#### 有序列表
1. 红色
   1. 绿色
2. 蓝色

Copied!

效果：

无序列表

红色
- 绿色
蓝色

有序列表

红色
1. 绿色
蓝色

任务列表

任务列表是标记为[ ]或[x]（未完成或完成）的项目的列表。例如：

- [ ] 这是一个任务列表项
- [ ] 需要在前面使用列表的语法
- [ ] normal **formatting**, @mentions, #1234 refs
- [ ] 未完成
- [x] 完成

Copied!

效果：

这是一个任务列表项
需要在前面使用列表的语法
normal formatting, @mentions, #1234 refs
未完成
完成

您可以通过单击项目前面的复选框来更改完成/未完成状态。

（栅栏式）代码块

Typora仅支持 Github Flavored Markdown 中的栅栏式代码块。不支持 markdown 中的原始代码块。

使用栅栏式代码块很简单：输入```之后输入一个可选的语言标识符，然后按return键后输入代码，我们将通过语法高亮显示它：

这是一个例子：

```
function test() {
  console.log("notice the blank line before this function?");
}
```

语法高亮：
```javascript
function test() {
  console.log("notice the blank line before this function?");
}
```

Copied!

还可以给代码块设置额外的class、行号是否显示、缩进等

```javascript{class="md-reference-block" lineNos=false tabWidth=2}
function test() {
  console.log("notice the blank line before this function?");
}
```

Copied!

数学公式块

您可以使用 MathJax 渲染 LaTeX 数学表达式。

typora中输入 $$, 然后按“return”键将触发一个接受Tex / LaTex源代码的输入区域。
在 markdown 源文件中，数学公式块是由$$标记包装的 LaTeX 表达式：

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix} 
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$

Copied!

表格

输入 | First Header | Second Header | 并按下 return 键将创建一个包含两列的表。

创建表后，焦点在该表上将弹出一个表格工具栏，您可以在其中调整表格，对齐或删除表格。您还可以使用上下文菜单来复制和添加/删除列/行。

可以跳过以下描述，因为表格的 markdown 源代码是由typora自动生成的。

在 markdown 源代码中，它们看起来像这样：

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

Copied!

效果：

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

您还可以在表格中包括内联 Markdown 语法，例如链接，粗体，斜体或删除线。

最后，通过在标题行中包含冒号：您可以将文本定义为左对齐，右对齐或居中对齐：

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

Copied!

效果：

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

最左侧的冒号表示左对齐的列; 最右侧的冒号表示右对齐的列; 两侧的冒号表示中心对齐的列。

脚注

您可以在任何位置像这样创建脚注，他会显示在文章结尾处：

[^1]: 这是脚注的内容

Copied!

使用脚注：

这是一个需要添加脚注的文本[^1]。

Copied!

效果：
这是一个需要添加脚注的文本¹。

鼠标移动到‘1’上标中查看脚注的内容。

水平线

输入 *** 或 --- 或<hr/>在空行上按 return 键将绘制一条水平线。
效果：

目录 (TOC)

typora中输入 [toc] 然后按 Return 键将创建一个“目录”部分，自动从文档内容中提取所有标题，其内容会自动更新。

缩进

1、图片缩进

1.1 在列表中

列表中某个层级按下回车后，继续按回车直到光标在无缩进的行首，再粘贴图片语句，移动光标到行首，按下tab键调整缩进，经渲染后图片会配合列表自动缩进；
如果是有序列表，直接按回车到行首会影响后面的前标，要不影响的话，可以使用shift+return，然后删除缩进到行首，然后再回车换行，插入语句，回车换行
但是在普通段落中，用tab键调整图片的缩进，是不可行的，必须要和列表配合;
图片的上下必须用空行与列表隔开；

如：

aaaaaa
1. bbbbbb
2. cccccc
3. dddddd
4. eeeeee

1.2 使用css

但是在某些渲染环境中不能正常显示（如github的渲染）

这是图片的标题

2、代码块缩进

2.1 在列表中

列表中某个层级按下回车后，继续按回车直到光标在无缩进的行首，再粘贴代码块语句，选中整个代码块语句，按下tab键调整缩进，经渲染后代码块会配合列表自动缩进；
如果是有序列表，直接按回车到行首会影响后面的前标，要不影响的话，可以使用shift+return，然后删除缩进到行首，然后再回车换行，插入语句，回车换行
但是在普通段落中，用tab键调整代码块的缩进，是不可行的，必须要和列表配合;
代码块的上下必须用空行与列表隔开；

如：

aaaaaa

bbbbbb

cccccc

1
2
3

function calculate(t, i) {  
  return Math.random() * (i - t) + t  
}

Copied!

dddddd
eeeeee

2.2 使用css

与图片用css缩进类似，在某些渲染环境中不能正常显示（如github的渲染）


function calculate(t, i) {  
  return Math.random() * (i - t) + t  
}

行元素

在您输入后行元素会被立即解析并呈现。在这些span元素上移动光标会将这些元素扩展为markdown源代码。以下将解释这些span元素的语法。

链接

Markdown 支持两种类型的链接：内联和引用。

在这两种样式中，链接文本都写在[方括号]内。

要创建内联链接，请在链接文本的结束方括号后立即使用一组常规括号。在常规括号内，输入URL地址，以及可选的用引号括起来的链接标题。例如：

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

Copied!

效果：

This is an example inline link.

This link has no title attribute.

内部链接

您可以将常规括号内的 href 设置为文档内的某一个标题，这将创建一个书签，允许您在单击后跳转到该部分。
typora中需要Command(在Windows上：Ctrl) + 单击将跳转到标题 块元素处。

[内部跳转](#脚注)
[外部跳转](/articles/with-hugo/page-a#title_a)

Copied!

效果：
内部跳转
 外部跳转

链接引用

这种方法使得你可以在文档中的多个地方引用同一个链接，而不需要重复输入链接的地址和标题。
在文档中的任何位置,创建一个链接引用：

[bd]: https://www.baidu.com	"百度搜索"

Copied!

使用方式：

这是一个[百度][bd]链接。

Copied!

效果：
这是一个百度链接。

隐式链接名称快捷方式允许您省略链接的名称，在这种情况下，链接文本本身将用作名称：

创建：

[Google]: https://www.google.com

效果：

这是一个[Google][]链接。

Copied!

效果：

这是一个Google 链接。

URL网址

Typora允许您将 URL 作为链接插入，用 <括号括起来>。

<i@typora.io> 成为 i@typora.io .

Typora也将自动链接标准URL。例如： www.google.com .

图片

图像与链接类似，但在链接语法之前需要添加额外的 ! 字符。图像语法如下所示：

![替代文字](/path/to/img.jpg)

![替代文字](/path/to/img.jpg "可选标题")

Copied!

在typora中您可以使用拖放操作从图像文件或浏览器来插入图像。并通过单击图像修改 markdown 源代码。如果图像在拖放时与当前编辑文档位于同一目录或子目录中，则将使用相对路径。

强调（斜体）

Markdown 将星号 (*) 和下划线(_) 视为强调的指示。用一个 * or _ 包裹文本将使用HTML  标签包裹文本。用两个 * or _ 包裹文本将使用HTML  标签包裹文本。

1
2
3

<em> 元素用于表示强调文本，通常以斜体样式显示。它的语义意义是“强调”或“重点”，而不是特定的样式。浏览器默认会以斜体显示 <em> 元素的内容，但是它的确切样式取决于 CSS 样式表中的定义。

<strong> 元素用于表示重要文本，通常以加粗样式显示。它的语义意义是“重要”，而不是特定的样式。浏览器默认会以加粗显示 <strong> 元素的内容，但是它的确切样式同样取决于 CSS 样式表中的定义。

Copied!

例如：

*一个星号*

_一个下划线_

**两个星号**

__两个下划线__

Copied!

效果：

一个星号

一个下划线

两个星号

两个下划线

块引用中将忽略单词中的下划线，这通常用在代码和名称中，如下所示：

wow__great__stuff

do__this__and_do__that__and_another_thing.

要在用作强调分隔符的位置生成文字星号或下划线，可以用反斜杠转义：

**这个文字被文字星号包围**

推荐使用*

代码

要指示代码范围，请使用反引号（`）进行包裹。与预格式化的代码块不同，代码跨度表示正常段落中的代码。例如：

aa`bb`cc

Copied!

效果：

aabbcc

删除线

GFM通过添加语法来创建删除线文本，标准的Markdown中缺少该功能。

~~错误的文字。~~ 变成 ~~错误的文字。~~

下划线

下划线由原始HTML提供支持。

下划线 变成下划线

表情符号 :smile:

输入表情符号的语法是 :smile:
在typora中，用户可以通过 ESC 按键触发表情符号的自动完成建议，或者在偏好设置面板里启用后自动触发表情符号。此外，还支持直接从 Edit -> Emoji & Symbols 菜单栏输入UTF8表情符号字符。

内联数学公式

在typora中，要使用此功能，首先，请在 偏好设置 面板 -> Markdown扩展语法 选项卡中启用它。然后使用 $ 来包裹TeX命令，例如： $\lim_{x \to \infty} \exp(-x) = 0$ 将呈现为LaTeX命令。

要触发内联公式的预览提示功能：输入“$”, 然后按 ESC 键, 然后输入TeX命令, 预览工具提示将如下所示：

下标

在typora中，要使用此功能，首先，请在 偏好设置 面板 -> Markdown扩展语法 选项卡中启用它。然后用 ~ 来包裹下标内容，例如： H~2~O, X~long\ text~Y

效果:

H2O X~~long\ text~~Y

上标

在typora中，要使用此功能，首先，请在 偏好设置 面板 -> Markdown扩展语法 选项卡中启用它。然后用 ^ 来包裹上标内容，例如： X^2^。

效果:

X^2^

高亮

在typora中，要使用此功能，首先，请在 偏好设置 面板 -> Markdown扩展语法 选项卡中启用它。然后用 == 来包裹高亮内容，例如： ==highlight==。

效果:

==highlight==

HTML

您可以使用HTML来设置纯 Markdown 不支持的内容，例如， this text is red 用于添加红色文本。

嵌入内容

有些网站提供基于iframe的嵌入代码，您也可以将其粘贴到Markdown中，例如：

<iframe height='265' scrolling='no' title='Fancy Animated SVG Menu' src='http://codepen.io/jeangontijo/embed/OxVywj/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

Copied!

视频

您可以使用 <video> HTML标记嵌入视频，例如：

<video src="xxx.mp4" />

Copied!

其他 HTML 支持

你可以在这里找到细节。

这是脚注的内容 ↩︎

A页面

Wed, 09 Apr 2008 00:00:00 +0800

A页面-包含B页面的超链接

点击查看另一个Markdown文件

title_a

text

B页面

Wed, 09 Apr 2008 00:00:00 +0800

B页面-包含A页面的超链接

点击查看另一个Markdown文件

title_b

text

博客搭建 on Logan的博客

hugo博客-配置baseUrl的坑

hugo博客 配置baseUrl的坑

本地启动

除非在后面加上 –baseURL

启动局域网连接

本地或服务器打包

服务器多环境打包

图片相关模板

放在同一个目录下的图片，支持PhotoSwipe图册

网络链接支持PhotoSwipe图册

static目录支持PhotoSwipe图册

assets目录支持PhotoSwipe图册

svg不支持PhotoSwipe图册

使用figure短代码引入图片

页绑定图片

全局图片

网络链接

可以写markdown

图片轮播 引入全局资源

图片轮播引入网络链接

img标签 引入图片

使用imgproc，不能使用网络链接

用gallery短代码引入网络图片

其他模板

原生代码块

highlight shortcode 高亮代码

md高亮代码

Gitlab Snippets Shortcode

Github Card

Quote Shortcode

bilibilibi Shortcode,1为自动播放，0为手动播放

网易云,1为自动播放，0为手动播放

获取电影数据，打包时需要魔法；把\去掉

测试标题，一级(顶级)

二级

二级

三级

三级

四级

四级

五级

五级

六级

时间轴

聊天气泡

文字渐变色

文字高斯模糊

github卡片

内容折叠

键盘标签

总星数 实际星数

卡片

代码折叠

卡片链接

Markdown语法指南

Markdown语法指南

概述

块元素

段落和换行符

标题

引用文字

列表

无序列表

有序列表

任务列表

（栅栏式）代码块

数学公式块

表格

脚注

水平线

目录 (TOC)

缩进

1、图片缩进

1.1 在列表中

1.2 使用css

2、代码块缩进

2.1 在列表中

2.2 使用css

行元素

hugo博客配置baseUrl的坑

图片轮播引入全局资源

img标签引入图片

总星数实际星数