Tips

Open Table of contents

说明
- 项目相关
- 代码相关
注意

说明

项目相关

项目以 Astro 为主， React 为辅。
因为 vercel 部署的站点访问不稳定，所以采用 netlify 部署站点为主，配置中也以此为主。
markdown 文件中的 title 为必填且唯一，因为我才用了此项并结合文件名称 slugify 来作为 url 路径。
pages 目录下的文件不要删除， url 路径不带 locale 的时候会用到。
pages 目录下的 [locale] 目录下的文件除了 index.astro 中的链接需要加 locale ，其他的文件中的链接都不加 locale 。
markdown 文件中使用 layout 属性情况下的 markdown 文件必须在 pages 目录下，否则模版文件中无法获取 frontmatter。
dev 模式下的图片文件获取需要配置，当 vercel 的 devImageService 配置设置为 "sharp" 时，获取图片文件时会报未找到错误，需要将其修改为 "astro/assets/services/sharp"。
在 astro 中使用 changeLocale() 方法的时候注意，如果页面内容未刷新(包括页面上的链接等)则添加第二个参数为 false 。
外部 js 无法控制 react 组件内部 dom 节点的时候，可以考虑使用 createPortal 方法把目标 dom 挂载到外部 dom 上面，项目中的语言选择条即采用此方法实现。

代码相关

引入环境变量需要区分是cleint还是server，如下：

import { PUBLIC_API_URL } from "astro:env/client";
import { PORT, API_SECRET } from "astro:env/server";

css module 的 :gloabl 能穿透子组件和节点，但是不能嵌套使用，如下：

/* example.module.css */
.root {
    background-color: red;

    .content {
        background-color: blue;
    }

    /* 推荐使用这种写法，这种写法每行可以有多个选择器，可以写复合选择器，但是不能嵌套 */
    :global(.gg),
    :global(.hh),
    :global(.gg.hh),
    :global(.gg .hh) { /* 正确 */
        background-color: green;
    }

    :global(.gg) { /* 正确 */
        background-color: green;
        :gloabl(.hh){ /* 错误 */
            background-color: green;
        }
    }

    /* 下面这种写法每行只能有一个选择器，可以写复合选择器，并且也不能嵌套 */
    :gloabl .kk .jj { /* 正确 */
        background-color: yellow;
    }

    :global .kk, :global .jj { /* 错误 */
        background-color: yellow;
    }

    :global .kk { /* 正确 */
        background-color: yellow;
        .jj { /* 错误 */
            background-color: aqua;
        }
    }
}

使用穿透的时候，直接写类名，不需要带前缀，如下：

// example.tsx
import styles from './example.module.css';
import ChildComponent from './ChildComponent';

export default function() {
    return (
        <div className={styles.root}>
            <p className={styles.content}>1234</p> {/* scoped */}
            <p className="gg">1234</p> {/* global */}
            <ChildComponent />
        </div>
    );
}

// ChildComponent.tsx
export default function() {
    return (
        <div className="hh"></div>
    );
}

加载图片示例：

import { Image } from "astro:assets";
import shape from "@/assets/images/shape.jpg";

<!-- 加载public目录中的图片 -->
<img src={`/${frontmatter.ogImage}`} class="w-200" title="OG Image" />
<Image
  src={`/${frontmatter.ogImage}`}
  alt="shape-from-public"
  width={400}
  height={200}
/>
<!-- 加载assets目录中被处理后的图片 -->
<img src={shape.src} class="w-200" title="Shape Image" />
<br />
<Image
  src={shape}
  alt="shape"
  widths={[240, 540, 720, shape.width]}
  sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${shape.width}px`}
/>
<!-- 注意如下引用在开发模式是正常的，但是如果设置了prerender=true的话会导致打包失败，而且也不会被打包，暂且不用 -->
src={import(`../../assets/${aboutMarkdown.frontmatter.Avatar}`)}

注意

remark-toc 的 prefix 配置只给目录元素的 id 加上了前缀，但是没有给具体内容元素的 id 加上，此配置暂时不使用。
rehype-sanitize 插件会移除 remark-collapse 生成的目录折叠功能代码，暂不使用。

Back to home

Tips

Table of contents

说明

项目相关

代码相关

注意