Obsidian 样式:自定义链接前缀图标

Obsidian 样式:自定义链接前缀图标

样式演示

该样式会根据前缀来给不同格式的文档添加前缀图标:

注意:仅在阅读模式下生效

Obsidian 样式:自定义链接前缀图标--样式演示

如何自定义图标

通过 .internal-link[href*=".pdf"]::before 匹配不同文件类型格式,通过修改 content:url() 里面的 SVG 数据的内容可以定义不同文件类型的图标。

自定义链接前缀图标 CSS

/* 如何配置图标参考: [Obsidain 样式:美化自定义文件夹图标]( https://pkmer.cn/show/20230717003729 )*/

/*内部链接*/
.internal-link::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M10.0464 14C8.54044 12.4882 8.67609 9.90087 10.3494 8.22108L15.197 3.35462C16.8703 1.67483 19.4476 1.53865 20.9536 3.05046C22.4596 4.56228 22.3239 7.14956 20.6506 8.82935L18.2268 11.2626' stroke='%23003cff' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3Cpath opacity='0.5' d='M13.9536 10C15.4596 11.5118 15.3239 14.0991 13.6506 15.7789L11.2268 18.2121L8.80299 20.6454C7.12969 22.3252 4.55237 22.4613 3.0464 20.9495C1.54043 19.4377 1.67609 16.8504 3.34939 15.1706L5.77323 12.7373' stroke='%23003cff' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  display: inline-block;
  transform: translate(0px, 2px);
  width: 1.2rem;
}

.internal-link[href*=".pdf"]::before {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1638524832853' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1275' xmlns:xlink='http://www.w3.org/1999/xlink' width='15' height='15'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M881.777778 765.155556c-76.8-5.688889-150.755556-34.133333-210.488889-85.333334-116.622222 25.6-227.555556 62.577778-338.488889 108.088889-88.177778 156.444444-170.666667 236.088889-241.777778 236.088889-14.222222 0-31.288889-2.844444-42.666666-11.377778C17.066667 998.4 0 967.111111 0 935.822222c0-25.6 5.688889-96.711111 275.911111-213.333333 62.577778-113.777778 110.933333-230.4 150.755556-352.711111-34.133333-68.266667-108.088889-236.088889-56.888889-321.422222C386.844444 17.066667 420.977778 0 457.955556 2.844444c28.444444 0 56.888889 14.222222 73.955555 36.977778 36.977778 51.2 34.133333 159.288889-14.222222 318.577778 45.511111 85.333333 105.244444 162.133333 176.355555 227.555556 59.733333-11.377778 119.466667-19.911111 179.2-19.911112 133.688889 2.844444 153.6 65.422222 150.755556 102.4 0 96.711111-93.866667 96.711111-142.222222 96.711112zM85.333333 941.511111l8.533334-2.844444c39.822222-14.222222 71.111111-42.666667 93.866666-79.644445-42.666667 17.066667-76.8 45.511111-102.4 82.488889z m378.311111-853.333333H455.111111c-2.844444 0-8.533333 0-11.377778 2.844444-11.377778 48.355556-2.844444 99.555556 17.066667 145.066667 17.066667-48.355556 17.066667-99.555556 2.844444-147.911111z m19.911112 412.444444l-2.844445 5.688889-2.844444-2.844444c-25.6 65.422222-54.044444 130.844444-85.333334 193.422222l5.688889-2.844445v5.688889c62.577778-22.755556 130.844444-42.666667 193.422222-56.888889l-2.844444-2.844444h8.533333c-42.666667-42.666667-82.488889-91.022222-113.777777-139.377778z m386.844444 150.755556c-25.6 0-48.355556 0-73.955556 5.688889 28.444444 14.222222 56.888889 19.911111 85.333334 22.755555 19.911111 2.844444 39.822222 0 56.888889-5.688889 0-8.533333-11.377778-22.755556-68.266667-22.755555z' fill='%23000000' p-id='1276'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  transform: translate(0px, 2px);
  width: 1.2rem;
}

.internal-link[href*=".epub"]::before {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1638524832853' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1275' xmlns:xlink='http://www.w3.org/1999/xlink' width='15' height='15'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M881.777778 765.155556c-76.8-5.688889-150.755556-34.133333-210.488889-85.333334-116.622222 25.6-227.555556 62.577778-338.488889 108.088889-88.177778 156.444444-170.666667 236.088889-241.777778 236.088889-14.222222 0-31.288889-2.844444-42.666666-11.377778C17.066667 998.4 0 967.111111 0 935.822222c0-25.6 5.688889-96.711111 275.911111-213.333333 62.577778-113.777778 110.933333-230.4 150.755556-352.711111-34.133333-68.266667-108.088889-236.088889-56.888889-321.422222C386.844444 17.066667 420.977778 0 457.955556 2.844444c28.444444 0 56.888889 14.222222 73.955555 36.977778 36.977778 51.2 34.133333 159.288889-14.222222 318.577778 45.511111 85.333333 105.244444 162.133333 176.355555 227.555556 59.733333-11.377778 119.466667-19.911111 179.2-19.911112 133.688889 2.844444 153.6 65.422222 150.755556 102.4 0 96.711111-93.866667 96.711111-142.222222 96.711112zM85.333333 941.511111l8.533334-2.844444c39.822222-14.222222 71.111111-42.666667 93.866666-79.644445-42.666667 17.066667-76.8 45.511111-102.4 82.488889z m378.311111-853.333333H455.111111c-2.844444 0-8.533333 0-11.377778 2.844444-11.377778 48.355556-2.844444 99.555556 17.066667 145.066667 17.066667-48.355556 17.066667-99.555556 2.844444-147.911111z m19.911112 412.444444l-2.844445 5.688889-2.844444-2.844444c-25.6 65.422222-54.044444 130.844444-85.333334 193.422222l5.688889-2.844445v5.688889c62.577778-22.755556 130.844444-42.666667 193.422222-56.888889l-2.844444-2.844444h8.533333c-42.666667-42.666667-82.488889-91.022222-113.777777-139.377778z m386.844444 150.755556c-25.6 0-48.355556 0-73.955556 5.688889 28.444444 14.222222 56.888889 19.911111 85.333334 22.755555 19.911111 2.844444 39.822222 0 56.888889-5.688889 0-8.533333-11.377778-22.755556-68.266667-22.755555z' fill='%23000000' p-id='1276'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  transform: translate(0px, 2px);
  width: 1.2rem;
}

.internal-link[href*=".pptx"]::before,
.internal-link[href*=".ppt"]::before {
  content: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath style='fill:%23ECEDEF;' d='M106.324,8.017c-9.446,0-17.102,7.656-17.102,17.102v461.762c0,9.446,7.656,17.102,17.102,17.102 h376.251c9.446,0,17.102-7.656,17.102-17.102V84.977l-76.96-76.96H106.324z'%3E%3C/path%3E%3Cpath style='fill:%23D9DCDF;' d='M439.819,84.977h59.858l-76.96-76.96v59.858C422.717,77.319,430.373,84.977,439.819,84.977z'%3E%3C/path%3E%3Cpath style='fill:%23C6CACF;' d='M397.063,196.142H89.222V42.221h307.841c4.722,0,8.551,3.829,8.551,8.551v136.818 C405.615,192.313,401.786,196.142,397.063,196.142z'%3E%3C/path%3E%3Cpolygon style='fill:%23DB6B5E;' points='388.512,179.04 12.262,179.04 80.671,110.63 12.262,42.221 388.512,42.221 '%3E%3C/polygon%3E%3Crect x='166.181' y='256' style='fill:%23D9DCDF;' width='256.534' height='153.921'%3E%3C/rect%3E%3Crect x='166.181' y='256' style='fill:%23B3B9BF;' width='256.534' height='17.102'%3E%3C/rect%3E%3Cpath style='fill:%23FFC44F;' d='M268.796,281.653v51.307h51.307C320.103,304.624,297.133,281.653,268.796,281.653z'%3E%3C/path%3E%3Cpath style='fill:%233C9FE8;' d='M268.796,281.653c-28.336,0-51.307,22.971-51.307,51.307c0,28.336,22.971,51.307,51.307,51.307 s51.307-22.971,51.307-51.307h-51.307V281.653L268.796,281.653z'%3E%3C/path%3E%3Crect x='149.079' y='221.795' style='fill:%2368727E;' width='290.739' height='34.205'%3E%3C/rect%3E%3Crect x='149.079' y='238.898' style='fill:%2355606E;' width='290.739' height='17.102'%3E%3C/rect%3E%3Cpath d='M499.677,426.489c4.427,0,8.017-3.589,8.017-8.017V84.977c0-2.1-0.863-4.184-2.348-5.668l-76.96-76.96 C426.902,0.865,424.815,0,422.716,0H106.323C92.473,0,81.204,11.268,81.204,25.119v9.086H12.261c-6.987,0-10.616,8.738-5.668,13.685 l62.741,62.741l-62.74,62.741c-4.947,4.947-1.32,13.685,5.668,13.685h68.944v299.825c0,13.851,11.268,25.119,25.119,25.119h376.251 c13.851,0,25.119-11.268,25.119-25.119v-34.205c0-4.427-3.589-8.017-8.017-8.017c-4.427,0-8.017,3.589-8.017,8.017v34.205 c0,5.01-4.076,9.086-9.086,9.086H106.324c-5.01,0-9.086-4.076-9.086-9.086V187.056h51.841c4.427,0,8.017-3.589,8.017-8.017 s-3.589-8.017-8.017-8.017H31.615l54.724-54.724c3.131-3.131,3.131-8.207,0-11.337L31.615,50.238h348.88v120.785H183.285 c-4.427,0-8.017,3.589-8.017,8.017s3.589,8.017,8.017,8.017h205.228c4.427,0,8.017-3.589,8.017-8.017V42.221 c0-4.427-3.589-8.017-8.017-8.017H97.239v-9.086c0-5.01,4.076-9.086,9.086-9.086H414.7v51.841c0,13.851,11.268,25.119,25.119,25.119 h51.841v325.478C491.66,422.9,495.25,426.489,499.677,426.489z M430.732,67.875V27.37l49.59,49.59h-40.505 C434.808,76.96,430.732,72.885,430.732,67.875z'%3E%3C/path%3E%3Cpath d='M174.199,136.284v-17.655c0.177,0.012,0.355,0.018,0.534,0.018h25.653c4.427,0,8.017-3.589,8.017-8.017V84.977 c0-4.427-3.589-8.017-8.017-8.017h-34.205c-4.427,0-8.017,3.589-8.017,8.017v51.307c0,4.427,3.589,8.017,8.017,8.017 S174.199,140.711,174.199,136.284z M174.199,92.994h18.171v9.62h-17.637c-0.18,0-0.357,0.005-0.534,0.018V92.994z'%3E%3C/path%3E%3Cpath d='M234.057,136.284v-17.655c0.177,0.012,0.355,0.018,0.534,0.018h25.653c4.427,0,8.017-3.589,8.017-8.017V84.977 c0-4.427-3.589-8.017-8.017-8.017H226.04c-4.427,0-8.017,3.589-8.017,8.017v51.307c0,4.427,3.589,8.017,8.017,8.017 C230.468,144.301,234.057,140.711,234.057,136.284z M234.057,92.994h18.171v9.62h-17.637c-0.18,0-0.357,0.005-0.534,0.018V92.994z'%3E%3C/path%3E%3Cpath d='M303.001,144.301c4.427,0,8.017-3.589,8.017-8.017v-43.29h9.086c4.427,0,8.017-3.589,8.017-8.017 c0-4.427-3.589-8.017-8.017-8.017h-34.205c-4.427,0-8.017,3.589-8.017,8.017c0,4.427,3.589,8.017,8.017,8.017h9.086v43.29 C294.984,140.711,298.573,144.301,303.001,144.301z'%3E%3C/path%3E%3Cpath d='M422.717,417.937c4.427,0,8.017-3.589,8.017-8.017V264.017h9.086c4.427,0,8.017-3.589,8.017-8.017v-34.205 c0-4.427-3.589-8.017-8.017-8.017H234.592c-4.427,0-8.017,3.589-8.017,8.017s3.589,8.017,8.017,8.017h197.211v18.171H157.097 v-18.171h43.29c4.427,0,8.017-3.589,8.017-8.017s-3.589-8.017-8.017-8.017H149.08c-4.427,0-8.017,3.589-8.017,8.017V256 c0,4.427,3.589,8.017,8.017,8.017h9.086v145.904c0,4.427,3.589,8.017,8.017,8.017h120.251v28.961l-20.172,6.724 c-3.984,1.329-6.3,5.659-5.199,9.71c1.191,4.382,5.959,6.938,10.27,5.502l23.118-7.706l23.118,7.706 c4.317,1.439,9.07-1.122,10.27-5.502c1.109-4.049-1.222-8.383-5.199-9.71l-20.172-6.724v-28.961H422.717z M174.199,264.017H414.7 v137.887H174.199L174.199,264.017L174.199,264.017z'%3E%3C/path%3E%3Cpath d='M328.12,332.96c0-32.711-26.612-59.324-59.324-59.324s-59.324,26.612-59.324,59.324s26.612,59.324,59.324,59.324 S328.12,365.672,328.12,332.96z M311.342,324.944h-34.53v-34.53C294.266,293.697,308.06,307.49,311.342,324.944z M268.796,376.251 c-23.871,0-43.29-19.42-43.29-43.29c0-21.132,15.221-38.775,35.273-42.546v42.546c0,4.427,3.589,8.017,8.017,8.017h42.546 C307.571,361.03,289.927,376.251,268.796,376.251z'%3E%3C/path%3E%3Cpath d='M345.757,306.772h25.653c4.427,0,8.017-3.589,8.017-8.017c0-4.427-3.589-8.017-8.017-8.017h-25.653 c-4.427,0-8.017,3.589-8.017,8.017C337.74,303.183,341.329,306.772,345.757,306.772z'%3E%3C/path%3E%3Cpath d='M345.757,340.977h25.653c4.427,0,8.017-3.589,8.017-8.017c0-4.427-3.589-8.017-8.017-8.017h-25.653 c-4.427,0-8.017,3.589-8.017,8.017C337.74,337.388,341.329,340.977,345.757,340.977z'%3E%3C/path%3E%3Cpath d='M345.757,375.182h25.653c4.427,0,8.017-3.589,8.017-8.017c0-4.427-3.589-8.017-8.017-8.017h-25.653 c-4.427,0-8.017,3.589-8.017,8.017C337.74,371.592,341.329,375.182,345.757,375.182z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  display: inline-block;
  transform: translate(0px, 2px);
  width: 1.2rem;
}


.internal-link[href*=".jpg"]::before,
.internal-link[href*=".png"]::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24.00 24.00' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M18 9C18 10.1046 17.1046 11 16 11C14.8954 11 14 10.1046 14 9C14 7.89543 14.8954 7 16 7C17.1046 7 18 7.89543 18 9Z' fill='%23152C70'%3E%3C/path%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 8C2 5.23858 4.23858 3 7 3H17C19.7614 3 22 5.23858 22 8V16C22 18.7614 19.7614 21 17 21H7C4.23858 21 2 18.7614 2 16V8ZM7 5C5.34315 5 4 6.34315 4 8V13.2379L5.51703 11.4175C6.80081 9.87698 9.20548 10.0054 10.3178 11.674L11.7548 13.8294C12.0548 14.2794 12.6582 14.4094 13.1169 14.1227L13.9533 13.5999C15.2488 12.7903 16.9458 13.0834 17.8946 14.2807L19.8918 16.8012C19.9623 16.5461 20 16.2775 20 16V8C20 6.34315 18.6569 5 17 5H7Z' fill='%23152C70'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  display: inline-block;
  transform: translate(0px, 2px);
  width: 1.2rem;
}

/* 配置背景颜色 */
.internal-link {
  /* color: #000000 !important; */
  font-weight: lighter !important;
  border-radius: 5px 5px 5px 5px;
  /* background-color: #bcb5fc; */
  
  /* 下划线 */
  text-decoration:underline !important;
}

.internal-link[href*=".pdf"] {
  color: #000000 !important;
  border-radius: 5px 5px 5px 5px;
  background-color: #df7762;
}
.internal-link[href*=".epub"] {
  color: #000000 !important;
  border-radius: 5px 5px 5px 5px;
  background-color: #6e62df;
}

.internal-link[href*=".ppt"],
.internal-link[href*=".pptx"] {
  color: #000000 !important;
  border-radius: 5px 5px 5px 5px;
  background-color: #df7f62;
}

讨论

若阁下有独到的见解或新颖的想法,诚邀您在文章下方留言,与大家共同探讨。



反馈交流

其他渠道

版权声明