Article List
Create a new source\css\twikoo.css file and add the following code:
1/* Set text content :nth-child(1) selects the first element */ 2.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before { 3 content: "Entering your QQ number will automatically fetch your nickname and avatar🐧"; 4} 5 6.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before { 7 content: "Replies will be sent to your email📧"; 8} 9 10.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before { 11 content: "You can access your website via your nickname🔗"; 12} 13 14/* Display when the user clicks on the input field */ 15.
...
Temporarily hosted my blog on GitHub Pages and pointed my personal domain to the blog. However, every time I configured the Custom domain and accessed it successfully, it would eventually return a 404 error without notice. After some investigation, I found that the Custom domain setting was being reset and becoming invalid after each hexo deploy.
Add a CNAME file in the source folder of the project, and fill in your domain address in the file.
...
Just enabled PJAX and ran into issues. Some JS functions, despite having the data-pjax attribute, still didn’t reload. This problem appeared in a user-customized JS function for calculating reading time.
1// Original function 2aaaaaaaaaaaaaaa; 3// Current function 4function pjax_reload() { 5 aaaaaaaaaaaaaaa; 6} 7document.addEventListener("pjax:complete", function () { 8 pjax_reload(); // Reload the above function after Pjax completes 9});
AJAX AJAX = Asynchronous JavaScript and XML, is a technique used to create fast and dynamic web pages. By exchanging small amounts of data with the server in the background, AJAX allows web pages to be updated asynchronously. This means that parts of the webpage can be updated without reloading the entire page. Traditional web pages (without AJAX) must reload the entire page to update content. There are many applications of AJAX, with one of the most common being when the browser automatically loads the next page of content when you scroll to the bottom.
...
Create a readtime.js file in the \themes\butterfly\source\js directory.
1let oSpan = document.getElementsByTagName("readtime"); 2let localhostTime = new Date(); // Get the time when the page is opened 3function tow(n) { 4 return n >= 0 && n < 10 ? "0" + n : "" + n; 5} 6setInterval(function () { 7 let goTime = new Date(); // Get the dynamic time 8 let diffTime = goTime.getTime() - localhostTime.getTime(); 9 var second = Math.
...
The internship company requires the use of Angular. I have learned VUE and have some understanding of React, but Angular is something I haven’t used before. Time to start from scratch.
Installing node Check the version. Previously, I always used the cmd window. Today, I learned about the powershell window, which feels quite similar. Use shift+win+right-click to open it.
1$ node -v 2$ npm -v Installing Angular Scaffolding 1$ npm install -g @angular/cli@14.
...
Get Icon Unicode Value Find the desired icon on fontawesome and note down the Unicode value.
Configuration File Modify the title icon in the theme configuration file _config.butterfly.yml under beautify:
1beautify: 2 enable: true 3 field: post # site/post 4 # title-prefix-icon: '\f0c1' original chain title 5 title-prefix-icon: '\f14e' 6 title-prefix-icon-color: '#F47466' Create a new title_icon.css file in the \themes\butterfly\source\css directory and add:
1/* Article page H1-H6 icon style effects */ 2h1::before, h2::before, h3::before, h4::before, h5::before, h6::before { 3 -webkit-animation: ccc 1.
...
Create a new article_transparent.css file in the \themes\butterfly\source\css directory and add the following:
1/* Homepage article section background transparency */ 2#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post { 3 background: var(--light_bg_color) 4} 5 6/* Sidebar transparency */ 7#aside-content .card-widget { 8 background: var(--light_bg_color) 9} In the theme configuration file _config.butterfly.yml, under inject, directly introduce the css file in the head section.
1- <script src="/css/article_transparent.js"></script> ogImage: https://image.coldcoding.top/file/AgACAgQAAyEGAASUgNIDAAOdZ-LLW2SY1yk2VuSGbtbqq3iEFT4AAgPGMRuknBlTlzRoYu-UvNoBAAMCAAN3AAM2BA.jpg
Create a new funny_title.js file in the \themes\butterfly\source\js directory and add the following code:
1var OriginTitle = document.title; 2var titleTime; 3document.addEventListener('visibilitychange', function () { 4 if (document.hidden) { 5 $('[rel="icon"]').attr('href', "/funny.ico"); 6 document.title = '╭(°A°`)╮ Why did you leave ~'; 7 clearTimeout(titleTime); 8 } 9 else { 10 $('[rel="icon"]').attr('href', "/favicon.ico"); 11 document.title = '(ฅ>ω<*ฅ) Welcome back ~' + OriginTitle; 12 titleTime = setTimeout(function () { 13 document.title = OriginTitle; 14 }, 2000); 15 } 16}); In the theme configuration file _config.
...
Snow Effect Create a new snow.js file in the \themes\butterfly\source\js directory and add the following code: 1if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { 2 // Do not display on mobile devices 3 } 4else { 5 (function($){ 6 $.fn.snow = function(options){ 7 var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'), 8 documentHeight = $(document).height(), 9 documentWidth = $(document).width(), 10 defaults = { 11 minSize : 10, 12 maxSize : 20, 13 newOn :
...