前情提要 -> 2021版博客制作记录.

我幸西天取经

博主最近沉迷google ai studio.
拜用Gemini大模型的算力嘎嘎抄美丽排版.
……前端开发最严厉的父亲,的名称言之有理.

个站人爱用几件套.
日历,Todo list,扣扣空间,提问箱,博客.
博主这个月搓完了前两个,太上瘾,把博客的排版也翻新了一下。
感叹如果晚几年出生,做博客不会像当年花半年之久.
具体项目有缘再新开记录聊聊,这次只聊一下博客的修改.

Google ai studio是react框架下的,跟咱Hexo推崇的 完全静态html文件 不符.
博主原本只想搓点小工具,但看到ai studio的项目库里有个叫flash UI的项目.
好家伙,直接生成UI html模版,还是生成个三合一让你挑选.

在theme forest平台上人维护几年一个小模版,gemini大人30秒建构三个.
博主短短一个月就这样在被gemini反复洗涤认知.

Several spaces in the title

翻了一下flash UI代码,好家伙,人也是直接让gemini生成html file.
prompt:

You are Flash UI. Create a stunning, high-fidelity UI component for: “${trimmedInput}”.

CONCEPTUAL DIRECTION: ${styleInstruction}

VISUAL EXECUTION RULES:

Materiality: Use the specified metaphor to drive every CSS choice. (e.g. if Risograph, use `feTurbulence` for grain and `mix-blend-mode: multiply` for ink layering).
Typography: Use high-quality web fonts. Pair a bold sans-serif with a refined monospace for data.
Motion: Include subtle, high-performance CSS/JS animations (hover transitions, entry reveals).
IP SAFEGUARD: No artist names or trademarks.
Layout: Be bold with negative space and hierarchy. Avoid generic cards.

Return ONLY RAW HTML. No markdown fences.

Generate 3 distinct, highly evocative design directions for: “${trimmedInput}”.

STRICT IP SAFEGUARD:
Never use artist or brand names. Use physical and material metaphors.

CREATIVE EXAMPLES (Do not simply copy these, use them as a guide for tone):

Example A: “Asymmetrical Rectilinear Blockwork” (Grid-heavy, primary pigments, thick structural strokes, Bauhaus-functionalism vibe).
Example B: “Grainy Risograph Layering” (Tactile paper texture, overprinted translucent inks, dithered gradients).
Example C: “Kinetic Wireframe Suspension” (Floating silhouettes, thin balancing lines, organic primary shapes).
Example D: “Spectral Prismatic Diffusion” (Glassmorphism, caustic refraction, soft-focus morphing gradients).

GOAL:
Return ONLY a raw JSON array of 3 NEW, creative names for these directions (e.g. [“Tactile Risograph Press”, “Kinetic Silhouette Balance”, “Primary Pigment Gridwork”]).

装修

思路是这样的.

Gemini虽然嘎嘎牛逼,但不能造轮子.
Hexo这种把大量markdown生成出网站的solution挺好的,还处理了tag和category两种分类,包括搜索.
没必要改,外层刷个漆看起来新就挺好了.
原本的框架不变,只找出hexo生成的几个砥柱div class,在css上做手脚.
一个header,一个side bar,一个content-wrap.
附加search-popup,共四块,不多.

生成几个喜欢的flash UI模版.
因为它一个文件就包括了所有的内容,没有用太多函数,参数(variables),好对应参考.
主要靠这个.

以前给next加的花里胡哨多余玩意全删了.

这次回去读next的源代码跟五年前比有新的心得.
五年前没读懂是因为next代码里用的用了很多参数,文件也一条套一条.

Next的排版的outline是这个文件主持的.

1	themes > next > layout > _layout.swig

里面分到了各个子单位处理具体子单位的布局.

大部分的css参数写在的是这里.

1	themes > next > source > main.styl

还有是…
以前认为找不到要修改的地方是因为缺少知识,现在发现是搜索方法不对.
我记载博客用的IDE是atom,就算是非编译类IDE,也以应该支持在folder下搜索文件,这会大大加快工作效率.
Notepad++是否有我不清楚(…前世的回忆),但工作时用的Rider是靠谱的把编辑器,该做什么基础款都体验了一下.

结果是这样的.

既然做窗口了,加了个小彩蛋.
用css hide部件的做法做的.

Travel Fund Jar

中途去做了一个打卡储钱罐.

花了些时间调试布局,颜色.
按时间分布做了6个主题.

作为第一个项目花的时间旧了点!比较上头.
按时间切换背景这种功能放在番茄钟或自习室类小网站比较好呢.

不过一两个礼拜断断续续把文件做出来后,花了不少时间在链接netlity上.
Google ai studio最初做出的文件compile不是很好.现在(5月编写时)基本不会纯·静态部署的项目还会报错了.
储钱罐做了数据分离,网站一个public repo,数据private repo.

ai编自己的代码虽快,接第三方服务总是需要人扒文档,试代码…

使用的方法是在其目录下,创造一个netlify(新文件夹)>functions>get-history.js的文件.


// netlify/functions/get-history.js
export async function handler(event) {
  const GITHUB_TOKEN = process.env.GITHUB_TOKEN;
  // Get the specific filename from the URL parameters
  const { file } = event.queryStringParameters;

  const url = `https://raw.githubusercontent.com/mazui3/TravelFundJarData/main/${file}`;

  try {
    const response = await fetch(url, {
      headers: {
        Authorization: `token ${GITHUB_TOKEN}`,
      },
    });

    if (!response.ok) throw new Error(`GitHub responded with ${response.status}`);

    const data = await response.json();

    return {
      statusCode: 200,
      headers: {
      "Content-Type": "application/json",
      // CACHE CONTROL SETTINGS:
      // public: allow caching
      // max-age: browser cache (in seconds)
      // s-maxage: Netlify's "Edge" cache (in seconds)
      "Cache-Control": "public, max-age=0, s-maxage=300"
    },
      body: JSON.stringify(data),
    };
  } catch (err) {
    return { statusCode: 500, body: JSON.stringify({ error: err.message }) };
  }
}

在App.tsx读取数据是:

useEffect(() => {
  const loadHistory = async () => {
    try {
      const [m3Res, sealphieRes] = await Promise.all([
        fetch('/.netlify/functions/get-history?file=m3_history.json'),
        fetch('/.netlify/functions/get-history?file=sealphie_history.json')
      ]);
      if (!m3Res.ok || !sealphieRes.ok) throw new Error('Failed to fetch history');
      const m3Data = await m3Res.json();
      const sealphieData = await sealphieRes.json();
      setM3Logs(m3Data);
      setSealphieLogs(sealphieData);
    } catch (err) {
      console.error("Error loading history:", err);
    }
  };
  loadHistory();
}, []);

旧排版

最后记录一下旧排版.

更改排版最舍不得的是U师的QQ人哇.

尝试在伪窗口的页面里贴QQ人,实在不合,忍痛割爱.