介绍
由于flex-block主题中没有bilibili和YouTuBe的图标,需要进行手动添加。
添加记录
SVG图标路径
theme/layout/_svg/
添加演示(引用自flex-block的官方文档)
自定义新增social_icon图标
如添加一个Google+图标,先在 theme/layout/_svg/
下添加 social-google.svg
。
然后编辑 _config.yml
配置文件,在 social_icon
下的 icons
添加 google: [你的地址]
即可。
SVG代码
注意,请直接使用代码块复制功能,复制按钮在代码块右上角位置。
bilibili
1 2 3
| <svg class="icon icon-bilibili" viewBox="-125 -125 1300 1300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M210.41 8.42 q14.03 -8.42 29.46 -8.42 q15.43 0 29.46 8.42 q18.23 9.82 36.47 29.45 l143.08 131.86 l102.4 0 l143.08 -131.86 q18.23 -19.63 36.47 -29.45 q26.65 -4.21 43.49 -3.51 q16.83 0.7 33.66 9.12 q28.05 18.23 36.47 54.7 q0 28.06 -18.24 47.7 l-47.69 47.69 l89.78 0 q63.12 1.4 108.01 47.69 q22.44 22.45 35.07 50.5 q12.63 28.06 12.63 63.13 l0 430.64 q0 18.23 -0.7 33.66 q-0.7 15.43 -4.91 32.27 q-9.82 32.26 -27.35 61.01 q-17.54 28.75 -45.59 47 q-16.84 12.62 -38.58 18.23 q-21.74 5.61 -44.19 5.61 l-670.5 0 q-18.24 0 -33.67 -0.7 q-15.43 -0.7 -32.26 -4.91 q-32.27 -8.41 -58.22 -27.35 q-25.95 -18.94 -44.18 -51.2 q-12.63 -18.24 -18.24 -39.28 q-5.61 -21.04 -5.61 -43.48 l0 -490.96 q11.22 -56.11 50.5 -93.29 q39.28 -37.17 93.98 -38.57 l95.39 0 q-8.42 -5.61 -18.24 -16.13 q-9.82 -10.52 -23.84 -20.34 q-12.63 -12.63 -18.24 -27.36 q-5.61 -14.72 -5.61 -31.56 q4.21 -18.23 13.32 -34.36 q9.12 -16.13 23.15 -25.95 ZM197.79 301.59 q-43.49 8.42 -60.32 53.3 l0 389.96 q1.4 26.66 13.33 47.7 q11.92 21.04 35.76 29.46 q8.42 4.2 14.74 5.61 q6.31 1.4 14.72 0 l591.96 0 q22.44 0 40.67 -11.23 q18.24 -11.23 32.26 -29.45 q4.21 -14.03 4.91 -24.55 q0.7 -10.52 0.7 -24.55 l0 -364.71 q-11.22 -35.07 -47.69 -53.31 q-9.82 -12.62 -22.45 -15.43 q-12.63 -2.81 -25.25 -2.81 l-593.36 0 ZM311.41 420.82 q26.65 0 54.71 18.24 q12.62 9.82 18.23 25.95 q5.61 16.13 5.61 34.37 l0 77.15 q0 29.45 -18.23 47.69 q-14.03 14.03 -30.87 22.44 q-16.84 8.42 -35.07 7.72 q-18.23 -0.7 -34.36 -11.22 q-16.13 -10.52 -25.95 -24.55 q-9.82 -26.65 -11.22 -53.31 l0 -78.55 q8.41 -26.65 27.35 -43.49 q18.94 -16.83 49.8 -22.44 ZM701.37 420.82 q14.03 0 28.75 4.91 q14.73 4.91 24.54 13.33 q12.63 9.82 18.24 25.25 q5.61 15.43 5.61 29.45 l0 77.16 q0 14.02 -1.4 27.35 q-1.4 13.32 -11.22 25.95 q-8.42 18.23 -24.55 27.35 q-16.13 9.12 -34.37 9.12 q-18.24 0 -34.37 -9.12 q-16.13 -9.12 -25.96 -27.35 q-8.41 -12.63 -10.51 -25.95 q-2.11 -13.33 -0.7 -27.35 l0 -77.16 q0 -28.05 18.94 -47.69 q18.94 -19.64 46.99 -25.25 Z"/> </svg>
|
YouTuBe
1 2 3 4 5 6
| <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-youtube" width="100%" height="100%" viewBox="-0.1 0 28.8 20" version="1.1"> <g> <path d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042 0 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z"/> <path d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z" fill="white"/> </g> </svg>
|
申明
图标来自于www.svgrepo.com,为了与flex-block主题中包含的SVG图标保持一致,进行了大小调整。
添加演示引用自flex-block的官方文档(https://kyori.xyz/2021/07/081144.html)