魔改教程 hexo Hexo 魔改 - 自动随机设置文章头部图片及图片主色调 Pupper 2023-09-04 2025-06-17 效果展示
一、 文件创建 在 themes/anzhiyu/scripts/
文件夹中创建 getTopImageColor.js
文件,切入一下代码
RANDOM_IMG
为自建的随机图片 api,不确定其他网站能不能使用,需要谨慎使用代码以 “—-” 作为分隔符,请确保文章中没有多余的 “—-” 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 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 const fs = require ("fs" );const path = require ("path" );const axios = require ("axios" );const yaml = require ("js-yaml" );const https = require ("https" ); const { type } = require ("os" );const POSTS_DIR = process.cwd () + "/source/_posts" ;const RANDOM_IMG = "https://random-img.pupper.cn/api" ;const httpsAgent = new https.Agent ({ rejectUnauthorized : false , }); async function getCoverImage ( ) { try { const response = await axios.get (RANDOM_IMG , { maxRedirects : 0 , validateStatus : (status ) => status === 302 , httpsAgent, }); return response.headers .location ; } catch (error) { console .error ("Error fetching cover image:" , error); } } async function getMainColor (url ) { try { const response = await axios.get (`${url} ?imageAve` ); const mainColorData = response.data .RGB ; const mainColor = `#${mainColorData.slice(2 )} ` ; return mainColor; } catch (error) { console .error ("Error fetching main color:" , error); } } function processFiles (dir ) { const files = fs.readdirSync (dir); for (const file of files) { const fullPath = path.join (dir, file); if (fs.statSync (fullPath).isDirectory ()) { processFiles (fullPath); } else if (path.extname (fullPath) === ".md" ) { addCoverAndMainColor (fullPath); } } } function formatISO8601ToCustomFormat (isoDateString ) { if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/ .test (isoDateString)) { return -1 ; } const date = new Date (isoDateString); const year = date.getUTCFullYear (); const month = (date.getUTCMonth () + 1 ).toString ().padStart (2 , "0" ); const day = date.getUTCDate ().toString ().padStart (2 , "0" ); const hours = date.getUTCHours ().toString ().padStart (2 , "0" ); const minutes = date.getUTCMinutes ().toString ().padStart (2 , "0" ); const seconds = date.getUTCSeconds ().toString ().padStart (2 , "0" ); return `${year} -${month} -${day} ${hours} :${minutes} :${seconds} ` ; } async function addCoverAndMainColor (filePath ) { const content = fs.readFileSync (filePath, "utf8" ); const yamlSection = content.match (/---\n([\s\S]*?)---/ ); if (!yamlSection) return ; const data = yaml.load (yamlSection[1 ]); let updated = false ; if (data.date ) { const _date = formatISO8601ToCustomFormat (data.date ); if (_date === -1 ) { updated = false ; } else { data.date = _date; updated = true ; } } if (data.update ) { const _update = formatISO8601ToCustomFormat (data.update ); if (_update === -1 ) { updated = false ; } else { data.update = _update; updated = true ; } } if (!data.cover ) { data.cover = await getCoverImage (); updated = true ; } if (!data.main_color ) { data.main_color = await getMainColor (data.cover ); updated = true ; } if (updated) { const updatedYaml = yaml.dump (data); const updatedContent = content.replace (yamlSection[1 ], updatedYaml); fs.writeFileSync (filePath, updatedContent, "utf8" ); console .log (`Updated: ${filePath} ` ); } } processFiles (POSTS_DIR );hexo.extend .filter .register ("before_generate" , async () => { console .log ("Automatically updating cover and main color..." ); await processFiles (POSTS_DIR ); console .log ("Cover and main color updated successfully!" ); });
二、 执行 在执行 hexo g
构建静态网站时会自动执行,如果需要调试,请注释一下代码
1 2 3 4 5 6 在文件底部添加这段代码; hexo.on ("before_generate" , async () => { console .log ("Automatically updating cover and main color..." ); await processFiles (POSTS_DIR ); console .log ("Cover and main color updated successfully!" ); });
三、 下班,开溜~~~