使用 html 制作简历~





制作简历的方式：word 文档、markdown、latex、html。
- word 文档

  word 文档是最常用的方式，但是需要手动调整格式，比较麻烦。

- markdown

  markdown 是一种轻量级的文本格式，可以借助工具生成 html。markdown 的语法比较简单，可以参考 [markdown 语法](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)。

- latex

  latex 是一种公式编辑工具，可以借助工具生成 html。latex 的语法比较复杂，可以参考 [latex 语法](https://zh.wikipedia.org/wiki/LaTeX)。latex 可以使用 [overleaf](https://www.overleaf.com/) 进行编辑，里面有很多模板可以使用。但是想要自己定制的话还是要熟悉 latex 语法，很不方便。

- html

  作为 web 全栈，html 自然不用多说，写好后通过网页打印成 pdf 即可。注意去掉页眉和页脚，显示背景图像。[源码参考](https://github.com/42tr/42tr.github.io/blob/42tr/src/pages/resumeZh/resumeZh.vue)
  

![image.png](/static/img/bcf1ed7af1eaf739cd7bc8b5f4dfd034.image.png)

制作简历

生成打卡图片

一直没有满意的写文章的地方，所有应用都有些无法满足要求的点，不如自己写一个。最终还是放弃了，写博客还是愿意下笔重要~





## 实现
- 前端框架

  vue3 + vite + naive-ui

- 访客计数

  使用 不蒜子

  问题：访问子页的流量未统计。

- 允许被搜索引擎爬取

  根目录设置 robots.txt

  google：判断是否被索引：搜索 site:42tr.github.io，未被索引会提示使用 google search consoloe，验证网站所有权，添加站点地图 sitemap.xml，完成后过一天再看。

- Github Actions 自动部署

  生成一个 Personal access token，加入到该仓库的 new repository secret，Name 为 ACCESS_KEY，Value 为 token，在代码目录新建 .github/workflows/pages.yml，内容如下

```yml
name: GitHub Actions Build and Deploy
on:
  push:
    branches:
      - 42tr
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2.3.1
        with:
          persist-credentials: false

      - name: Install and Build 🔧
        run: |
          npm install
          npm run build
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@3.7.1
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_KEY }}
          BRANCH: gh-pages
          FOLDER: dist
          CLEAN: true
```

## 开发中遇到的问题
- 打包发布到 github.io 的文件无法加载

  问题原因：打包后生成的文件名以下划线开头，无法返回。

  解决方案：修改 vite.config.ts
  ```typescript
  export default defineConfig({
      plugins: [vue()],
      build: {
          rollupOptions: {
              output: {
                  // 入口文件名
                  // entryFileNames: `assets/[name].js`,
                  // 块文件名：不能下划线开头，增加一个 main 前缀
                  chunkFileNames: `assets/main-[name]-[hash].js`,
                  // 资源文件名 css 图片等等
                  // assetFileNames: `assets/[name]-[hash].[ext]`,
              }
          }
      }
  })
  ```

- 解决发布缓存问题——增加唯一标识，如时间戳
  ```typescript
  const timestamp = new Date().getTime()

  export default defineConfig({
    build: {
      rollupOptions: {
        output: {
          // 入口文件名
          entryFileNames: `assets/[name].${timestamp}.js`,
          // 块文件名
          chunkFileNames: `assets/[name]-[hash].${timestamp}.js`,
          // 资源文件名 css 图片等等
          assetFileNames: `assets/[name]-[hash].${timestamp}.[ext]`,
        },
      },
    }
  })
  ```

使用 html 写博客

# Nightly
## 安装
```
rustup install nightly
rustup default nightly
```

Rust 环境

**Full stack, fully typed.**

A cutting-edge Rust framework for the modern web.



## About
Leptos is a full-stack, isomorphic Rust web framework leveraging fine-grained reactivity to build declarative user interfaces.

## 创建项目
```shell
cargo new hello_leptos
cd hello_leptos
cargo add leptos
cargo install trunk
rustup target add wasm32-unknown-unknown
```
添加依赖 `leptos = { version = "0.6.5", features = ["csr"] }`

下载失败需要设置 rust 源
```
# 放到 `$HOME/.cargo/config` 文件中
[source.crates-io]
registry = "https://github.com/rust-lang/crates.io-index"

# 替换成你偏好的镜像源
replace-with = 'sjtu'
#replace-with = 'ustc'

# 清华大学
[source.tuna]
registry = "https://mirrors.tuna.tsinghua.edu.cn/git/crates.io-index.git"

# 中国科学技术大学
[source.ustc]
registry = "git://mirrors.ustc.edu.cn/crates.io-index"

# 上海交通大学
[source.sjtu]
registry = "https://mirrors.sjtug.sjtu.edu.cn/git/crates.io-index"

# rustcc社区
[source.rustcc]
registry = "git://crates.rustcc.cn/crates.io-index"

[net]
git-fetch-with-cli=true
```
启动 `trunk serve --open`

![image.png](/static/img/7487767c8e581bbd42362ca581a3fc52.image.png)

## 使用 cargo leptos
- 安装 nightly 版本 rust
- `rustup target add wasm32-unknown-unknown`
- 创建 `cargo leptos new --git leptos-rs/start`
- 启动 `cargo leptos serve`
- 构建 `cargo leptos build`