本文最后更新于:几秒前
hexo+cactus魔改笔记+bug修复记录(自22.10.15始) 1、目录跳转功能失效 mongodb+srv://yaowenjin:wsywj990226@blog.ipmgc19.mongodb.net /?retryWrites=true&w=majority
找到【…\blog\node_modules\hexo-toc\lib】中的filter.js,将28-31行修改成以下代码
1 2 3 4 $title.attr ('id' , id);
2、添加版权提醒 在post主页的前端渲染代码【…\blog\themes\cactus\layout\post.ejs】中的页面末尾加入一个div,写入以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <div> <ul class ="post-copyright" > <li class ="post-copyright-link" > <strong > 本文作者:</strong > <a href ="/" > <%= config.author %></a > </li > <li class ="post-copyright-link" > <strong > 本文标题:</strong > <a href ="{{ url_for(config.permalink) }}" > <%- partial('_partial/post/title', { post: page, index: true, class_name: '' }) %></a > </li > <li class ="post-copyright-link" > <strong > 本文链接:</strong > <a title ="<%- page.title %>" > <%- config.url %>/<%- page.path %></a > </li > <li class ="post-copyright-license" > <strong > 版权声明: </strong > 本文由 <%- config.author %> 原创,采用 <a href ="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh" title ="Attribution-NonCommercial-NoDerivatives 4.0 International" rel ="license" target ="_blank" > CC BY-NC-ND 4.0</a > , 转载请保留以上声明信息! </li > </ul > </div>
然后在网页的样式文件中加入样式设置,这里我偷了个懒直接加到了总文件
【…\blog\themes\cactus\source\css\style.styl】中
1 2 3 4 5 6 7 .post-copyright { margin : 2em 0 0 ; padding : 0.5em 1em ; border-left : 3px solid #FF1700 ; background-color : #F9F9F9 ; list-style : none; }
3、添加图片放大功能
这里参考了cactus使用上fancybox图片放大 的实现步骤。
首先在【…\blog\themes\cactus\layout_partial\head.ejs】中加入css的引入文件
1 2 3 <% if (theme.fancybox .enabled ) {%> <link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" /> <% } %>
并在同级的script.ejs中加入调取代码
1 2 3 4 <!-- FancyBox --> <% if (theme.fancybox .enabled ) {%><script src ="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js" > </script > <% } %>
写到这里,网页可以通过在每个img加上标签属性调用,在这里我们直接在渲染引擎hexo-renderer-marked中对img加入fancybox的渲染引擎。
找到【..\node_modules\hexo-renderer-marked\lib/renderer.js】,搜索”img”并将img相关的代码修改如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 let out = `<img src="${encodeURL(href)} "` ;if (text) out += ` alt="${text} "` ;if (title) out += ` title="${title} "` ;if (lazyload) out += ' loading="lazy"' ; out += '>' ;let out = `<a data-fancybox="gallery" data-src="${href} " data-caption="${text} "><img src="${encodeURL(href)} "` ;if (text) out += ` alt="${text} "` ;if (title) out += ` title="${title} "` ;if (lazyload) out += ' loading="lazy"' ; out += '></a>' ;
最后,在blog的配置文件_config.yaml中打开开关即可
1 2 3 fancybox: enabled: true
4、添加gittalk评论功能 gittalk是github可提供的一种application,其设置相对比较简单。
首先确定一个github的仓库用于保存评论,这里可以直接使用博客的库,比如我的库(paopao0226.github.io),然后打开github,按照Setting–>Developing settings–>OAuth application的过程进行
如果没有用过OAuth的朋友应该是需要创建一个新的。
1 2 3 4 Application name: 应用的名字,可以随便取(其他人想要评论的话,需要登录Github授权,授权的时候显示的就是这里的Application name) Homepage URL: 应用主页的完整URL,如: https://pyihe.github.io/ Application description: 应用描述,选填项 Authorization callback URL: 登录授权后回调的页面,直接填成与Homepage URL一样
完成OAuth Application的申请,并申请创建密钥之后,就会得到如下界面,其中Client ID和Client Sercets记住,之后要用到。
下面我们继续设置gittalk,在【…\blog\themes\cactus\_config.yml】
1 2 3 4 5 6 7 8 9 10 11 disqus: enabled: false shortname: paopao0226 gitalk: enabled: true owner: paopao0226 repo: paopao0226.github.io admin: paopao0226 clientID: XXX clientSecret: XXX
然后在【…\blog\themes\cactus\layout_partial\comment.ejs】中加入以下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <% if (page.comments && theme.disqus .enabled ){ %> <div class ="blog-post-comments" > <div id ="disqus_thread" > <noscript > <%= __('comments.no_js') %></noscript > </div > </div > <% } %> <% if (page.comments && theme.gitalk .enabled ){ %> <link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css" > <script src ="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js" > </script > <script src ="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js" > </script > <div id ="gitalk-container" > </div > <script type ="text/javascript" > var gitalk = new Gitalk ({ clientID : '<%= theme.gitalk.clientID %>' , clientSecret : '<%= theme.gitalk.clientSecret %>' , id : md5 (window .location .pathname ), repo : '<%= theme.gitalk.repo %>' , owner : '<%= theme.gitalk.owner %>' , admin : '<%= theme.gitalk.admin %>' , distractionFreeMode : '<%= theme.gitalk.on %>' }) gitalk.render ('gitalk-container' ) </script > <% } %>
配置gittalk可能出现的两种错误可以参考Gridea 配置Gitalk 的异常:Error Bad credentials 和 Error Not Found
5、加入博客加密 下载encrypt插件
npm install –save hexo-blog-encrypt
在每个需要加密的文件头加入password字段
1 2 3 4 title: Hello World... password: 123456...
可以在博客根目录的配置文件_config.yml中加入整体的文本配置
1 2 3 4 5 6 7 8 9 10 # 安全 encrypt: # hexo-blog-encrypt abstract: 这里有东西被加密了,需要输入密码查看哦。 message: 您好, 这里需要密码. tags: - {name: tagName, password: 密码A} - {name: tagName, password: 密码B} template: <div id ="hexo-blog-encrypt" data-wpm =" {{hbeWrongPassMessage }} " data-whm =" {{hbeWrongHashMessage }} " ><div class ="hbe-input-container" > <input type ="password" id ="hbePass" placeholder =" {{hbeMessage }} " /><label > {{hbeMessage }} </label > <div class ="bottom-line" > </div > </div > <script id ="hbeData" type ="hbeData" data-hmacdigest =" {{hbeHmacDigest }} " >{{hbeEncryptedData }} </script > </div > wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试. wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
6、加入类github活动日历
参考自Hexo主题美化 | 给你的博客加上GITHUB日历云和分类雷达图 - 腾讯云开发者社区-腾讯云 (tencent.com)
首先,将echarts.min.js 下载到本地,并放到博客【…\blog\themes\cactus\source\js】位置,
然后在【…\blog\themes\cactus\layout_partial】位置中新建一个文件【post-calendar.ejs】,将以下代码放进去。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 <div class="container archive-calendar"> <div class="card"> <div id="post-calendar" class="card-content"></div> </div> </div> <script type="text/javascript" src="/js/echarts.min.js"></script> <script type="text/javascript"> let myChart = echarts.init(document.getElementById('post-calendar')); <% var nameMap = (config.language && config.language.indexOf('zh') >= 0) ? 'cn' : 'en'; var titleText = (config.language && config.language.indexOf('zh') >= 0) ? '文章日历' : 'Post Calendar'; // calculate range. var startDate = moment().subtract(1, 'years'); var endDate = moment(); var rangeArr = '["' + startDate.format('YYYY-MM-DD') + '", "' + endDate.format('YYYY-MM-DD') + '"]'; // post and count map. var dateMap = new Map(); site.posts.forEach(function (post) { var date = post.date.format('YYYY-MM-DD'); var count = dateMap.get(date); dateMap.set(date, count == null || count == undefined ? 1 : count + 1); }); // loop the data for the current year, generating the number of post per day var i = 0; var datePosts = '['; var dayTime = 3600 * 24 * 1000; for (var time = startDate; time <= endDate; time += dayTime) { var date = moment(time).format('YYYY-MM-DD'); datePosts = (i === 0 ? datePosts + '["' : datePosts + ', ["') + date + '", ' + (dateMap.has(date) ? dateMap.get(date) : 0) + ']'; i++; } datePosts += ']'; %> /* title: { top: 0, text: '<%- titleText %>', left: 'center', textStyle: { color: '#3C4858' } }, */ let option = { tooltip: { padding: 10, backgroundColor: '#555', borderColor: '#777', borderWidth: 1, formatter: function (obj) { var value = obj.value; return '<div style="font-size: 14px;">' + value[0] + ':' + value[1] + '</div>'; } }, visualMap: { show: true, showLabel: true, categories: [0, 1, 2, 3, 4], calculable: true, inRange: { symbol: 'rect', color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'] }, itemWidth: 12, itemHeight: 12, orient: 'horizontal', left: 'center', bottom: 0 }, calendar: [{ left: 'center', range: <%- rangeArr %>, cellSize: [13, 13], splitLine: { show: false }, itemStyle: { color: '#196127', borderColor: '#fff', borderWidth: 2 }, yearLabel: { show: true }, monthLabel: { nameMap: '<%- nameMap %>', fontSize: 11 }, dayLabel: { formatter: '{start} 1st', nameMap: '<%- nameMap %>', fontSize: 11 } }], series: [{ type: 'heatmap', coordinateSystem: 'calendar', calendarIndex: 0, data: <%- datePosts %> }] }; myChart.setOption(option); </script>
之后,找到【…\blog\themes\cactus\source\css】中的【style.styl】文件,这个文件是整个博客的总CSS样式。在文件末尾加入:
1 2 3 4 5 #post-calendar { width : 90% ; height : 180px ; }
其中,日历的宽度和高度均可以自行调整。这样就调整好了整体的配置。最后,将配置语句放到博客的任何位置。
1 2 3 4 <span class="h2"> <%= __('Post Calender') %> <%- partial('_partial/post-calendar') %> </span>
比如,我是将日历放到了主页,因此在主页的ejs文件【…\blog\themes\cactus\layout\index.ejs】中加入此语句。
这样就完成啦。
7、添加附件下载功能 hexo默认打开了文件的链接功能,只需找到blog的配置文件,搜索【post_asset_folder】,将开关都打开。
然后在【…\blog\source】下新建一个文件夹download,将文件都放进去。
在文件中使用
1 [点击下载 ](/download/文件名称.格式 )
hexo会直接引导到download的位置访问文件。
8、添加文本复制批注
参考自CSDN新手如何给Hexo博客在复制时添加版权声明_只是学习学习的博客-CSDN博客
直接在post对应的ejs文件中写入js监听,找到【…\blog\themes\cactus\layout\post.ejs】,在其末尾加入以下js语句
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <script> function setClipboardText (event ){ let clipboardData = event.clipboardData || window .clipboardData ; if (!clipboardData) { return ; } event.preventDefault (); let text = window .getSelection ().toString (); if (text) { event.preventDefault (); var copyright = '\n\n' + '——————————————————————' + '\n版权声明:本文为「Ywj226」的原创文章,遵循CC BY-NC-ND 4.0版权协议,转载请附上原文出处链接及本声明。' + '\n原文链接:<%= page.permalink %>' clipboardData.setData ('text/plain' , text + copyright); } }; var contents = document .getElementsByClassName ("content" ); contents[0 ].addEventListener ('copy' ,function (e ){ setClipboardText (e); }); </script>
重新启动即可。
9、添加追番页面(√)
参考自Hexo Bilibili Bangumi - hexo 番剧页面插件,可选数据源:Bilibili, Bangumi - (hexo-bilibili-bangumi) (opensourcelibs.com)
首先设置一个界面用来展示追番界面,这里不再赘述
然后,使用npm指令安装插件
1 npm install hexo-bilibili-bangumi --save
之后在博客配置文件中加入以下配置文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 bangumi: enable: true path: /bilibili/ vmid: title: '追番' quote: '生命不息,追番不止!' show: 1 lazyload: true loading: metaColor: color: webp: progress: extra_options: key: value cinema: enable: true path: vmid: title: '追剧列表' quote: '生命不息,追剧不止!' show: 1 lazyload: true loading: metaColor: color: webp: progress: extra_options: key: value
在每次进行hexo clean
与hexo g
之后,再运行一步hexo bangumi -u
来更新番剧数据即可。
若需要加入在b站上未上线的番剧,可以自行在【…\blog\source_data】文件夹中新建一个【extra_bangumis.json】文件,然后以json格式将数据自行写入。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 { "watchedExtra" : [ { "title" : "缘之空" , "type" : "番剧" , "area" : "日本" , "cover" : "https://cdn.jsdelivr.net/gh/mmdjiji/bangumis@main/Yosuga-no-Sora/cover.jpg" , "totalCount" : "全12话" , "id" : 0 , "follow" : "不可用" , "view" : "不可用" , "danmaku" : "不可用" , "coin" : "不可用" , "score" : "不可用" , "des" : "远离都市的田园小镇,奥木染。春日野悠带着妹妹穹,来到了这座城镇。坐落在这里的是,儿时暑假经常造访的充满回忆的已故祖父的家。双亲因意外事故而丧生,变得无依无靠..." } ] }
这样就完成了。