hugo相关内容 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

网站收录

Sat, 09 Apr 2022 00:00:00 +0800

在google搜索页面输入“site:www.xx.com”就可以看到这个网页是否被google索引到，如果没被索引到在搜索结果页面就会直接提示你使用Google Search Console。登录后，如果是首次使用在Search Console中以下界面中选择“网页”类型资源，并将博客完整url填入其中，注意http或者https，www等最好能完全正确。

HTML验证文件上传只需要根据要求，下载HTML验证文件，把文件放在站点根目录的static目录下
HTML标记在config.yaml中加一个配置

1
2

params:
  googleSiteVerification: 'xxx' #写google给的字符串

Copied!

找到themes/meme/layouts/partials/head/custom.html或者head.html，在第一行加入：

`1`	`<meta name="google-site-verification" content="{{.Site.Params.googleSiteVerification}}"/>`

Copied!

然后执行hugo命令，就可以验证了

Google Analytics

先到Google Analytics创建一个账号，并登录。新建一个资源，填完后获得tracking code。更新config.toml文件，配置GoogleAnalytics的id(G-xxxxxxx) 站点地图确认打开，默认都打开了

在左侧点击“站点地图”，并在右侧点添加/测试站点地图，并添加url，

Bing 相似地，在Bing网站管理登陆、添加网站url。

然后在左侧点击“配置我的网站>Sitemaps”，并在右侧加上sitemap的url，点击提交。

测试 https://tagassistant.google.com/

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

hugo相关内容 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卡片

内容折叠

键盘标签

总星数 实际星数

卡片

代码折叠

卡片链接

网站收录

A页面

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

title_a

B页面

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

title_b

hugo博客配置baseUrl的坑

图片轮播引入全局资源

img标签引入图片

总星数实际星数