Hugo 白话文 | 添加友情链接

最新推荐文章于 2023-12-08 00:09:39 发布

原创

最新推荐文章于 2023-12-08 00:09:39 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

“基友遍四海，友链不可少”

本文介绍如何在 hugo 中添加友情链接

一、前言

使用 Hugo 搭建博客的你是否还在为没有友情链接而烦恼，阅读本文将为你制作属于自己的友情链接提供解决方案。

二、友情链接

2.1 效果

先看咋们的效果图

真实效果

首页：
在这里插入图片描述
点击后：

手机端：

2.2 制作过程

2.2.1 增加菜单栏

[languages]
  [languages.en]
    ......
    [languages.en.menu]
      ......
      [[languages.en.menu.main]]
        identifier = "friend"
        pre = ""
        post = ""
        name = "Friend"
        url = "/friend/"
        title = ""
        weight = 5
      ......
    [languages.en.params]
      ......

首先在 menu 增加一个菜单项为 friend 表示友情链接，上面是多语言的版本，不是多语言也是一样的逻辑。

2.2.2 制作 shortcodes

2.2.2.1 创建 html

在你博客的路径 /xxx/blog/layouts/shortcodes/ 下创建 friend.html 文件。

{
  
  { if .IsNamedParams }}
    {
  
  {- $src := .Get "logo" -}}
    {
  
  {- $small := .Get "logo_small" | default $src -}}
    {
  
  {- $large := .Get "logo_large" | default $src -}}
    <div class="flink" id="article-container">
      <div class="friend-list-div" >
        <div class="friend-div">
            <a target="_blank" href={
    
    {
    
     .Get "url"  | safeURL }} title={
    
    {
    
     .Get