Hexo 配置

最新推荐文章于 2025-06-16 17:35:03 发布

MINGgoS

最新推荐文章于 2025-06-16 17:35:03 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Hexo 文章标签： css3

本文链接：https://blog.youkuaiyun.com/MINGgoS/article/details/123079557

Hexo 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在Hexo博客中集成并美化Valine评论系统，包括获取APPID和APPKey，配置butterfly.yml，创建valine.json，自定义表情，设置背景图，添加特殊标签，以及调整CSS和JavaScript来实现更佳的阅读体验。此外，还展示了如何在Butterfly主题中添加留言板页面，以及跟踪网站运行时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更好的阅读体验

Hexo 开启Valine 评论

首先获取APP ID 和 APP Key

请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用：

在这里插入图片描述

应用创建好以后，进入刚刚创建的应用，选择左下角的设置>应用Key，然后就能看到你的APP ID和APP Key了：

在这里插入图片描述

然后配置 butterfly.yml

# valine
# https://valine.js.org
valine:
  appId: Wxxxxxxa # leancloud application app id
  appKey: gxxpxxxxxxxx3 # leancloud application app key
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
  placeholder: Please leave your footprints # valine comment input placeholder (like: Please leave your footprints)
  guest_info: nick,mail,link # valine comment header info (nick/mail/link)
  recordIP: true # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  emojiCDN: https://i0.hdslb.com/bfs/emote/ # emoji CDN
  enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields (nick/mail)
  visitor: false
  option:

Valine 於 v1.4.5 開始支持自定義表情，如果你需要自行配置，請在 emojiCDN 配置表情 CDN

同时在 Hexo 工作目錄下的 source/_data/ 创建一個 json 文件 valine.json, 等同于 Valine 需要配置的 emojiMaps，valine.json 配置方式可參考如下。

示例引用B站表情

Github表情收集地址
https://github.com/lrhtony/BiliEmoji/blob/master/biliEmoji.txt

butterfly.yml下valinel,emojiCDN处添加:https://i0.hdslb.com/bfs/emote/

{
"微笑":"685612eadc33f6bc233776c6241813385844f182.png",
"OK":"4683fd9ffc925fa6423110979d7dcac5eda297f4.png",
"星星眼":"63c9d1a31c0da745b61cdb35e0ecb28635675db2.png",
"doge":"bba7c12aa51fed0199c241465560dfc2714c593e.png",
"妙啊":"b4cb77159d58614a9b787b91b1cd22a81f383535.png",
"吃瓜":"4191ce3c44c2b3df8fd97c33f85d3ab15f4f3c84.png",
"辣眼睛":"35d62c496d1e4ea9e091243fa812866f5fecc101.png",
"滑稽":"d15121545a99ac46774f1f4465b895fe2d1411c3.png",
"笑哭":"c3043ba94babf824dea03ce500d0e73763bf4f40.png",
"呲牙":"b5a5898491944a4268360f2e7a84623149672eb6.png",
"打call":"431432c43da3ee5aab5b0e4f8931953e649e9975.png",
"歪嘴":"4384050fbab0586259acdd170b510fe262f08a17.png",
"嫌弃":"de4c0783aaa60ec03de0a2b90858927bfad7154b.png",
"喜欢":"8a10a4d73a89f665feff3d46ca56e83dc68f9eb8.png",
"哦呼":"362bded07ea5434886271d23fa25f5d85d8af06c.png",
"酸了":"92b1c8cbceea3ae0e8e32253ea414783e8ba7806.png",
"大哭":"2caafee2e5db4db72104650d87810cc2c123fc86.png",
"害羞":"9d2ec4e1fbd6cb1b4d12d2bbbdd124ccb83ddfda.png",
"疑惑":"b7840db4b1f9f4726b7cb23c0972720c1698d661.png",
"调皮":"8290b7308325e3179d2154327c85640af1528617.png",
"喜极而泣":"485a7e0c01c2d70707daae53bee4a9e2e31ef1ed.png",
"奸笑":"bb84906573472f0a84cebad1e9000eb6164a6f5a.png",
"笑":"81edf17314cea3b48674312b4364df44d5c01f17.png",
"偷笑":"6c49d226e76c42cd8002abc47b3112bc5a92f66a.png",
"惊讶":"f8e9a59cad52ae1a19622805696a35f0a0d853f3.png",
"捂脸":"6921bb43f0c634870b92f4a8ad41dada94a5296d.png",
"阴险":"ba8d5f8e7d136d59aab52c40fd3b8a43419eb03c.png",
"囧":"12e41d357a9807cc80ef1e1ed258127fcc791424.png",
"呆":"33ad6000d9f9f168a0976bc60937786f239e5d8c.png",
"抠鼻":"cb89184c97e3f6d50acfd7961c313ce50360d70f.png",
"大笑":"ca94ad1c7e6dac895eb5b33b7836b634c614d1c0.png",
"惊喜":"0afecaf3a3499479af946f29749e1a6c285b6f65.png",
"无语":"44667b7d9349957e903b1b62cb91fb9b13720f04.png",
"鼓掌":"895d1fc616b4b6c830cf96012880818c0e1de00d.png",
"点赞":"1a67265993913f4c35d15a6028a30724e83e7d35.png",
"尴尬":"cb321684ed5ce6eacdc2699092ab8fe7679e4fda.png",
"灵魂出窍":"43d3db7d97343c01b47e22cfabeca84b4251f35a.png",
"委屈":"d2f26cbdd6c96960320af03f5514c5b524990840.png",
"傲娇":"010540d0f61220a0db4922e4a679a1d8eca94f4e.png",
"冷":"cb0ebbd0668640f07ebfc0e03f7a18a8cd00b4ed.png",
"疼":"905fd9a99ec316e353b9bd4ecd49a5f0a301eabf.png",
"吓":"9c10c5ebc7bef27ec641b8a1877674e0c65fea5d.png",
"生病":"0f25ce04ae1d7baf98650986454c634f6612cb76.png",
"吐":"06946bfe71ac48a6078a0b662181bb5cad09decc.png",
"捂眼":"c5c6d6982e1e53e478daae554b239f2b227b172b.png",
"嘘声":"e64af664d20716e090f10411496998095f62f844.png",
"思考":"cfa9b7e89e4bfe04bbcd34ccb1b0df37f4fa905c.png",
"再见":"fc510306bae26c9aec7e287cdf201ded27b065b9.png",
"翻白眼":"eba54707c7168925b18f6f8b1f48d532fe08c2b1.png",
"哈欠":"888d877729cbec444ddbd1cf4c9af155a7a06086.png",
"奋斗":"bb2060c15dba7d3fd731c35079d1617f1afe3376.png",
"墨镜":"3a03aebfc06339d86a68c2d893303b46f4b85771.png",
"难过":"a651db36701610aa70a781fa98c07c9789b11543.png",
"撇嘴":"531863568e5668c5ac181d395508a0eeb1f0cda4.png",
"抓狂":"4c87afff88c22439c45b79e9d2035d21d5622eba.png",
"生气":"3195714219c4b582a4fb02033dd1519913d0246d.png",
"口罩":"3ad2f66b151496d2a5fb0a8ea75f32265d778dd3.png",
"鸡腿":"c7860392815d345fa69c4f00ef18d67dccfbd574.png",
"月饼":"89b19c5730e08d6f12fadf6996de5bc2e52f81fe.png",
"雪花":"a41813c4edf8782047e172c884ebd4507ce5e449.png",
"视频卫星":"dce6fc7d6dfeafff01241924db60f8251cca5307.png",
"11周年":"d3b2d5dc028c75ae4df379f4c3afbe186d0f6f9b.png",
"干杯":"8da12d5f55a2c7e9778dcc05b40571979fe208e6.png",
"爱心":"ed04066ea7124106d17ffcaf75600700e5442f5c.png",
"锦鲤":"643d6c19c8164ffd89e3e9cdf093cf5d773d979c.png",
"胜利":"b49fa9f4b1e7c3477918153b82c60b114d87347c.png",
"加油":"c7aaeacb21e107292d3bb053e5abde4a4459ed30.png",
"抱拳":"89516218158dbea18ab78e8873060bf95d33bbbe.png",
"响指":"1b5c53cf14336903e1d2ae3527ca380a1256a077.png",
"保佑":"fafe8d3de0dc139ebe995491d2dac458a865fb30.png",
"支持":"3c210366a5585706c09d4c686a9d942b39feeb50.png",
"拥抱":"41780a4254750cdaaccb20735730a36044e98ef3.png",
"跪了":"f2b3aee7e521de7799d4e3aa379b01be032698ac.png",
"怪我咯":"07cc6077f7f7d75b8d2c722dd9d9828a9fb9e46d.png",
"黑洞":"e90ec4c799010f25391179118ccd9f66b3b279ba.png",
"老鼠":"8e6fb491eb1bb0d5862e7ec8ccf9a3da12b6c155.png",
"福到了":"5de5373d354c373cf1617b6b836f3a8d53c5a655.png",
"W-哈哈":"83d527303c8f62f494e6971c48836487e7d87b1b.png",
"凛冬-生气":"d90bd2fbc13a3cb8d313f6d675f20caf109f60a7.png",
"霜叶-疑问":"ada3aea8594e724511c1daad15fb3b23900d8e24.png",
"煌-震撼":"7bb39ac289bc97fe52af047020a9bf324ecdebe1.png",
"哭泣":"a61abafb8c39defc323b045f30072198007b1c89.png",
"哈哈":"e6449b0bae13b8c97cc65976ff8cdc2c16be0015.png",
"狗子":"6a997106af5bf490f22c80a7acf3be813ee755fc.png",
"羞羞":"f4f9171e4d8c3f30827a8b96ea1ce1beb825ad50.png",
"亲亲":"2f72bae7b834d499f259c833f7011d5ed8748fd1.png",
"耍帅":"d7a38b08d1f1cc35b19c35041f29ffcc48808e87.png",
"气愤":"069b029d17a086ab475fd331697a649e234850bb.png",
"高兴":"416570a8aca7be12fb2c36e4b846906653f6d294.png",
"doge-圣诞":"1afb5eb96846e0876071eeecb47be95dbf55f08d.png",
"妙啊-圣诞":"1cdb10e4b6c6743a1ec96f1579e3ef3045a8f225.png",
"呲牙-圣诞":"ae4395c1e29e9a2db0c9ccc4c0db05c414816e68.png",
"OK-圣诞":"75d1c99cce001d6d103a8fd406616be9f51621ab.png",
"星星眼-圣诞":"195641c30c55f34f9cd82c5e5c32d66a425c7723.png",
"吃瓜-圣诞":"aa6a3022e47b441c7f84d02cacc063a728a561e0.png",
"滑稽-圣诞":"5874276ea716d0e9797f827dcfca4332acf8f0de.png",
"辣眼睛-圣诞":"8080adfe5acdfd0b6b09bd91db24ea7334ac7b44.png",
"打call-圣诞":"2b04dd2d0e55d978ee485e1f7f3c5e355493ab78.png",
"捂脸-圣诞":"9af59557383770c398daac81583e6c4d27d83da7.png",
"十周年":"1eacd3f7816e70aff9c1b1a2e9605240466f599b.png",
"加油武汉":"eb966aaa5b690d3f9308a9f936f5b5a72a7f956b.png",
"粽子":"177999fb7d70d891fbf63b161f26b272e08dc1de.png",
"画风突变":"ba4de7a3f97644038b15195bdc9f82a8fd118e77.png",
"福":"802429a301ac5b35a0480d9526a070ce67cd8097.png",
"tv-白眼":"c1d59f439e379ee50eef488bcb5e5378e5044ea4.png",
"tv-doge":"6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png",
"tv-坏笑":"1f0b87f731a671079842116e0991c91c2c88645a.png",
"tv-难过":"87f46748d3f142ebc6586ff58860d0e2fc8263ba.png",
"tv-生气":"26702dcafdab5e8225b43ffd23c94ac1ff932654.png",
"tv-委屈":"d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png",
"tv-斜眼笑":"911f987aa8bc1bee12d52aafe62bc41ef4474e6c.png",
"tv-呆":"fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png",
"tv-发怒":"34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png",
"tv-惊吓":"0d15c7e2ee58e935adc6a7193ee042388adc22af.png",
"tv-呕吐":"9f996894a39e282ccf5e66856af49483f81870f3.png",
"tv-思考":"90cf159733e558137ed20aa04d09964436f618a1.png",
"tv-微笑":"70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png",
"tv-疑问":"0793d949b18d7be716078349c202c15ff166f314.png",
"tv-大哭":"23269aeb35f99daee28dda129676f6e9ea87934f.png",
"tv-鼓掌":"1d21793f96ef4e6f48b23e53e3b9e42da833a0f6.png",
"tv-抠鼻":"c666f55e88d471e51bbd9fab9bb308110824a6eb.png",
"tv-亲亲":"a8111ad55953ef5e3be3327ef94eb4a39d535d06.png",
"tv-调皮":"b9c41de8e82dd7a8515ae5e3cb63e898bf245186.png",
"tv-笑哭":"1abc628f6d4f4caf9d0e7800878f4697abbc8273.png",
"tv-晕":"5443c22b4d07fb1907ccc610c8e6db254f2461b7.png",
"tv-点赞":"f85c354995bd99e28fc76c869bfe42ba6438eff4.png",
"tv-害羞":"a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png",
"tv-睡着":"8b196675b53af58264f383c50ad0945048290b33.png",
"tv-色":"61822c7e9aae5da76475e7892534545336b23a6f.png",
"tv-吐血":"09dd16a7aa59b77baa1155d47484409624470c77.png",
"tv-无奈":"ea8ed89ee9878f2fece2dda0ea8a5dbfe21b5751.png",
"tv-再见":"180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png",
"tv-流汗":"cead1c351ab8d79e9f369605beb90148db0fbed3.png",
"tv-偷笑":"bb690d4107620f1c15cff29509db529a73aee261.png",
"tv-抓狂":"fe31c08edad661d63762b04e17b8d5ae3c71a757.png",
"tv-黑人问号":"45821a01f51bc867da9edbaa2e070410819a95b2.png",
"tv-困":"241ee304e44c0af029adceb294399391e4737ef2.png",
"tv-打脸":"56ab10b624063e966bfcb76ea5dc4794d87dfd47.png",
"tv-闭嘴":"c9e990da7f6e93975e25fd8b70e2e290aa4086ef.png",
"tv-鄙视":"6e72339f346a692a495b123174b49e4e8e781303.png",
"tv-腼腆":"89712c0d4af73e67f89e35cbc518420380a7f6f4.png",
"tv-馋":"fc7e829b845c43c623c8b490ee3602b7f0e76a31.png",
"tv-可爱":"9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png",
"tv-发财":"34db290afd2963723c6eb3c4560667db7253a21a.png",
"tv-生病":"8b0ec90e6b86771092a498c54f09fc94621c1900.png",
"tv-流鼻血":"c32d39db2737f89b904ca32700d140a9241b0767.png",
"tv-尴尬":"7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png",
"tv-大佬":"093c1e2c490161aca397afc45573c877cdead616.png",
"tv-流泪":"7e71cde7858f0cd50d74b0264aa26db612a8a167.png",
"tv-冷漠":"b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png",
"tv-皱眉":"72ccad6679fea0d14cce648b4d818e09b8ffea2d.png",
"tv-鬼脸":"0ffbbddf8a94d124ca2f54b360bbc04feb6bbfea.png",
"tv-调侃":"4bc022533ef31544ca0d72c12c808cf4a1cce3e3.png",
"tv-目瞪口呆":"0b8cb81a68de5d5365212c99375e7ace3e7891b7.png",
"tv-白眼-动态":"48f75163437445665a9be80bb316e4cb252c5415.gif",
"tv-doge-动态":"302d6c88c63ed162c81a49cafe7ed2709e6fb955.gif",
"tv-坏笑-动态":"5d2572efd09aab5dde9e2a198bb3f9ac1e2a982e.gif",
"tv-难过-动态":"9c6b41008a67755410f712334c64313df5f91b3f.gif",
"tv-生气-动态":"1902a5a2df5b5c931d88c12f0feb264b1e109d0d.gif",
"tv-委屈-动态":"af5a5853edb43a8178a8cb5df707fa5e88143699.gif",
"tv-斜眼笑-动态":"c66568b471192ca1f62f6ed4384dc1b283ab7508.gif",
"tv-呆-动态":"d3fa91e4db9215eb1e20ab9da44f1214aa4bda7b.gif",
"tv-发怒-动态":"3959eb81b952e4fa8d269d98f9e3639172d84073.gif",
"tv-惊吓-动态":"13549060757fcd92b11d0657d9b3b6038f97abb6.gif",
"tv-呕吐-动态":"db58e9442aae26694af18cc1683607cca3a16763.gif",
"tv-思考-动态":"b63f9146bfd985af014f8d6d4bdb498805be48f9.gif",
"tv-微笑-动态":"b98656855d782f61cb8edc7f7fca6563ecafff7e.gif",
"tv-疑问-动态":"fce1b1a0f3b0e39a2dc16a18508dba7b91e929f4.gif",
"tv-大哭-动态":"cba61f05f3039b02a7ffc0dfcd9d7995df9fdd74.gif",
"tv-鼓掌-动态":"be106e6b265883a9f28fbe10f7b765701e2618d4.gif",
"tv-抠鼻-动态":"696d9f93e722144dc2a78aeffc569418fdf3d565.gif",
"tv-亲亲-动态":"3534ea44ab74bd20352b88c245a06c4b4c46d271.gif",
"tv-调皮-动态":"fcd967395fd14e4dd5829fa7e8a967ce23205e52.gif",
"tv-笑哭-动态":"1c2fd1e8c9dde12812f86e5d4cbddd8993d98082.gif",
"tv-晕-动态":"030040ec5c9ddc9e3d067658c4139e7314ab42f8.gif",
"tv-点赞-动态":"30ecff401245fb56bcc1cf588d1809ac1ab1607c.gif",
"tv-害羞-动态":"411a3e459e8580f5bfd9f639a408247c4b509935.gif",
"tv-睡着-动态":"3c8b5e293261287a6203597e29b3de07df4d18c6.gif",
"tv-色-动态":"a0c6d99ab0ab63b8648f5283ff72cec04b604828.gif",
"tv-吐血-动态":"e17e4539e169d14a3389ff147afea760cebe5de5.gif",
"tv-无奈-动态":"eb4cb5f07cfd177c7e6a7914316717e56d9cc1d0.gif",
"tv-再见-动态":"344f61609ecce2008520dc8a977b6169215748a9.gif",
"tv-流汗-动态":"390bccec65eaff536bd5bb2a0c5b8b0bdea47334.gif",
"tv-偷笑-动态":"7f11e6f7f63e79112b833bd41fa13a83d7cd8474.gif",
"tv-抓狂-动态":"a476b93ecd8e94ac3257323fd822f91cef212de2.gif",
"tv-黑人问号-动态":"b609adf664be33224a9923262031165ae3e34cd2.gif",
"tv-困-动态":"91c2bf34ecf842d7016c01d841db3d4074bd281f.gif",
"tv-打脸-动态":"b0fad4856e59c1240e448437da3287bb5ce547e5.gif",
"tv-闭嘴-动态":"a3fc5388b09e945be3f18fe23bfed5874a0285b7.gif",
"tv-鄙视-动态":"293b5d459e6264ecf314d20937a936fa672ccd1e.gif",
"tv-腼腆-动态":"30984e8264324f901d19bea85dada7103b695534.gif",
"tv-馋-动态":"2525c5703c594e5f0752f68db8948773caebde47.gif",
"tv-可爱-动态":"f92d20f76258bc5f33fc9d7c5e2a1d41fef19a7c.gif",
"tv-发财-动态":"76131e52c9b033681b4c896c6024d29ef7ec7ec2.gif",
"tv-生病-动态":"beb94829fe04f1a41bd6ca611e1f6ca9ca169afa.gif",
"tv-流鼻血-动态":"8ef473f74a849420da712487b2f56ecca1f695f5.gif",
"tv-尴尬-动态":"e0b84ef5ee3e5b8978e584c7c5a6550c51d15f84.gif",
"tv-大佬-动态":"14ca0c05382b8741940942b2430b7a8d55c02f7e.gif",
"热词系列-知识增加":"142409b595982b8210b2958f3d340f3b47942645.png",
"热词系列-知识增加-虎年":"5637557320fbfb3292307735f0b8acd53a791241.png",
"热词系列-知识增加-圣诞":"d0cc76a75405413771f0a55453af3a12062cb64c.png",
"热词系列-知识增加-春节":"7496ff01fbac5304aa807732f1531d5986a0dfc3.png",
"热词系列-知识增加-愚人节":"62fb11a7d2726d4b2406da41eb3d215a81c4e170.png",
"嘉然-mua":"74ea9b89f8923df6a123cabe6053762b9e776387.png",
"嘉然-安详":"312359401cc72c34fcea3654cdba42db0f9f3dd0.png",
"嘉然-暗中观察":"3acf0b43facfd0601f5ab88cca6e401aa4f5a02e.png",
"嘉然-锤头丧气":"e6342840311ffeba8f2c58d1c360d76644e75dff.png",
"嘉然-点赞":"7017d90d4ceb9ea042cef8adc70d35eeb1f95e7e.png",
"嘉然-嘉人们":"d270845c9590da372e9b311cd6d976459acd1087.png",
"嘉然-嘉速心动":"387035168f40ca81afce8b38303c60ceb0c5dc6c.png",
"嘉然-流口水":"78bfeff475ad56a6d9379164b099f1ad8ecd7086.png",
"嘉然-你好":"d1530f972a59bca97bc4b8acf4f7e16f989f37c3.png",
"嘉然-一米八":"3c95c19137e964807a46effd8f83a443eeddd71c.png",
"嘉然-一眼真":"ff436f5821db8b871517d0e5bb7ade7b64d3d0bf.png",
"嘉然-biu":"4e94191613e85e68328062df15fd255357494e35.png",
"嘉然-绷不住了":"4f0a9ee7708d71083dba4e79768ff0b7c308eaf4.png",
"嘉然-笔芯":"332a6df0e6def8da77e09310a62f3bffdc397640.png",
"嘉然-番茄炒蛋拳":"27eb784d39e981f44b8fa586616c6ab2ac0078cf.png",
"嘉然-嘉油":"ee4d1908e2e9d0fe7ccd9c3a0423ecdc5f4d05aa.png",
"嘉然-剪刀手":"04270781acabb35b309dc761b1aa7528a9e3f336.png",
"嘉然-略略略":"88a0b8bf60d3582b2080d03c343f2a5e233b62ee.png",
"嘉然-敲打":"438405970cbab6c6a06119bd9d9b474df62eb50c.png",
"嘉然-吓人":"aa75d5dc15de31208304be653eef0267f152f172.png",
"嘉然-粉色小恶魔":"c406c3c64973459162b8c18ea8928431fc837809.png",
"嘉然-干饭":"26c5e8f82ac6b0aed88af93b21d0daaf64716f3e.png",
"嘉然-嘉步":"72f1d84d13b45c0bdec9967d75f4320abce67cd4.png",
"嘉然-我有嘉心糖":"7579c6085f984f39ff0f6a2cb710301a2b113fac.png",
"嘉然-我们是":"770355925c296cf63736866a3531f1a0a9ba7b80.png",
}

在 valine 输入界面增加背景图

使用方法如下，将 CSS 加到你的博客样式文件中. 我是在Butterfly/source/css/veditor.css目录下

#veditor {
	background-image: url(https://cdn.jsdelivr.net/gh/drew233/cdn/20200409110727.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	background-color: rgba(255, 255, 255, 0);
	resize: vertical
}
#veditor:focus{
	background-position-y: 200px;
	transition: all 0.2s ease-in-out 0s;
}

Butterfly/source/js/valine.js添加以下代码

//可以与 valine 的配置 js 文件放一起，或放置到公共 js 文件中
$("#veditor").focus(function(){$(this).css("background-image","none");});
$("#veditor").blur(function(){
      $(this).css("background-image","url(https://cdn.jsdelivr.net/gh/drew233/cdn/20200409110727.webp)");
   }
);

引用方式在Butterfly/_config.yml中inject添加

inject:
   head:
     - <link rel="stylesheet" href="/css/veditor.css">
   bottom:
     - <script src="/js/veditor.js"></script>

在这里插入图片描述

添加留言板页面

在butterfly._config.yaml中添加留言板: /messageboard/ || fa-fw fas fa-comment-dots一行

在这里插入图片描述

在source目录下创建messageboard文件夹，新建文件index.md

在这里插入图片描述

添加以下内容

---
title: 留言板
date: 2022-01-14 15:27:27
type: "messageboard"
---

# 欢迎来到我的博客！

> 欢迎在这里留言！任何问题都可以在这里留言，我会及时回复的，添加email可以获得更快的回复速度，在nickname栏目输入QQ号可以直接获取你的QQ头像。

Valine 评论系统美化

添加博主，小伙伴，访客等标签，以及评论者的操作系统，浏览器的图标。

引入修改版 valine.min.js

在主题配置文件中查找 valine.min.js ，找到后将原本的 valine.min.js 注释掉，引入修改的 valine.min.js

valine: https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

修改 valine.pug
在 themes\butterfly\layout\includes\third-party\comments\ 目录下找到 valine.pug ，用编辑器打开它

master: '此处写博主邮箱的32位小写md5编码',
friends: ["此处写小伙伴邮箱的32位小写md5编码"],
tagMeta: ["博主","小伙伴","访客"],

运行

做出以上修改后保存文件，就可以运行了

先运行 hexo clean ，后运行hexo g

页脚显示网站运行时间

Butterfly 主题

编辑博客根目录/themes/Butterfly/layout/includes/footer.pug文件，在最后一行添加以下内容：

#running-time
  script.
    setInterval(()=>{
      let create_time = Math.round(new Date('2021-12-29 17:56:34').getTime() / 1000);
      let timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
      let second = timestamp - create_time;
      let time = new Array(0, 0, 0, 0, 0);
      if(second >= 365 * 24 * 3600) {
        time[0] = parseInt(second / (365 * 24 * 3600));
        second %= 365 * 24 * 3600;
      }
      if(second >= 24 * 3600){
        time[1] = parseInt(second / (24 * 3600));
        second %= 24 * 3600;
      }
      if(second >= 3600){
        time[2] = parseInt(second / 3600);
        second %= 3600;
      }
      if(second >= 60){
        time[3] = parseInt(second / 60);
        second %= 60;
      }
      if(second > 0){
        time[4] = second;
      }
      currentTimeHtml='本站已安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';
      document.getElementById("running-time").innerHTML = currentTimeHtml;
    },1000);