背景
看到一篇文章零成本搭建现代博客之搭建篇,目前采用的博客方案存在以下不足:
- 目前我博客基于infinity搭建,空间只有5G,时间久了空间不足
- 域名续费,一年成本100+,每年换一个域名太麻烦
安装
- 安装和本地预览博客,参考Hugo官方文档 quick-start
- 我选择的LoveIt主题,下载完成后将blog/themes/LoveIt/exampleSite/config.toml 中的内容覆盖blog/hugo.toml文件中的内容
- 创建blog/static/images目录存放图片,直接相对路径即可使用本地图片,例如:"/images/avatar.jpeg"
主题配置
- 重点介绍我修改的地方
- 主题目录地址
- 博客标题、博客副标题
- 博客logo
- 主页显示头像
- 关掉社交
- hugo.toml完整配置如下,可自行对比
baseURL = "https://xiaoshame.github.io/"
# theme
# 主题
theme = "LoveIt"
# themes directory
# 主题目录
themesDir = "themes"
# website title
# 网站标题
title = "阿松日常"
# determines default content language ["en", "zh-cn", "fr", "pl", ...]
# 设置默认的语言 ["en", "zh-cn", "fr", "pl", ...]
defaultContentLanguage = "zh-cn"
# language code ["en", "zh-CN", "fr", "pl", ...]
# 网站语言, 仅在这里 CN 大写 ["en", "zh-CN", "fr", "pl", ...]
languageCode = "zh-CN"
# language name ["English", "简体中文", "Français", "Polski", ...]
# 语言名称 ["English", "简体中文", "Français", "Polski", ...]
languageName = "简体中文"
# whether to include Chinese/Japanese/Korean
# 是否包括中日韩文字
hasCJKLanguage = true
summaryLength = 200
# default amount of posts in each pages
# 默认每页列表显示的文章数目
paginate = 10
# copyright description used only for seo schema
# 版权描述,仅仅用于 SEO
copyright = "CC BY-NC 4.0"
# whether to use robots.txt
# 是否使用 robots.txt
enableRobotsTXT = true
# whether to use git commit log
# 是否使用 git 信息
enableGitInfo = true
# whether to use emoji code
# 是否使用 emoji 代码
enableEmoji = true
# ignore some build errors
# 忽略一些构建错误
ignoreErrors = ["error-remote-getjson", "error-missing-instagram-accesstoken"]
# Author config
# 作者配置
[author]
name = "阿松日常"
email = "xiaoshame1209@gmail.com"
link = ""
[params]
# site default theme ["auto", "light", "dark"]
# 网站默认主题 ["auto", "light", "dark"]
defaultTheme = "light"
# public git repo url only then enableGitInfo is true
# 公共 git 仓库路径,仅在 enableGitInfo 设为 true 时有效
gitRepo = "https://github.com/xiaoshame/xiaoshame.github.io.git"
# which hash function used for SRI, when empty, no SRI is used
# ["sha256", "sha384", "sha512", "md5"]
# 哪种哈希函数用来 SRI, 为空时表示不使用 SRI
# ["sha256", "sha384", "sha512", "md5"]
fingerprint = ""
# date format
# 日期格式
dateFormat = "2006-01-02"
# website title for Open Graph and Twitter Cards
# 网站标题, 用于 Open Graph 和 Twitter Cards
title = "阿松日常"
# website description for RSS, SEO, Open Graph and Twitter Cards
# 网站描述, 用于 RSS, SEO, Open Graph 和 Twitter Cards
description = "阿松日常的个人博客,奶爸一枚,分享效率提升技巧和带娃日常"
# website images for Open Graph and Twitter Cards
# 网站图片, 用于 Open Graph 和 Twitter Cards
images = "/images/logo.png"
# Header config
# 页面头部导航栏配置
[params.header]
# desktop header mode ["fixed", "normal", "auto"]
# 桌面端导航栏模式 ["fixed", "normal", "auto"]
desktopMode = "fixed"
# mobile header mode ["fixed", "normal", "auto"]
# 移动端导航栏模式 ["fixed", "normal", "auto"]
mobileMode = "auto"
# Header title config
# 页面头部导航栏标题配置
[params.header.title]
# URL of the LOGO
# LOGO 的 URL
logo = "/images/logo.png"
# title name
# 标题名称
name = "阿松日常"
# you can add extra information before the name (HTML format is supported), such as icons
# 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
pre = ""
# you can add extra information after the name (HTML format is supported), such as icons
# 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
post = ""
# whether to use typeit animation for title name
# 是否为标题显示打字机动画
typeit = false
# Footer config
# 页面底部信息配置
[params.footer]
enable = true
# Custom content (HTML format is supported)
# 自定义内容 (支持 HTML 格式)
custom = ""
# whether to show Hugo and theme info
# 是否显示 Hugo 和主题信息
hugo = false
# whether to show copyright info
# 是否显示版权信息
copyright = true
# whether to show the author
# 是否显示作者
author = true
# site creation time
# 网站创立年份
since = 2023
# ICP info only in China (HTML format is supported)
# ICP 备案信息,仅在中国使用 (支持 HTML 格式)
icp = ""
# license info (HTML format is supported)
# 许可协议信息 (支持 HTML 格式)
license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
# Section (all posts) page config
# Section (所有文章) 页面配置
[params.section]
# special amount of posts in each section page
# section 页面每页显示文章数量
paginate = 20
# date format (month and day)
# 日期格式 (月和日)
dateFormat = "01-02"
# amount of RSS pages
# RSS 文章数目
rss = 10
# List (category or tag) page config
# List (目录或标签) 页面配置
[params.list]
# special amount of posts in each list page
# list 页面每页显示文章数量
paginate = 20
# date format (month and day)
# 日期格式 (月和日)
dateFormat = "01-02"
# amount of RSS pages
# RSS 文章数目
rss = 10
# App icon config
# 应用图标配置
[params.app]
# optional site title override for the app when added to an iOS home screen or Android launcher
# 当添加到 iOS 主屏幕或者 Android 启动器时的标题, 覆盖默认标题
title = "阿松日常"
# whether to omit favicon resource links
# 是否隐藏网站图标资源链接
noFavicon = false
# modern SVG favicon to use in place of older style .png and .ico files
# 更现代的 SVG 网站图标, 可替代旧的 .png 和 .ico 文件
svgFavicon = "/images/logo.svg"
# Android browser theme color
# Android 浏览器主题色
themeColor = "#ffffff"
# Safari mask icon color
# Safari 图标颜色
iconColor = "#5bbad5"
# Windows v8-11 tile color
# Windows v8-11 磁贴颜色
tileColor = "#da532c"
# Search config
# 搜索配置
[params.search]
enable = true
# type of search engine ["lunr", "algolia"]
# 搜索引擎的类型 ["lunr", "algolia"]
type = "algolia"
# max index length of the chunked content
# 文章内容最长索引长度
contentLength = 4000
# placeholder of the search bar
# 搜索框的占位提示语
placeholder = ""
# max number of results length
# 最大结果数目
maxResultLength = 10
# snippet length of the result
# 结果内容片段长度
snippetLength = 30
# HTML tag name of the highlight part in results
# 搜索结果中高亮部分的 HTML 标签
highlightTag = "em"
# whether to use the absolute URL based on the baseURL in search index
# 是否在搜索索引中使用基于 baseURL 的绝对路径
absoluteURL = false
[params.search.algolia]
index = ""
appID = ""
searchKey = ""
# Page global config
# 文章页面全局配置
[params.page]
# whether to hide a page from home page
# 是否在主页隐藏一篇文章
hiddenFromHomePage = false
# whether to hide a page from search results
# 是否在搜索结果中隐藏一篇文章
hiddenFromSearch = false
# whether to enable twemoji
# 是否使用 twemoji
twemoji = false
# whether to enable lightgallery
# 是否使用 lightgallery
lightgallery = true
# whether to enable the ruby extended syntax
# 是否使用 ruby 扩展语法
ruby = true
# whether to enable the fraction extended syntax
# 是否使用 fraction 扩展语法
fraction = true
# whether to enable the fontawesome extended syntax
# 是否使用 fontawesome 扩展语法
fontawesome = true
# whether to show link to Raw Markdown content of the content
# 是否显示原始 Markdown 文档内容的链接
linkToMarkdown = false
# whether to show the full text content in RSS
# 是否在 RSS 中显示全文内容
rssFullText = false
# Table of the contents config
# 目录配置
[params.page.toc]
# whether to enable the table of the contents
# 是否使用目录
enable = true
# whether to keep the static table of the contents in front of the post
# 是否保持使用文章前面的静态目录
keepStatic = false
# whether to make the table of the contents in the sidebar automatically collapsed
# 是否使侧边目录自动折叠展开
auto = true
# Code config
# 代码配置
[params.page.code]
# whether to show the copy button of the code block
# 是否显示代码块的复制按钮
copy = true
# the maximum number of lines of displayed code by default
# 默认展开显示的代码行数
maxShownLines = 200
# KaTeX mathematical formulas config (KaTeX https://katex.org/)
# KaTeX 数学公式配置 (KaTeX https://katex.org/)
[params.page.math]
enable = false
# default inline delimiter is $ ... $ and \( ... \)
# 默认行内定界符是 $ ... $ 和 \( ... \)
inlineLeftDelimiter = ""
inlineRightDelimiter = ""
# default block delimiter is $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} and some other functions
# 默认块定界符是 $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} 和一些其它的函数
blockLeftDelimiter = ""
blockRightDelimiter = ""
# KaTeX extension copy_tex
# KaTeX 插件 copy_tex
copyTex = true
# KaTeX extension mhchem
# KaTeX 插件 mhchem
mhchem = true
# Mapbox GL JS config (Mapbox GL JS https://docs.mapbox.com/mapbox-gl-js)
# Mapbox GL JS 配置 (Mapbox GL JS https://docs.mapbox.com/mapbox-gl-js)
[params.page.mapbox]
# access token of Mapbox GL JS
# Mapbox GL JS 的 access token
accessToken = "pk.eyJ1IjoiZGlsbG9uenEiLCJhIjoiY2s2czd2M2x3MDA0NjNmcGxmcjVrZmc2cyJ9.aSjv2BNuZUfARvxRYjSVZQ"
# style for the light theme
# 浅色主题的地图样式
lightStyle = "mapbox://styles/mapbox/light-v10?optimize=true"
# style for the dark theme
# 深色主题的地图样式
darkStyle = "mapbox://styles/mapbox/dark-v10?optimize=true"
# whether to add NavigationControl (https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol)
# 是否添加 NavigationControl (https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol)
navigation = true
# whether to add GeolocateControl (https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol)
# 是否添加 GeolocateControl (https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol)
geolocate = true
# whether to add ScaleControl (https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol)
# 是否添加 ScaleControl (https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol)
scale = true
# whether to add FullscreenControl (https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol)
# 是否添加 FullscreenControl (https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol)
fullscreen = true
# Social share links in post page
# 文章页面的分享信息设置
[params.page.share]
enable = false
Twitter = true
Facebook = true
HackerNews = true
Reddit = true
Line = true
# Comment config
# 评论系统设置
[params.page.comment]
enable = true
# giscus comment config (https://giscus.app/)
# giscus comment 评论系统设置 (https://giscus.app/zh-CN)
[params.page.comment.giscus]
# You can refer to the official documentation of giscus to use the following configuration.
# 你可以参考官方文档来使用下列配置
enable = true
repo = "xiaoshame/xiaoshame.github.io"
repoId = "**"
category = "Announcements"
categoryId = "**"
# automatically adapt the current theme i18n configuration when empty
# 为空时自动适配当前主题 i18n 配置
lang = ""
mapping = "pathname"
reactionsEnabled = "1"
emitMetadata = "0"
inputPosition = "bottom"
lazyLoading = false
lightTheme = "light"
darkTheme = "dark"
# Third-party library config
# 第三方库配置
[params.page.library]
[params.page.library.css]
# someCSS = "some.css"
# located in "assets/" 位于 "assets/"
# Or 或者
# someCSS = "https://cdn.example.com/some.css"
[params.page.library.js]
# someJavascript = "some.js"
# located in "assets/" 位于 "assets/"
# Or 或者
# someJavascript = "https://cdn.example.com/some.js"
# Page SEO config
# 页面 SEO 配置
[params.page.seo]
# image URL
# 图片 URL
images = ["/images/logo.png"]
# Publisher info
# 出版者信息
[params.page.seo.publisher]
name = "阿松日常"
logoUrl = "/images/avatar.png"
# TypeIt config
# TypeIt 配置
[params.typeit]
# typing speed between each step (measured in milliseconds)
# 每一步的打字速度 (单位是毫秒)
speed = 100
# blinking speed of the cursor (measured in milliseconds)
# 光标的闪烁速度 (单位是毫秒)
cursorSpeed = 1000
# character used for the cursor (HTML format is supported)
# 光标的字符 (支持 HTML 格式)
cursorChar = "|"
# cursor duration after typing finishing (measured in milliseconds, "-1" means unlimited)
# 打字结束之后光标的持续时间 (单位是毫秒, "-1" 代表无限大)
duration = -1
# Site verification code for Google/Bing/Yandex/Pinterest/Baidu
# 网站验证代码,用于 Google/Bing/Yandex/Pinterest/Baidu
[params.verification]
google = "*"
bing = ""
yandex = ""
pinterest = ""
baidu = ""
# Site SEO config
# 网站 SEO 配置
[params.seo]
# image URL
# 图片 URL
image = "/images/logo.png"
# thumbnail URL
# 缩略图 URL
thumbnailUrl = "/images/logo.png"
# Analytics config
# 网站分析配置
[params.analytics]
enable = true
# Google Analytics
[params.analytics.google]
id = "G-*"
# whether to anonymize IP
# 是否匿名化用户 IP
anonymizeIP = true
# Fathom Analytics
[params.analytics.fathom]
id = ""
# server url for your tracker if you're self hosting
# 自行托管追踪器时的主机路径
server = ""
# Plausible Analytics
[params.analytics.plausible]
dataDomain = ""
# Yandex Metrica
[params.analytics.yandexMetrica]
id = ""
# Cookie consent config
# Cookie 许可配置
[params.cookieconsent]
enable = false
# text strings used for Cookie consent banner
# 用于 Cookie 许可横幅的文本字符串
[params.cookieconsent.content]
message = ""
dismiss = ""
link = ""
# CDN config for third-party library files
# 第三方库文件的 CDN 设置
[params.cdn]
# CDN data file name, disabled by default
# ["jsdelivr.yml"]
# located in "themes/LoveIt/assets/data/cdn/" directory
# you can store your own data files in the same path under your project:
# "assets/data/cdn/"
# CDN 数据文件名称, 默认不启用
# ["jsdelivr.yml"]
# 位于 "themes/LoveIt/assets/data/cdn/" 目录
# 可以在你的项目下相同路径存放你自己的数据文件:
# "assets/data/cdn/"
data = "jsdelivr.yml"
# Markup related configuration in Hugo
# Hugo 解析文档的配置
[markup]
# Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
# 语法高亮设置 (https://gohugo.io/content-management/syntax-highlighting)
[markup.highlight]
codeFences = true
guessSyntax = true
lineNos = true
lineNumbersInTable = true
# false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
# false 是必要的设置 (https://github.com/dillonzq/LoveIt/issues/158)
noClasses = false
# Goldmark is from Hugo 0.60 the default library used for Markdown
# Goldmark 是 Hugo 0.60 以来的默认 Markdown 解析库
[markup.goldmark]
[markup.goldmark.extensions]
definitionList = true
footnote = true
linkify = true
strikethrough = true
table = true
taskList = true
typographer = true
[markup.goldmark.renderer]
# whether to use HTML tags directly in the document
# 是否在文档中直接使用 HTML 标签
unsafe = true
# Table Of Contents settings
# 目录设置
[markup.tableOfContents]
startLevel = 2
endLevel = 6
# Sitemap config
# 网站地图配置
[sitemap]
changefreq = "weekly"
filename = "sitemap.xml"
priority = 0.5
# Permalinks config (https://gohugo.io/content-management/urls/#permalinks)
# Permalinks 配置 (https://gohugo.io/content-management/urls/#permalinks)
[Permalinks]
# posts = ":year/:month/:filename"
posts = ":filename"
# Options to make output .md files
# 用于输出 Markdown 格式文档的设置
[mediaTypes]
[mediaTypes."text/plain"]
suffixes = ["md"]
# Options to make output .md files
# 用于输出 Markdown 格式文档的设置
[outputFormats.MarkDown]
mediaType = "text/plain"
isPlainText = true
isHTML = false
# Options to make hugo output files
# 用于 Hugo 输出文档的设置
[outputs]
home = ["HTML", "RSS", "JSON"]
page = ["HTML", "MarkDown"]
section = ["HTML", "RSS"]
taxonomy = ["HTML", "RSS"]
# Multilingual
# 多语言
[languages]
[languages.zh-cn]
weight = 2
languageCode = "zh-CN"
languageName = "简体中文"
hasCJKLanguage = true
copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License."
[languages.zh-cn.menu]
[[languages.zh-cn.menu.main]]
weight = 1
identifier = "posts"
pre = "<i class='fa-solid fa-book'></i>"
post = ""
name = "所有文章"
url = "/posts/"
title = ""
[[languages.zh-cn.menu.main]]
weight = 2
identifier = "favorites"
pre = "<i class='fa-solid fa-bookmark'></i>"
post = ""
name = "收藏夹"
url = "/favorites/"
title = ""
[[languages.zh-cn.menu.main]]
weight = 3
identifier = "comments"
pre = "<i class='fa-solid fa-comment'></i>"
post = ""
name = "留言板"
url = "/comments/"
title = ""
[[languages.zh-cn.menu.main]]
weight = 4
identifier = "sites"
pre = "<i class='fa-solid fa-link'></i>"
post = ""
name = "友情链接"
url = "/sites/"
title = ""
# 二级菜单
[[languages.zh-cn.menu.main]]
parent = "posts"
pre = "<i class='fas fa-fw fa-th'></i>"
name = "分类"
identifier = "categories"
url = "/categories/"
weight = 1
[[languages.zh-cn.menu.main]]
parent = "posts"
identifier = "tags"
post = ""
pre = "<i class='fas fa-fw fa-tag'></i>"
name = "标签"
url = "/tags/"
title = ""
weight = 2
[languages.zh-cn.params]
[languages.zh-cn.params.search]
enable = true
type = "algolia"
contentLength = 4000
placeholder = ""
maxResultLength = 10
snippetLength = 50
highlightTag = "em"
absoluteURL = false
[languages.zh-cn.params.search.algolia]
index = "index.zh-cn"
appID = "PASDMWALPK"
searchKey = "b42948e51daaa93df92381c8e2ac0f93"
[languages.zh-cn.params.home]
rss = 10
[languages.zh-cn.params.home.profile]
enable = true
gravatarEmail = "xiaoshame1209@gmail.com"
avatarURL = "/images/avatar.png"
title = ""
subtitle = "一位普通的奶爸,一个不出名的程序员,正在努力赚钱和感受生活的酸甜苦辣"
typeit = true
social = true
disclaimer = ""
[languages.zh-cn.params.social]
GitHub = "https://github.com/xiaoshame/"
Email = "xiaoshame1209@gmail.com"
RSS = true
[languages.zh-cn.params.home.posts]
enable = true
# special amount of posts in each home posts page
# 主页每页显示文章数量
paginate = 10
Github部署
- 参考Hugo官方github部署
- 官方文档要求将hugo.toml传到git上,其中包含部分key,存在风险
使用hugo生成pubilc文件,上传到仓库
修改blog/.github/workflows/hugo.yaml文件,核心是屏蔽hugo在远端构建,只对pubilc文件打包
# Sample workflow for building and deploying a Hugo site to GitHub Pages name: Deploy Hugo site to Pages on: # Runs on pushes targeting the default branch push: branches: - master # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. concurrency: group: "pages" cancel-in-progress: false # Default to bash defaults: run: shell: bash jobs: # Build job build: runs-on: ubuntu-latest # env: # HUGO_VERSION: 0.119.0 steps: # - name: Install Hugo CLI # run: | # wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \ # && sudo dpkg -i ${{ runner.temp }}/hugo.deb - name: Install Dart Sass run: sudo snap install dart-sass - name: Checkout uses: actions/checkout@v3 with: submodules: recursive fetch-depth: 0 - name: Setup Pages id: pages uses: actions/configure-pages@v3 - name: Install Node.js dependencies run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true" # - name: Build with Hugo # env: # # For maximum backward compatibility with Hugo modules # HUGO_ENVIRONMENT: production # HUGO_ENV: production # run: | # hugo \ # --gc \ # --minify \ # --baseURL "${{ steps.pages.outputs.base_url }}/" - name: Upload artifact uses: actions/upload-pages-artifact@v1 with: path: ./public # Deployment job deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v2
配置Giscus评论
- 对应项目开启GitHub Discussions
- github上安装Giscus
- 利用GitHub GraphQL API获取repoId,categoryId,参考Github 如何获取仓库的 repo_id 和 category_id
- 修改hugo.toml中repo,repoId,category,categoryId,打开giscus关闭valine,通过enable字段控制,参考安装部分hugo.toml文件
hugo
生成相应代码,同步pubilc文件夹到仓库中
收藏页
- 修改hugo.toml中menu.main配置,添加favorites菜单
- 生成页面
- 使用指令
hugo new favorites/index.md
,在blog/content目录下生成favorites/index.md文件 - 在index.md中编辑内容,draft 值调整为fasle,表示不是草稿
hugo
生成相应页面代码,同步pubilc文件夹到仓库
- 使用指令
封面图
本想给文章加个封面图,在查资料解决过程中,看到一个基于LoveIt魔改主题搭建的博客,文章的样式符合预期,分析自己博客与对方的不同,参考调整
删除原LoveIt主题,删除blog/theme/LoveIt 文件夹
删除blog/.git/config中[submodule "themes/LoveIt"]的配置
添加LoveIt主题,
git submodule add git@github.com:hakula139/LoveIt.git themes/LoveIt
下载对方博客内容,将hakula.xyz-main/assets中的内容放到自己博客的blog/assets目录中
封面图片可以放到文章同级目录中
修改文章参数设置,参考如下
--- title : 'Hugo+Github零成本搭建博客流程记录' date : 2023-10-11T10:06:03+08:00 draft : false tags : [hugo,github,博客] categories : [技术] featuredImage : /hugo_blog/1697027912506.png ---
站点运行时间
通过自定义js实现
blog/themes/LoveIt/layouts/partials/assets.html 拷贝到blog/layouts/partials/assets.html
blog/themes/LoveIt/layouts/partials/footer.html 拷贝到blog/layouts/partials/footer.html
创建blog/static/js/custom.js 文件,粘贴如下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
/* 站点运行时间 */ function runtime() { window.setTimeout("runtime()", 1000); /* 请修改这里的起始时间 */ let startTime = new Date('10/10/2023 15:00:00'); let endTime = new Date(); let usedTime = endTime - startTime; let days = Math.floor(usedTime / (24 * 3600 * 1000)); let leavel = usedTime % (24 * 3600 * 1000); let hours = Math.floor(leavel / (3600 * 1000)); let leavel2 = leavel % (3600 * 1000); let minutes = Math.floor(leavel2 / (60 * 1000)); let leavel3 = leavel2 % (60 * 1000); let seconds = Math.floor(leavel3 / (1000)); let runbox = document.getElementById('run-time'); runbox.innerHTML = '本站已运行`<i class="far fa-clock fa-fw"></i>` ' + ((days < 10) ? '0' : '') + days + ' 天 ' + ((hours < 10) ? '0' : '') + hours + ' 时 ' + ((minutes < 10) ? '0' : '') + minutes + ' 分 ' + ((seconds < 10) ? '0' : '') + seconds + ' 秒 '; } runtime();
修改blog/layouts/partials/assets.html,在最后
{{- partial "plugin/analytics.html" . -}}
前面加上1 2
{{- /* 自定义的js文件 */ -}} <script type="text/javascript" src="/js/custom.js"></script>
修改blog/layouts/partials/footer.html,在
<divclass="footer-container">
下面加上1 2 3
<div class="footer-line"> <span id="run-time"></span> </div>
二级菜单
- 调整和相关代码完全参考Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章
- 二级菜单调整见上面hugo.toml
- 菜单logo使用fontawesome,在hugo中配置菜单对应pre参数