Academic Profile的管理及其在Jekyll博客中的可视化

2025-02-18

引言

本博文介绍如何在Jekyll博客中通过添加svg图标来创建Academic Profile链接(当然,同理,其他社交媒体,比如B站、github也类似的操作)

原理其实就是通过采用svg编码的图片,通过在_config.yml下设置对应的footer-links参数,并且调用_includes\svg-icons.html中定义的各种svg图片,进而实现点击图标即可跳转网页。

SVG生成网站推荐SVGViewer,可实时可视化svg编码并且以各种形式下载图片 (PS:本文采用svg代码可视化,当然也可以采用png等其他图片格式~)

Liquid 提供了 rawendraw 标签,可以将包裹的内容作为纯文本输出,避免被解析(若在markdown中写对应的代码要注意~)。

Google Scholar

  • 代码如下:

  {% if site.footer-links.google_scholar %}
  <li>
    <a href="https://scholar.google.com/citations?user={{ site.footer-links.google_scholar }}" class="icon-google-scholar google-scholar" title="Google Scholar">
      <svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Google Scholar</title><path d="M12 24a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0-24L0 9.5l4.838 3.94A8 8 0 0 1 12 9a8 8 0 0 1 7.162 4.44L24 9.5z"/></svg>
    </a>
  </li>
  {% endif %}

  • 效果:

Google Scholar

ORCID

  • 代码如下:

  {% if site.footer-links.ORCID %}
  <li>
    <a href="https://orcid.org/{{ site.footer-links.ORCID }}" class="icon-ORCID ORCID" title="ORCID">
      <svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>ORCID</title><path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM7.369 4.378c.525 0 .947.431.947.947s-.422.947-.947.947a.95.95 0 0 1-.947-.947c0-.525.422-.947.947-.947zm-.722 3.038h1.444v10.041H6.647V7.416zm3.562 0h3.9c3.712 0 5.344 2.653 5.344 5.025 0 2.578-2.016 5.025-5.325 5.025h-3.919V7.416zm1.444 1.303v7.444h2.297c3.272 0 4.022-2.484 4.022-3.722 0-2.016-1.284-3.722-4.097-3.722h-2.222z"/></svg>
    </a>
  </li>
  {% endif %}

  <!-- 若要彩色版本可以用 -->
  <a href="https://orcid.org/{{ page.ORCID }}" class="icon-ORCID ORCID" title="ORCID">
    <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ORCID</title><path cx="512" cy="512" r="512" style="fill:#a6ce39" d="M24 12A12 12 0 0 1 12 24A12 12 0 0 1 0 12A12 12 0 0 1 24 12z"/><path d="M8.759 16.624h-1.181V8.402h1.181zm1.734 -8.222h3.192c3.04 0 4.376 2.173 4.376 4.113 0 2.112 -1.65 4.113 -4.359 4.113H10.493zm1.181 7.163h1.88c2.679 0 3.293 -2.034 3.293 -3.047 0 -1.65 -1.052 -3.047 -3.354 -3.047h-1.819zM8.944 6.691c0 0.422 -0.345 0.776 -0.776 0.776 -0.429 0 -0.776 -0.354 -0.776 -0.776 0 -0.429 0.345 -0.776 0.776 -0.776 0.429 0 0.776 0.354 0.776 0.776" style="fill:#fff"/></svg>
  </a>

  • 效果:

ORCID

ORCID

Website of Science / Clarivate

  • 代码如下:

  {% if site.footer-links.Clarivate %}
  <li>
    <a href="https://www.webofscience.com/wos/author/record/{{ site.footer-links.Clarivate }}" class="icon-Clarivate Clarivate" title="Clarivate">
      <svg width="24px" height="24px" viewBox="1.5 0 36.6 36.1" role="img" xmlns="http://www.w3.org/2000/svg"><title>Website of Science</title>
        <!-- <style type="text/css">
          .st0{fill:#1AC604;}
          .st1{fill:#6817FF;}
        </style> -->
         <path class="st0" d="M28.3,18c1.9,2.2,3.4,4.7,4.5,7.4-5,5.2-11.4,8.9-18.6,10.7-1.8-2.3-3.1-4.9-4.1-7.6C20.3,26.8,26,20.8,28.3,18z"/>
                  <path class="st1" d="M14.4,0c-1.8,2.3-3.2,4.9-4.2,7.6 8.5,1.5 14.2,5.8 18.1,10.5 1.9-2.2 3.4-4.7 4.5-7.4C27.9,5.5,21.5,1.8,14.4,0z"/>
                  <path d="M1.5,28.8c-2-6.9-2-14.1 0-21.4 1.9-0.2 4.9-0.4 8.7,0.2-2.8,7.5-2.3,14.9-0.1,21C7.2,29,4.2,29.1,1.5,28.8z"/>
        </svg>
    </a>
  </li>
  {% endif %}

  • 效果:

Website of Science

Scopus/Elsevier

  • 代码如下:

  {% if site.footer-links.Scopus_id %}
  <li>
    <a href="https://www.scopus.com/authid/detail.uri?authorId={{ site.footer-links.Scopus_id }}" class="icon-Scopus Scopus" title="Scopus">
      <svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Scopus</title><path d="M24 19.059l-.14-1.777c-1.426.772-2.945 1.076-4.465 1.076-3.319 0-5.96-2.782-5.96-6.475 0-3.903 2.595-6.31 5.633-6.31 1.917 0 3.39.303 4.792 1.075L24 4.895c-1.286-.608-2.337-.889-4.698-.889-4.534 0-7.97 3.53-7.97 8.017 0 5.12 4.09 7.924 7.9 7.924 1.916 0 3.506-.257 4.768-.888zm-14.954-3.46c0-2.22-1.964-3.225-3.857-4.347C3.716 10.364 2.15 9.756 2.15 8.12c0-1.215.889-2.548 2.642-2.548 1.519 0 2.57.234 3.903 1.029l.117-1.847c-1.239-.514-2.127-.748-4.137-.748C1.8 4.006.047 5.876.047 8.26c0 2.384 2.103 3.413 4.02 4.581 1.426.865 2.922 1.45 2.922 2.992 0 1.496-1.333 2.571-2.922 2.571-1.566 0-2.594-.35-3.786-1.075L0 19.176c1.215.56 2.454.818 4.16.818 2.385 0 4.885-1.473 4.885-4.395z"/></svg>
    </a>
  </li>
  {% endif %}

  • 效果:

Scopus

ResearchGate

  • 代码如下:

  {% if site.footer-links.ResearchGate %}
  <li>
    <a href="https://www.researchgate.net/profile/{{ site.footer-links.ResearchGate }}" class="icon-ResearchGate ResearchGate" title="ResearchGate">
      <svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>ResearchGate</title><path d="M19.586 0c-.818 0-1.508.19-2.073.565-.563.377-.97.936-1.213 1.68a3.193 3.193 0 0 0-.112.437 8.365 8.365 0 0 0-.078.53 9 9 0 0 0-.05.727c-.01.282-.013.621-.013 1.016a31.121 31.123 0 0 0 .014 1.017 9 9 0 0 0 .05.727 7.946 7.946 0 0 0 .077.53h-.005a3.334 3.334 0 0 0 .113.438c.245.743.65 1.303 1.214 1.68.565.376 1.256.564 2.075.564.8 0 1.536-.213 2.105-.603.57-.39.94-.916 1.175-1.65.076-.235.135-.558.177-.93a10.9 10.9 0 0 0 .043-1.207v-.82c0-.095-.047-.142-.14-.142h-3.064c-.094 0-.14.047-.14.141v.956c0 .094.046.14.14.14h1.666c.056 0 .084.03.084.086 0 .36 0 .62-.036.865-.038.244-.1.447-.147.606-.108.385-.348.664-.638.876-.29.212-.738.35-1.227.35-.545 0-.901-.15-1.21-.353-.306-.203-.517-.454-.67-.915a3.136 3.136 0 0 1-.147-.762 17.366 17.367 0 0 1-.034-.656c-.01-.26-.014-.572-.014-.939a26.401 26.403 0 0 1 .014-.938 15.821 15.822 0 0 1 .035-.656 3.19 3.19 0 0 1 .148-.76 1.89 1.89 0 0 1 .742-1.01c.344-.244.593-.352 1.137-.352.508 0 .815.096 1.144.303.33.207.528.492.764.925.047.094.111.118.198.07l1.044-.43c.075-.048.09-.115.042-.199a3.549 3.549 0 0 0-.466-.742 3 3 0 0 0-.679-.607 3.313 3.313 0 0 0-.903-.41A4.068 4.068 0 0 0 19.586 0zM8.217 5.836c-1.69 0-3.036.086-4.297.086-1.146 0-2.291 0-3.007-.029v.831l1.088.2c.744.144 1.174.488 1.174 2.264v11.288c0 1.777-.43 2.12-1.174 2.263l-1.088.2v.832c.773-.029 2.12-.086 3.465-.086 1.29 0 2.951.057 3.667.086v-.831l-1.49-.2c-.773-.115-1.174-.487-1.174-2.264v-4.784c.688.057 1.29.057 2.206.057 1.748 3.123 3.41 5.472 4.355 6.56.86 1.032 2.177 1.691 3.839 1.691.487 0 1.003-.086 1.318-.23v-.744c-1.031 0-2.063-.716-2.808-1.518-1.26-1.376-2.95-3.582-4.355-6.074 2.32-.545 4.04-2.722 4.04-4.9 0-3.208-2.492-4.698-5.758-4.698zm-.515 1.29c2.406 0 3.839 1.26 3.839 3.552 0 2.263-1.547 3.782-4.097 3.782-.974 0-1.404-.03-2.063-.086v-7.19c.66-.059 1.547-.059 2.32-.059z"/></svg>
    </a>
  </li>
  {% endif %}

  • 效果:

ResearchGate