我的博客地址luckly
1. 安装主题
把这个主题克隆到 themes 目录:
git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
2. 配置主题
2.1. 站点配置文件的修改
将根目录\themes\LoveIt\exampleSite路径下的config.toml文件复制到根目录下，覆盖掉根目录下的config.toml文件。然后，我们在notepad++中打开并对其作一定的修改就可以直接使用，具体可以修改的内容如下：
baseURL = "https://luckly.work" # [en, zh-cn, fr, pl, ...] determines default content language # [en, zh-cn, fr, pl, ...] 设置默认的语言 defaultContentLanguage = "zh-cn" # 网站语言, 仅在这里 CN大写 languageCode = "zh-CN" # 是否包括中日韩文字 hasCJKLanguage = true # 主题 theme = "LoveIt" # 网站标题 title = "Lucklyの博客 - 在阅读中遇见自己" # 是否使用 robots.txt enableRobotsTXT = true # 是否使用 git 信息 enableGitInfo = true # 是否使用 emoji 代码 enableEmoji = true [languages] [languages.zh-cn] weight = 2 # 网站语言, 仅在这里 CN 大写 languageCode = "zh-CN" # 语言名称 languageName = "简体中文" # 是否包括中日韩文字 hasCJKLanguage = true # 默认每页列表显示的文章数目 paginate = 12 # [UA-XXXXXXXX-X] 谷歌分析代号 googleAnalytics = "" # 版权描述，仅仅用于 SEO copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # 菜单配置 [languages.zh-cn.menu] [[languages.zh-cn.menu.main]] identifier = "posts" # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标 pre = "" # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标 post = "" name = "所有文章" url = "/posts/" title = "" weight = 1 [[languages.zh-cn.menu.main]] identifier = "tags" pre = "" post = "" name = "标签" url = "/tags/" title = "" weight = 2 [[languages.zh-cn.menu.main]] identifier = "categories" pre = "" post = "" name = "分类" url = "/categories/" title = "" weight = 3 [[languages.zh-cn.menu.main]] identifier = "documentation" pre = "" name = "文档" url = "/categories/documentation/" title = "" weight = 4 [[languages.zh-cn.menu.main]] identifier = "about" pre = "" post = "" name = "关于" url = "/about/" title = "" weight = 5 [[languages.zh-cn.menu.main]] identifier = "github" pre = "<i class='fab fa-github fa-fw'></i>" post = "" name = "Github" url = "https://github.com/ITmxs" title = "GitHub" weight = 6 [[languages.zh-cn.menu.main]] identifier = "friend" pre = "<i class='fas fa-user-friends'></i>" post = "" name = "友链" url = "/friend/" title = "" weight = 7 [languages.zh-cn.params] # 网站描述 description = "早起的年轻人做的网站" # 网站关键词 keywords = ["Theme", "Hugo"] # 应用图标配置 [languages.zh-cn.params.app] # 当添加到 iOS 主屏幕或者 Android 启动器时的标题, 覆盖默认标题 title = "LoveIt" # 是否隐藏网站图标资源链接 noFavicon = false # 更现代的 SVG 网站图标, 可替代旧的 .png 和 .ico 文件 svgFavicon = "" # Android 浏览器主题色 themeColor = "#ffffff" # Safari 图标颜色 iconColor = "#5bbad5" # Windows v8-10 磁贴颜色 tileColor = "#da532c" # 搜索配置 [languages.zh-cn.params.search] enable = true # 搜索引擎的类型 ("lunr", "algolia") type = "algolia" # 文章内容最长索引长度 contentLength = 4000 # 搜索框的占位提示语 placeholder = "" # 最大结果数目 maxResultLength = 10 # 结果内容片段长度 snippetLength = 50 # 搜索结果中高亮部分的 HTML 标签 highlightTag = "em" # 是否在搜索索引中使用基于 baseURL 的绝对路径 absoluteURL = false [languages.zh-cn.params.search.algolia] index = "index.zh-cn" appID = "PASDMWALPK" searchKey = "b42948e51daaa93df92381c8e2ac0f93" # 主页信息设置 [languages.zh-cn.params.home] # RSS 文章数目 rss = 10 # 主页个人信息 [languages.zh-cn.params.home.profile] enable = true # Gravatar 邮箱，用于优先在主页显示的头像 gravatarEmail = "" # 主页显示头像的 URL avatarURL = "/images/avatar.png" # 主页显示的网站标题 (支持 HTML 格式) title = "" # 主页显示的网站副标题 subtitle = "一个记录学习过程的网站" # 是否为副标题显示打字机动画 typeit = true # 是否显示社交账号 social = true # 免责声明 (支持 HTML 格式) disclaimer = "" # 主页文章列表 [languages.zh-cn.params.home.posts] enable = true # 主页每页显示文章数量 paginate = 6 # 主页的社交信息设置 [languages.zh-cn.params.social] GitHub = "ITmxs" Bilibili = "480883651" Zhihu = "yimi-yang-guang-96-65" Linkedin = "" Twitter = "" Instagram = "" Facebook = "" Telegram = "" Medium = "" Gitlab = "" Youtubelegacy = "" Youtubecustom = "" Youtubechannel = "" Tumblr = "" Quora = "" Keybase = "" Pinterest = "" Reddit = "" Codepen = "" FreeCodeCamp = "" Bitbucket = "" Stackoverflow = "" # Weibo = "xxxx" Odnoklassniki = "" VK = "" Flickr = "" Xing = "" Snapchat = "" Soundcloud = "" Spotify = "" Bandcamp = "" Paypal = "" Fivehundredpx = "" Mix = "" Goodreads = "" Lastfm = "" Foursquare = "" Hackernews = "" Kickstarter = "" Patreon = "" # Steam = "xxxx" Twitch = "" Strava = "" Skype = "" Whatsapp = "" # Juejin ="user/3843548384077192" # Douban = "xxxx" Angellist = "" Slidershare = "" Jsfiddle = "" Deviantart = "" Behance = "" Dribbble = "" Wordpress = "" Vine = "" Googlescholar = "" Researchgate = "" Mastodon = "" Thingiverse = "" Devto = "" Gitea = "" XMPP = "" Matrix = "" # Email = "852851198@qq.com" # RSS = true [params] # LoveIt theme version # LoveIt 主题版本 version = "0.2.X" # site default theme ("light", "dark", "auto") # 网站默认主题 ("light", "dark", "auto") defaultTheme = "auto" # public git repo url only then enableGitInfo is true # 公共 git 仓库路径，仅在 enableGitInfo 设为 true 时有效 gitRepo = "https://github.com/dillonzq/LoveIt" # 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 images for Open Graph and Twitter Cards # 网站图片, 用于 Open Graph 和 Twitter Cards images = ["/logo.png"] #来自之前 archivePaginate = 50 # show 'xx Posts In Total' in archive page ? # 是否在归档页显示文章的总数 showArchiveCount = true # 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 = "" # title name # 标题名称 name = "早起的年轻人" # you can add extra information before the name (HTML format is supported), such as icons # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标 pre = "<i class='far fa-kiss-wink-heart fa-fw'></i>" # 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 = true [params.busuanzi] # count web traffic by busuanzi # 是否使用不蒜子统计站点访问量 enable = true siteUV = true sitePV = true pagePV = true [params.reward] # 文章打赏 enable = true wechat = "/path/to/your/wechat-qr-code.png" # 微信二维码 alipay = "/path/to/your/alipay-qr-code.png" # Footer config # 页面底部信息配置 [params.footer] enable = true # Custom content (HTML format is supported) # 自定义内容 (支持 HTML 格式) custom = '' # whether to show Hugo and theme info # 是否显示 Hugo 和主题信息 hugo = true # whether to show copyright info # 是否显示版权信息 copyright = true # whether to show the author # 是否显示作者 author = true # site creation time # 网站创立年份 since = 2021 # 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 # Page 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 = false # 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 = true # 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 = 10 # KaTeX mathematical formulas config (KaTeX https://katex.org/) # KaTeX 数学公式配置 (KaTeX https://katex.org/) [params.page.math] enable = true # default block delimiter is $$ ... $$ and \\[ ... \\] # 默认块定界符是 $$ ... $$ 和 \\[ ... \\] blockLeftDelimiter = "" blockRightDelimiter = "" # default inline delimiter is $ ... $ and \\( ... \\) # 默认行内定界符是 $ ... $ 和 \\( ... \\) inlineLeftDelimiter = "" inlineRightDelimiter = "" # 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 = true Twitter = true Facebook = true Linkedin = false Whatsapp = false Pinterest = false Tumblr = false HackerNews = true Reddit = false VK = false Buffer = false Xing = false Line = true Instapaper = false Pocket = false Digg = false Stumbleupon = false Flipboard = false Weibo = true Renren = false Myspace = false Blogger = false Baidu = false Odnoklassniki = false Evernote = false Skype = false Trello = false Mix = false # Comment config # 评论系统设置 [params.page.comment] enable = true # Disqus comment config (https://disqus.com/) # Disqus 评论系统设置 (https://disqus.com/) [params.page.comment.disqus] enable = false # Disqus shortname to use Disqus in posts # Disqus 的 shortname，用来在文章中启用 Disqus 评论系统 shortname = "" # Gitalk comment config (https://github.com/gitalk/gitalk) # Gitalk 评论系统设置 (https://github.com/gitalk/gitalk) [params.page.comment.gitalk] enable = false owner = "" repo = "" clientId = "" clientSecret = "" # Valine comment config (https://github.com/xCss/Valine) # Valine 评论系统设置 (https://github.com/xCss/Valine) [params.page.comment.valine] enable = true appId = 'cIRpq8figzQxyGz5LyAdUahJ-gzGzoHsz' appKey = 'T9YWfgGhznKaXXx7TCLxzS3C' notify = true # mail notifier , https://github.com/xCss/Valine/wiki verify = false # Verification code avatar = 'robohash' placeholder = '说点什么吧...' visitor = true path = true meta = true pageSize = true lang = true enableQQ = true # Facebook comment config (https://developers.facebook.com/docs/plugins/comments) # Facebook 评论系统设置 (https://developers.facebook.com/docs/plugins/comments) [params.page.comment.facebook] enable = false width = "100%" numPosts = 10 appId = "" languageCode = "" # Telegram comments config (https://comments.app/) # Telegram comments 评论系统设置 (https://comments.app/) [params.page.comment.telegram] enable = false siteID = "" limit = 5 height = "" color = "" colorful = true dislikes = false outlined = false # Commento comment config (https://commento.io/) # Commento comment 评论系统设置 (https://commento.io/) [params.page.comment.commento] enable = false # Utterances comment config (https://utteranc.es/) # Utterances comment 评论系统设置 (https://utteranc.es/) [params.page.comment.utterances] enable = false # owner/repo repo = "" issueTerm = "pathname" label = "" lightTheme = "github-light" darkTheme = "github-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 = [] # Publisher info # 出版者信息 [params.page.seo.publisher] name = "xxxx" 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/Apple-Devices-Preview.png" # thumbnail URL # 缩略图 URL thumbnailUrl = "/images/screenshot.png" # Analytics config # 网站分析配置 [params.analytics] enable = false # Google Analytics [params.analytics.google] id = "" # whether to anonymize IP # 是否匿名化用户 IP anonymizeIP = true # Fathom Analytics [params.analytics.fathom] id = "" # server url for your tracker if you're self hosting # 自行托管追踪器时的主机路径 server = "" # 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" # Compatibility config # 兼容性设置 [params.compatibility] # whether to use Polyfill.io to be compatible with older browsers # 是否使用 Polyfill.io 来兼容旧式浏览器 polyfill = false # whether to use object-fit-images to be compatible with older browsers # 是否使用 object-fit-images 来兼容旧式浏览器 objectFit = false # 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 = 1 endLevel = 6 # Author config # 作者配置 [author] name = "早起的年轻人" email = "852851198@qq.com" link = "" # 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" # Privacy config (https://gohugo.io/about/hugo-and-gdpr/) # 隐私信息配置 (https://gohugo.io/about/hugo-and-gdpr/) [privacy] # privacy of the Google Analytics (replaced by params.analytics.google) # Google Analytics 相关隐私 (被 params.analytics.google 替代) [privacy.googleAnalytics] # ... [privacy.twitter] enableDNT = true [privacy.youtube] privacyEnhanced = true # 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 = false # isHTML = true # # Options to make hugo output files # # 用于 Hugo 输出文档的设置 # [outputs] # home = ["HTML", "RSS", "JSON"] # page = ["HTML", "MarkDown"] # section = ["HTML", "RSS"] # taxonomy = ["HTML", "RSS"] # taxonomyTerm = ["HTML"]
其中搜索和评论部分，要根据实际情况修改。
2.2. 默认文章模板的修改
将根目录\archetypes下的default.md修改如下：
title: "{{ replace .TranslationBaseName "-" " " | title }}" subtitle: "" date: {{ .Date }} lastmod: {{ .Date }} draft: false toc: enable: true weight: false categories: [""] tags: [""]
2.3. LoveIt主题官方前置参数
--- title: "我的第一篇文章" subtitle: "" date: 2020-03-04T15:58:26+08:00 lastmod: 2020-03-04T15:58:26+08:00 draft: true author: "" authorLink: "" description: "" license: "" images: [] tags: [] categories: [] featuredImage: "" featuredImagePreview: "" hiddenFromHomePage: false hiddenFromSearch: false twemoji: false lightgallery: true ruby: true fraction: true fontawesome: true linkToMarkdown: true rssFullText: false toc: enable: true auto: true code: copy: true # ... math: enable: true # ... mapbox: accessToken: "" # ... share: enable: true # ... comment: enable: true # ... library: css: # someCSS = "some.css" # 位于 "assets/" # 或者 # someCSS = "https://cdn.example.com/some.css" js: # someJS = "some.js" # 位于 "assets/" # 或者 # someJS = "https://cdn.example.com/some.js" seo: images: [] # ... ---
title: 文章标题.
subtitle: 文章副标题.
date: 这篇文章创建的日期时间. 它通常是从文章的前置参数中的 date 字段获取的, 但是也可以在 网站配置 中设置.
lastmod: 上次修改内容的日期时间.
draft: 如果设为 true, 除非 hugo 命令使用了 --buildDrafts/-D 参数, 这篇文章不会被渲染.
author: 文章作者.
authorLink: 文章作者的链接.
description: 文章内容的描述.
license: 这篇文章特殊的许可.
images: 页面图片, 用于 Open Graph 和 Twitter Cards.
tags: 文章的标签.
categories: 文章所属的类别.
featuredImage: 文章的特色图片.
featuredImagePreview: 用在主页预览的文章特色图片.
hiddenFromHomePage: 如果设为 true, 这篇文章将不会显示在主页上.
hiddenFromSearch: 如果设为 true, 这篇文章将不会显示在搜索结果中.
twemoji: 如果设为 true, 这篇文章会使用 twemoji.
lightgallery: 如果设为 true, 文章中的图片将可以按照画廊形式呈现.
ruby: 如果设为 true, 这篇文章会使用 上标注释扩展语法.
fraction: 如果设为 true, 这篇文章会使用 分数扩展语法.
fontawesome: 如果设为 true, 这篇文章会使用 Font Awesome 扩展语法.
linkToMarkdown: 如果设为 true, 内容的页脚将显示指向原始 Markdown 文件的链接.
rssFullText: 如果设为 true, 在 RSS 中将会显示全文内容.
toc: 和网站配置 中的 params.page.toc 部分相同.
code: 和网站配置 中的 params.page.code 部分相同.
math: 和网站配置 中的 params.page.math 部分相同.
mapbox: 和网站配置 中的 params.page.mapbox 部分相同.
share: 和 网站配置 中的 params.page.share 部分相同.
comment: 和网站配置 中的 params.page.comment 部分相同.
library: 和网站配置中的 params.page.library 部分相同.
seo: 和网站配置中的 params.page.seo 部分相同.
2.4. 添加友情链接 shortcodes
在前辈大佬的基础上，为本博客使用的主题实现友链卡片功能，并加入简单的移动页面适配。代码借鉴来自 kissshot 和 数学小兵儿 两位大佬。
2.4.1. 代码部分
LoveIt/layouts/shortcodes/ 下面新建 friend.html 文件：
{{ if .IsNamedParams }} <a target="_blank" href={{ .Get "url" }} title={{ .Get "name" }} class="friendurl"> <div class="frienddiv"> <div class="frienddivleft"> <img class="myfriend" src={{ .Get "logo" }} /> </div> <div class="frienddivright"> <div class="friendname">{{ .Get "name" }}</div> <div class="friendinfo">{{ .Get "word" }}</div> </div> </div> </a> {{ end }}
LoveIt/assets/css/_partial/_single/ 下面新建 _friend.scss 文件：
.friendurl { text-decoration: none !important; color: black; } .myfriend { width: 56px !important; height: 56px !important; border-radius: 50%; border: 1px solid #ddd; padding: 2px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); margin-top: 14px !important; margin-left: 14px !important; background-color: #fff; } .frienddiv { height: 92px; margin-top: 10px; width: 48%; display: inline-block !important; border-radius: 5px; background: rgba(255, 255, 255, 0.2); box-shadow: 4px 4px 2px 1px rgba(0, 0, 255, 0.2); } .frienddiv:hover { background: rgba(87, 142, 224, 0.15); } .frienddiv:hover .frienddivleft img { transition: 0.9s !important; -webkit-transition: 0.9s !important; -moz-transition: 0.9s !important; -o-transition: 0.9s !important; -ms-transition: 0.9s !important; transform: rotate(360deg) !important; -webkit-transform: rotate(360deg) !important; -moz-transform: rotate(360deg) !important; -o-transform: rotate(360deg) !important; -ms-transform: rotate(360deg) !important; } .frienddivleft { width: 92px; float: left; } .frienddivleft { margin-right: 2px; } .frienddivright { margin-top: 18px; margin-right: 18px; } .friendname { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .friendinfo { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } @media screen and (max-width: 600px) { .friendinfo { display: none; } .frienddivleft { width: 84px; margin: auto; } .frienddivright { height: 100%; margin: auto; display: flex; align-items: center; justify-content: center; } .friendname { font-size: 14px; } }
LoveIt/assets/css/_page/ 下面修改 _single.scss，引入下面一行：
@import "../_partial/_single/friend";
2.4.2. 展示效果
使用示例：
{{< friend name="Dillon" url="https://github.com/dillonzq/" logo="https://avatars0.githubusercontent.com/u/30786232?s=46
移动端隐藏说明文字，只留下名称。
3. 官方文档
更多内容可查看官方文档：
主题文档 - 基本概念
主题文档 - 内容
4. 参考链接
Hugo 篇四：添加友链卡片 shortcodes
图标网址：
https://fontawesome.com/icons/user-friends?style=solid
自定义配置：
https://blog.csdn.net/lislie_/article/details/96597743
