跳转至

如何给MKdocs添加友链

复制后在需要添加友链的.md 文件页面粘贴即可

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
<div class="post-body">
  <div id="links">
    <style>
      /* 用于大屏幕和小屏幕的通用样式 */
      .card {
        width: 45%;
        font-size: 1rem;
        padding: 10px 20px;
        border-radius: 4px;
        transition-duration: 0.15s;
        margin-bottom: 1rem;
        display: flex;
      }
      .card:nth-child(odd) {
        float: left;
      }
      .card:nth-child(even) {
        float: right;
      }
      .card:hover {
        transform: scale(1.1);
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
      }
      .card a {
        border: none;
      }
      .card .ava {
        width: 3rem !important;
        height: 3rem !important;
        margin: 0 !important;
        margin-right: 1em !important;
        border-radius: 4px;
      }
      .card .card-header {
        font-style: italic;
        overflow: hidden;
        width: 100%;
      }
      .card .card-header a {
        font-style: normal;
        color: #608dbd;
        font-weight: bold;
        text-decoration: none;
      }
      .card .card-header a:hover {
        color: #d480aa;
        text-decoration: none;
      }
      .card .card-header .info {
        font-style: normal;
        color: #a3a3a3;
        font-size: 14px;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
      }
      /* 媒体查询：小屏幕 */
      @media (max-width: 768px) {
        .card {
          width: 100%; /* 在小屏幕上显示为单列 */
          float: none; /* 清除浮动 */
        }
      }
    </style>
    <div class="links-content">
      <div class="link-navigation">
        <div class="card">
          <img
            class="ava"
            src="https://cn.mcecy.com/image/20231006/a05f708fb7b0426e7a5786669d5b1386.png"
          />
          <div class="card-header">
            <div>
              <a href="https://wcowin.work/ " target="“_blank”"
                >Wcowin’s blog</a
              >
            </div>
            <div class="info">这是一个分享技术的小站。</div>
          </div>
        </div>
        <div class="card">
          <img
            class="ava"
            src="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png"
          />
          <div class="card-header">
            <div>
              <a href="https://twitter.com/" target="“_blank”">Twitter</a>
            </div>
            <div class="info">社交分享平台</div>
          </div>
        </div>
        <div class="card">
          <img
            class="ava"
            src="https://cn.mcecy.com/image/20231012/d96b912437fb0bec0d282dfe734b1d9b.jpeg"
          />
          <div class="card-header">
            <div>
              <a href="https://macapp.org.cn/" target="“_blank”">Macapp</a>
            </div>
            <div class="info">一个专注于分享Mac资源的频道</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

如何加入友链

1
2
3
4
5
6
7
8
9
<div class="card">
  <img class="ava" src="{avatarurl}" />
  <div class="card-header">
    <div>
      <a href="{link}" target="_blank">{name}</a>
    </div>
    <div class="info">{description}</div>
  </div>
</div>

示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div>
  <div class="links-content"> 
   <div class="link-navigation"> 
    <div class="card"> 
     <img class="ava" src="https://pic4.zhimg.com/80/v2-a0456a5f527c1923f096759f2926012f_1440w.webp" /> 
     <div class="card-header"> 
      <div> 
       <a href="https://wcowin.work/ " target=“_blank”>Wcowin’s blog</a> 
      </div> 
      <div class="info">
       这是一个分享技术的小站。
      </div> 
     </div> 
    </div> 
</div>

效果

这是一个分享技术的小站。