分享一个 Obsidian 中的内容图片分享样式

经验分享
1
  • 依赖插件： Export Image
  • 插件作者：Zhou Hua
  • 功能说明：Export Image 插件可以将 markdown 文件或者其中选中的文本已图片的形式进行导出，插件作者还提供了很多自定义的配置项，搭配 CSS 的自定义功能，我们可以自定义出来非常哇塞的内容分享卡片

效果图

image
image1920×2167 186 KB

image
image1920×2167 195 KB

CSS

如何修改背景样式？

找到 background-image: var(--gradient-milktea) 这一行，将--gradient-milktea 替换掉上面定义的 --gradient-xx，比如 --gradien-1，--gradient-lotus 等

  • 代码
.export-image-root {
  --paper-cream-light: #fafaf8;
  
  --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --gradient-6: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --gradient-7: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);


  --gradient-peach: linear-gradient(135deg, #ffeaa7 0%, #dfe6e9 100%);
  --gradient-moonlight: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --gradient-milktea: linear-gradient(135deg, #fdfbf7 0%, #f5f0e6 100%);
  --gradient-celadon: linear-gradient(135deg, #e0f2f1 0%, #eceff1 100%);
  --gradient-lotus: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 100%);
  --gradient-warmwhite: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);

  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* inline title */
  --inline-title-color: #661b25;
  --inline-title-font-family: "Fira Code", "Courier New", Courier, monospace;
  --mac-button-size: 12px;

  position: relative;
  padding: 3rem 12px 8px 12px;
  background-image: var(--gradient-milktea);
}

.export-image-root > div {
  background-color: var(--paper-cream-light);
}

.export-image-root > div:first-child {
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  position: relative;
}

.export-image-root::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: var(--mac-button-size);
  height: var(--mac-button-size);
  border-radius: 50%;
  background: #ff5f57;
  box-shadow:
    20px 0 0 #ffbd2e,
    40px 0 0 #28ca41;
  cursor: pointer;
  transition: all 0.2s ease;
}

.export-image-root > div:nth-child(2) {
  border-bottom-left-radius: var(--radius-m);
  border-bottom-right-radius: var(--radius-m);
}

.export-image-root .inline-title {
  position: relative;
  font-weight: normal;
  color: var(--inline-title-color);
  font-family: var(--inline-title-font-family);
}

.export-image-root .inline-title::before {
}

.export-image-root .markdown-preview-view.markdown-rendered {
  padding: 0px;
}

.export-image-markdown {
  border-radius: var(--radius-m);
}

.export-image-root {
  .user-info-container {
    display: flex;
    padding: 16px 24px;
    border-radius: 0px;
    align-items: center;
    border: none !important;
    background-color: transparent !important;
  }
}

.user-info-avatar {
  margin-left: 0px;
  margin-right: 16px;
}
3 个赞