安裝Hexo的hexo-tag-link-preview連結預覽外掛

Hexo的hexo-tag-link-preview連結預覽外掛和社交網站自動建立連結預覽效果一樣,我主要在獨立頁面建立Google相簿連結預覽,正確抓取相簿名稱、封面縮圖、相片數量、作者,最重要是美化分享的連結(Google相簿沒有內嵌功能)。

裝完外掛後,需加入hexo-tag-link-preview的CSS,才能正確顯示連結預覽外框和佈局。到Hexo Light主題編輯/themes/light/source/css/_partial/article.style,加入:

.link-preview
  .link-area
    overflow hidden
    position: relative;
    margin: 1em 0 1em 0
    padding: 10px
    border: 1px #999 solid
  .descriptions
    overflow: hidden
  .og-title
    overflow hidden
    font-size: 1.2em
    font-weight: bold
  .og-description
    font-size: 0.86em
    margin-top: 0.2em
  .og-image
    float left
    margin-right: 10px
    img
      max-width: 125px
      pointer-events: none

效果如圖:
hexo-tag-link-preview demo

參考文章: