Alert

#

options: none

#

{{}}
< alert >内容< /alert >
{{      }}  {{        }}

options: “twitter”

#

"twitter"

options: icon,cardColor,iconColor,textColor

#

icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee"

引用同级文件（或者下一级但不常用）

#

{{}}
article
link="/docs/shortcodes/"

一个小badge

#

{{}}
< badge >
< /badge >

Button 它有三个可选变量 href、target 和 rel，可用于指定链接的 URL、目标和关系。

#

{{}}
button
href="#button" target="_self" 

打开Google链接

#

href="https://www.google.com/" target="_block"

轮播图 指定参数

#

只能显示现有网页文件夹下的图片

carousel
images="{img/7.jpg,img/3.jpg,img/4.jpg,img/5.jpg,img/6.jpg}

Previous Nextsads

轮播图 自动匹配参数

#

images="img/*"        //文件夹或url
aspectRatio="21-9"    //纵横比
interval="2500"       //时间间隔 2000代表2秒
左侧默认carousel images="img/*" aspectRatio="21-9" interval="2500"右侧默认

轮播图示例

#

Previous Nextsads

数据处理 条形图 扇形图

#

{{}}
chart
type: 'bar',
data: {
  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
  datasets: [{
    label: '# of votes',
    data: [12, 19, 3, 5, 3],
  }]
}
offer more to use

初级图片示例

#

高级图片示例

#

<chart>
type: 'bar',
data: {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1
  }]
}

type: 'line',
data: {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    tension: 0.2
  }]
}

type: 'doughnut',
data: {
  labels: ['Red', 'Blue', 'Yellow'],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgba(255, 99, 132, 0.7)',
      'rgba(54, 162, 235, 0.7)',
      'rgba(255, 205, 86, 0.7)'
    ],
    borderWidth: 0,
    hoverOffset: 4
  }]
}

从github上便捷引用代码 只需要url

#

go语言

#

输入代码

go语言
codeimporter 
url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/
layouts/shortcodes/mdimporter.html" 
type="go"

输出代码

{{ $url := .Get "url"}}
{{ with resources.GetRemote (urls.Parse $url) }}
{{ .Content | markdownify }}
{{ else }}
{{ errorf "Mardown Importer Shortcode - Unable to get remote resource" . }}
{{ end }}

toml语言

#

输入代码

codeimporter url="https://raw.githubusercontent.com/nunocoracao/
blowfish/main/config/_default/hugo.toml" 
type="toml" startLine="11" endLine="18"

输出代码

enableRobotsTXT = true
summaryLength = 0

buildDrafts = false
buildFuture = false

enableEmoji = true

Codeberg Card

#

Codeberg存储库的格式为 username/repo

< codeberg repo="forgejo/forgejo" >

figure

#

Gallery one

#

Gallery two

#

github 项目 something wrong

#

emmm本地实验的时候貌似失灵了，不知道发布之后会怎么样（没学好JavaScript，看不懂，大概感觉是用了github的api吧）

源码是这样的

<script>
    fetch("https://api.github.com/repos/paofan25/paofan25.github.io", {
      headers: new Headers({
        'User-agent': 'Mozilla/4.0 Custom User Agent'
      })
    })
      .then(response => response.json())
      .then(data => {
        document.getElementById('github-34d7009b09e4a521d67ae02e42d4e76b-full_name').innerHTML = data.full_name;
        document.getElementById('github-34d7009b09e4a521d67ae02e42d4e76b-description').innerHTML = data.description;
        document.getElementById('github-34d7009b09e4a521d67ae02e42d4e76b-stargazers').innerHTML = data.stargazers_count;
        document.getElementById('github-34d7009b09e4a521d67ae02e42d4e76b-forks').innerHTML = data.forks;
      })
      .catch(error => console.error(error))
</script>

不知道是api过时了还是怎样

gitlab项目 something wrong

#

运用你的gitlab projectID

一个图标

#

可以自定义图标

可以通过在项目的 assets/icons/ 目录中提供您自己的图标来添加自定义图标。然后可以使用不带 .svg 扩展名的 SVG 文件名在简码中引用该图标。

数学公式支持

#

众所周知，latex用的是$$

katex是
(\\
\\)

\(f(a,b,c) = (a^2+b^2+c^2)^3\)

重点标记

#

同行重点标记

#

重点标记中的加粗

#

一些大的字

#

显示两个文章

#

最近的文章

Samples

从右向左输入的文字

#

• This is an markdown list.
• Its per default a LTR direction

直接输出github下面的readme.md文档

#

—文档内容开始—

Hi there 👋

#

• 🐳 Principal Product Manager @ Docker
• 🐡 Creator and maintainer of Blowfish @ Blowfish page
• 🚀 Personal blog - n9o.xyz
• 📚 mentoring @ mentorcruise

简单地制作流程图 运用mermaid

#

一张色卡

#

以下是一份时间轴 可以自定义 图标 和 内容

#

1. header

   badge test

   subheader

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
2. Another Awesome Header

   date - present

   Awesome Subheader

   With html code

   • Coffee
   • Tea
   • Milk
3. Shortcodes

   AWESOME

   With other shortcodes

   
4. Another Awesome Header

   nunocoracao/blowfish

   Personal Website & Blog Theme for Hugo

   HTML

   1736

   476

充满高级感的自动输出效果

#

便捷的运用youtube视频

#

我是幽灵看不见我