关于

Table of contents

展开目录

lovchun.com

站点由哪些所构建

我曾使用过的技术栈

客户端

服务端

我这几年的工作

涉及过金融、邮箱、网站、新零售等业务。

早先 PHP + Require.js + jQuery + Bootstrap 全栈工作了三年，后面 Angular 横空出世，再到 Reactjs 和 Vuejs，前后端分离趋势流行后，便一直在前端领域摸爬滚打，精通基于 Json Web Token 的前后端分离。

最近两年主要工作从 B 端 转换到了 C 端， 擅长微信/企业微信小程序的相关开发和一些营促销 H5 的开发。

新特性

Vercel

现在网站部署于Vercel，只需要每年续费域名（¥68），即可拥有一个独立域名的静态网站，此外还能免费构建，免费的 PV/UV 统计等等。

不用再续费阿里云 ECS，一年省下 ¥700+ 倒是可以加几箱油 🎉

Tailwind CSS

最近几年，原子样式的趋势越来越好，这次整站CSS都是基于 Tailwind CSS。

Markdown

这次站点的重构，基于 markdown，手动把 Mysql 中富文本录入的旧文章转换为 md 是个很费劲的工作，再加上以前的文章质量没那么高，所以几乎删除了大部分旧数据。

FrontMatter

属性描述备注
title文章标题 (h1)required*
description文章描述，用于文章摘录和网站描述required*
pubDatetime以 ISO 8601 格式发布的日期时间required*
modDatetime采用 ISO 8601 格式的修改日期时间（仅在修改文章时添加此属性）optional
author文章作者optional, default = SITE.author
slug文章路径，可选但是不能为空optional, default = slugified file name
featured文章是否在首页精选版本展示optional, default = false
draft文章是否为草稿optional, default = false
tags文章的标签（数组 yaml 格式）optional, default = others
ogImage文章的 OG 图片，用于 SEOoptional, default = SITE.ogImage or generated OG image
canonicalURL规范 URL（绝对路径）optional, default = Astro.site + Astro.url.pathname
示例
---
title:
description:
pubDatetime:
modDatetime:
postSlug:
featured: false
draft: false
tags:
  - Vue.js
---
 
## Table of contents

SyntaxHighlight

使用了 shiki + Moonlight II 来实现代码块的语法高亮。

代码高亮

import { useFloating, offset } from "@floating-ui/react";
 
interface Props {
  open: boolean;
  onOpenChange(open: boolean): void;
}
 
export function App({ open, onOpenChange }: Props) {
  const { refs, floatingStyles } = useFloating({
    open,
    onOpenChange,
    placement: "left",
    middleware: [offset(10)],
  });
 
  return (
    <Container>
      <div ref={refs.setReference} />
      {open && <div ref={refs.setFloating} style={floatingStyles} />}
    </Container>
  );
}

行号和行高亮

import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

字符高亮

import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

内联代码高亮

执行 [1, 2, 3].join('-') 会得到 '1-2-3'。

function getStringLength(str: string): number {
  return str.length;
}

当需要引用 getStringLength 函数时，可以为这段代码块着色，和 function 类似, 也可以使用不同的颜色 str，str，等等…

群组高亮

```js /age/#v /name/#v /setAge/#s /setName/#s /50/#i /'Taylor'/#i
const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");
```
const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");

ANSI 高亮

  vite v5.0.0 dev server running at:
 
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
 
  ready in 125ms.
 
8:38:02 PM [vite] hmr update /src/App.tsx

内联的 ANSI: > Local: http://localhost:3000/

感谢访问我的站点!