short-link源码[1]
背景知识
meta标签[2]
元数据（metadata）是关于数据的信息。 提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。 通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。 元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
用法
定义文档关键词，用于搜索引擎
<meta name="keywords" content="HTML, CSS, JavaScript">
定义web页面描述
<meta name="description" content="This is a description">
定义页面作者
<meta name="author" content="lencx">
定义编译指令，10秒刷新页面
<meta http-equiv="refresh" content="10">
定义编译指令重定向URL(设置0秒，立即重定向)
<meta http-equiv="refresh" content="0; url='https://s.nofwl.com'" />
Eleventy[3]
Eleventy是一个更简单的静态网站生成器。是Jekyll的JavaScript替代品。默认情况下为零配置，但具有灵活的配置选项。Eleventy使用你项目的现有目录结构，使用独立的模板引擎。可使用多种模板语言。支持HTML *.html
, Markdown *.md
, JavaScript *.11ty.js
, Liquid *.liquid
, Nunjucks *.njk
, Handlebars *.hbs
, Mustache *.mustache
, EJS *.ejs
, Haml *.haml
, Pug *.pug
等。总之功能强大，好处多多。自行查看文档，Eleventy的使用及模版语法不在本文范围。
实现
既然meta
标签可以重定向URL，那我如果自己配置一份映射表，不就可以想跳哪里就跳哪里吗😍？带着这样的想法，开始我们的短链接之旅。
# 想象中项目结构应该是这样的
[short-link] # 根路径
|- [dist] # 构建目录
|- [node_modules]
|- [public] # 公共资源
|- [src] # 源代码
| ｜- index.njk # 模板页面
| ｜- links.json # 配置链接映射关系
| `- ... # 其他
|- .eleventy.js # eleventy配置文件
|- package.json
`- ... # 其他
Step1: 初始化
初始化项目
# 初始化
npm init
# 安装依赖
npm i -D @11ty/eleventy
编辑package.json，添加scripts字段
{
"scripts": {
"dev": "eleventy --serve",
"build": "eleventy"
}
}
添加 .eleventy.js
文件，具体配置可参考Eleventy文档
Step2: 核心代码
编写模板及短链接映射文件，更多信息可查看Eleventy文档
创建模板文件 src/index.njk
: 核心其实就是meta
标签中的url
从数据文件中读取数据，设置重定向的URL
---
pagination:
data: links
size: 1
alias: link
permalink: "{{ link }}/"
---
<!DOCTYPE html>
<meta http-equiv="refresh" content="0; url='{{ links[link] }}'">
创建数据文件 src/links.json
{
"/-": "/",
"/": "https://github.com/lencx/short-link",
"t": "https://translate.google.cn",
"m": "https://mtc.nofwl.com"
}
Step3: 部署
首先将要部署代码上传至github，或者直接fork我的项目，修改src/links.json
文件即可。然后去Vercel[4]官网导入github仓库。
Vercel部署步骤：Vercel Dashboard
-> import Project
-> Import Git Repository
-> URL of a Git repository
-> Deploy
⚠️ Vercel注意事项：
URL of a Git repository
是输入自己的github仓库地址。Deploy
中的FRAMEWORK PRESET
选择Eleventy，Build and Output Settings
中的BUILD COMMAND
默认就是npm run build
不需要更改，但是OUTPUT DIRECTORY
则需要改成dist
，然后点击部署按钮。具体部署可查看文档，没什么难度，部署遇到问题的可在公众号留言或在https://github.com/lencx/short-link/issues
提问。
Step4: 绑定域名
打开Vercel的Dashboard
可以看到部署的项目卡片，点击卡片，可以看到Overview
，Deployments
，Analytics
和Settings
的菜单，点击Settings -> Domains
可以绑定自己的域名，输入域名后，可能会有配置无效的错误，自己需要在域名下添加一条DNS解析记录。
总结
其实整个短链接生成的核心代码就一个meta
标签。剩下的无非就是一些配置，实现及部署。如果感觉这个项目还不错，可以fork或star，你的支持，也是我创作的动力😊
参考资料
short-link源码: https://github.com/lencx/short-link
[2]meta标签: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
[3]Eleventy: https://www.11ty.dev
[4]Vercel: https://vercel.com
「 ☟ 阅读原文 查看源码 」
