Hugo 使用 Jane 主题常用的一些配置

Hugo 下的 Jane 主题是基于 even 主题进行的重新改造,主要有以下特色: 响应式设计 多国语言支持 支持多个 Shortcode 单独设计的标签页和分类页 支持社交网站链接 优秀的分页、目录、注脚样式 使用更快的 Chroma 代码高亮 自定义 css、js、head 支持子目录 搜索引擎优化 初始化的样式展示的元素繁多可能不太符合每个人的实际需求,我们需要对需要显示的内容样式进行修改来增强站点整体的美感。下面就介绍如何改靠自己的独特主题: 默认情况下生成的站点部署后我我们会发现在手机上点按菜单位置无效,无法正常显示下拉菜单。我们可以按照下面的方法让菜单能在移动端正常显示。 Jane 主题移动端无法显示下拉菜单的解决方法 themes\jane\layouts\partials\scripts.html #根据路径找到这个文件,删除其中的 integrity 属性 <script type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}" crossorigin="anonymous"></script> 另外现在人们通过 RSS 客户端阅读的方式已经越来越少,Jane 主题内的 RSS 订阅图标我个人觉得太过多余不符合我追求简洁的审美观,所以也要对它进行隐藏处理。具体处理方法如下: Jane 主题底部 RSS 订阅图标删除 ./layouts/partials/social_links.html #在 themes 文件夹下根据路径找到这个文件,删除以下代码 <!-- {{/* RSS icon */}} {{ with .Site.GetPage "home" -}} {{- with .OutputFormats.Get "RSS" -}} <a href="{{ .Permalink }}" rel="noopener {{ .Rel }}" type="{{ .MediaType.Type }}" class="iconfont" title="rss" target="_blank"> {{ partial "svg/rss.svg" }} </a> {{ end -}} {{- end -}} --> 其它需要设置的细节内容过多,而且过于简单,下面统一做个总结: ...

April 21, 2022

利用 Hugo 搭建 Blog

Hugo 是一个用 Go 语言编写的开源静态网站生成器,只需几秒钟即可生成一个网站,被认为是目前世界上最快的网站构建框架(本站的搭建就是基于 Hugo)。下面就介绍如何利用 Hugo 建立自己的独立 Blog。 本方案需具备以下条件: 一台拥有 80 端口权限的 Linux 服务器或 VPS。(本教程是基于 Rocky Linux 操作系统的 VPS) 拥有一个域名并解析到目标服务器IP。 大致步骤: 本地电脑利用 Hugo 生成静态网站。 利用 Git(一个开源分布式版本控制工具)将本地生成的网站部署到服务器。 服务器上使用 Nginx(一个异步框架的网页服务器)为网站提供代理服务。 使用 Let’s Encrypt 的 TSL 证书为网页传输提供加密特性。 安装 Git 本地下载安装 Git 并设置环境变量 安装 Hugo 本地下载安装 Hugo 利用 Hugo 创建一个新站点 终端下执行如下代码: hugo new site sitename #其中 sitename 为站点文件夹名。 这样就在当前目录下生成一个名叫 “sitename” 的初始站点文件夹。 进入站点目录: cd sitename 你会看到站点目录结构: - archetypes - content - data - layouts - public - resources - static - themes * config.toml 添加主题 cd themes git clone https://github.com/xianmin/hugo-theme-jane.git --depth=1 themes/jane 复制示例文件到站点内容目录: ...

April 20, 2022