5 篇博文含有标签「教程」

查看所有标签

Waline评论在Vercel部署

使用Waline评论我喜欢使用的部署方法(个人认为最简便)

所需账号

一个Github账号
一个Vercel账号
一个leancloud账号(最好是国际服的，你有了Github难道还用大陆的吗？大陆的要备案，故在这里不阐述，末尾放原文链接)

在 leancloud 里创建数据库

登录或注册 LeanCloud 国际版 并进入控制台
点击左上角创建应用并起一个你喜欢的名字 (请选择免费的开发版):
进入应用，选择左下角的 设置 > 应用 Key。你可以看到你的 APP ID,APP Key 和 Master Key。请记录它们，以便后续使用。

在 Vercel 部署

点击上方按钮，跳转至 Vercel 进行 Server 端部署。

如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。
输入一个你喜欢的 Vercel 项目名称并点击 Create 继续:
此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。

一两分钟后，满屏的烟花会庆祝你部署成功。此时点击 Go to Dashboard 可以跳转到应用的控制台。
点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。
环境变量配置完成之后点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。
此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。

绑定域名 (可选)

点击顶部的 Settings - Domains 进入域名配置页
输入需要绑定的域名并点击 Add
在域名服务器商处添加新的 CNAME 解析记录

Type Name Value
CNAME example cname.vercel-dns.com(国区的可用 cname-china.vercel-dns.com)
等待生效，你可以通过自己的域名来访问了。
- 评论系统：example.yourdomain.com
- 评论管理：example.yourdomain.com/ui

Type	Name	Value
CNAME	example	cname.vercel-dns.com(国区的可用 cname-china.vercel-dns.com)

HTML 引入 (客户端)

在你的网页中进行如下设置:

导入 Waline 样式 https://unpkg.com/@waline/client@v3/dist/waline.css。

创建 <script> 标签使用来自 https://unpkg.com/@waline/client@v3/dist/waline.js 的 init() 函数初始化，并传入必要的 el 与 serverURL 选项。

el 选项是 Waline 渲染使用的元素，你可以设置一个字符串形式的 CSS 选择器或者一个 HTMLElement 对象。
serverURL 是服务端的地址，即上一步获取到的值。

<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v3/dist/waline.css"
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
</body>

评论服务此时就会在你的网站上成功运行。

评论管理 (管理端)

部署完成后，请访问 <serverURL>/ui/register 进行注册。首个注册的人会被设定成管理员。
管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。

视频教程

以下是热心用户制作的视频教程，以上操作不清楚的也可以参考一二。

Waline 部署教程（快速上手）

UP 主：rickroll 摇

使用 Vercel 简单地部署 Waline 评论系统

UP 主：岚天呀

以上为部分修改原文

原文链接: https://waline.js.org/guide/get-started

2025年4月14日教程部署 Waline阅读需 4 分钟

Umami博客访问统计Vercel+Cloudflare Wokers部署

第一部分：Vercel+Umami

第一步 1.1 Forkumami到自己的Github仓库

1.2 创建项目 index.mdx
第二步

　2.1 创建Vercel账号，这里我就省略了，因为GitHub可以直接进行授权即可。

2.2 在你授权以后，首先创建Postgres数据库，直接一路下一步，创建好就行，可以给下面的连接复制出来

　　点击Copy Snippet,就可以，记住在粘贴的时候是我画线里面的部分，双引号都不需要，因为要设置环境变量。

　　 2.3 在创建好数据库以后，回到主页面的Overview，然后右上角有一个Add New选择添加Project，选择你Fork的umami，添加即可。 2.4 设置环境变量，DATABASE_URL和HASH_SALT和TRACKER_SCRIPT_NAME，其中DATABASE_URL的值就是上面划线的部分，其他的两个环境变量都是对应的值是String自己可以随意定义。　　 2.5 设置好以后点击Deploy，等待大约两分钟左右，自动部署完成，部署完成以后可以通过下图种面板上面给的链接可以直接访问。

　　 2.6 打开以后会跳出登录地址，默认的登录密码是adminumami，登录进去以后，设置给自己密码修改了，然后就是设置里面添加网站，给你要统计的网站添加进去，到此，别人访问你的网站你可以通过面板看到统计数据了。

第二部分：Umami+Cloudflare worker

这一部分主要是让你的博客上面能展示的访问数据，效果如下：

　　部署以后，进去点击编辑代码，将里面的代码进行替换：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event));
});

const API_BASE_URL = 'https://umami.yourdomain.com';  // 替换你的刚才部署的umami的域名
const TOKEN = 'your_token'; // 获取的token
const WEBSITE_ID = 'your_website_id'; // 在umami添加网站的 webstie id
const CACHE_KEY = 'umami_cache';
const CACHE_TIME = 600; // Cache time in seconds

async function fetchUmamiData(startAt, endAt) {
  const url = `${API_BASE_URL}/api/websites/${WEBSITE_ID}/stats?startAt=${startAt}&endAt=${endAt}`;
  const response = await fetch(url, {
    headers: {
      'Authorization': `Bearer ${TOKEN}`,
      'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    console.error(`Error fetching data: ${response.statusText}`);
    return null;
  }

  return response.json();
}

async function handleRequest(event) {
  const cache = await caches.open(CACHE_KEY);
  const cachedResponse = await cache.match(event.request);

  if (cachedResponse) {
    return cachedResponse;
  }

  const now = Date.now();
  const todayStart = new Date(now).setHours(0, 0, 0, 0);
  const yesterdayStart = new Date(now - 86400000).setHours(0, 0, 0, 0);
  const lastMonthStart = new Date(now).setMonth(new Date(now).getMonth() - 1);
  const lastYearStart = new Date(now).setFullYear(new Date(now).getFullYear() - 1);

  const [todayData, yesterdayData, lastMonthData, lastYearData] = await Promise.all([
    fetchUmamiData(todayStart, now),
    fetchUmamiData(yesterdayStart, todayStart),
    fetchUmamiData(lastMonthStart, now),
    fetchUmamiData(lastYearStart, now)
  ]);

  const responseData = {
    today_uv: todayData?.visitors?.value ?? null,
    today_pv: todayData?.pageviews?.value ?? null,
    yesterday_uv: yesterdayData?.visitors?.value ?? null,
    yesterday_pv: yesterdayData?.pageviews?.value ?? null,
    last_month_pv: lastMonthData?.pageviews?.value ?? null,
    last_year_pv: lastYearData?.pageviews?.value ?? null
  };

  const jsonResponse = new Response(JSON.stringify(responseData), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    }
  });

  event.waitUntil(cache.put(event.request, jsonResponse.clone()));

  return jsonResponse;
}

　　但是里面有几个比较重要的参数需要修改API_BASE_URL、TOKEN、WEBSITE_ID其中API_BASE_URL和WEBSITE_ID已经是有的，WEBSITE_ID在umami中的设置，选择你已经添加好的网站，点击编辑，会出现网站的WEBSITE_ID：

　　 2.2 获取token，在想api测试网站，hoppscotch，跳转到这个页面以后，如下图所示

　　 2.2.1 请求方式选择post，链接填写方式是：

https://你的umami域名或者是链接/api/auth/login

　　 2.2.2 请求体选择Body参数格式选择application/json

{
 "username":"用户名",
 "password":"密码"
}

　　 2.2.3 返回结果中token里面的内容就是需要的token

{
  "token": "你的token", # 你需要记录下来的内容
  "user": {
    "id": "41e2b680-648e-4b09-bcd7-3e2b10c06264",
    "username": "admin",
    "role": "admin",
    "createdAt": "2024-11-12T09:18:12.766Z",
    "isAdmin": true
  }
}

　　到这里，你部署api所需要的所有参数内容都已经有了，给替换进去即可。

　　 2.3 测试在你部署好以后，会有一个链接，当然你如果是用cloudflare代理你的域名，可以直接进行关联。

　　然后点击或则是复制粘贴到浏览器，请求以后会出来下面的结果：

　　如果没有结果，建议你先去你部署的umami面板里面看看有没有数据，有数据的情况下，这里请求都会有数据的，清理浏览器缓存开代理在测试。

第三部分：添加博客统计

　　将数据添加到about页面

tj: # 统计
  provider: custom # custom
  url: 你的数据接口地址
  img: https://7.isyangs.cn/1/65eb2e9109826-1.png # 背景
  desc: # 卡片左下角描述

　　配置完成~

　　感谢starsharbor大佬博客的指导，原文

作者原文

作者: Couture 链接: https://www.coutures.top/posts/27233.html 来源: Couture 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

2025年4月6日教程 cloudfalre workers umami vercel阅读需 4 分钟

Git 同步上游仓库的更新

　　使用一个 Github Template 创建了我自己的仓库，需要同步一下补丁更新，总不能自己手抄一遍吧，搜了一下解决方案。

　　记录一下。

添加上游仓库

　　给上游仓库取个名字，如果将命名为 upstream ，可以在本地仓库中运行以下命令：

git remote add upstream https://github.com/$<upstream-repo>.git

获取上游仓库的更改

　　运行以下命令以获取上游仓库中的所有分支和提交：

git fetch upstream

合并上游更改

　　现在，将上游 main 分支的更改合并到您的本地 main 分支：

git merge upstream/main --allow-unrelated-histories

　　如果只需要合并特定的 commit ：

git cherry-pick <commit-hash>

　　也可以使用

gcp <commit-hash>

　　commit-hash 可以直接从 github 网页上复制。

　　这时 commit 的作者是源仓库的作者， Vercel 提示我 Build 失败，需要升级到 Pro，可以再修改一个文件，自己添加一条 commit 。

　　当然这很不优雅，可以使用下面的命令获取更改到文件，但是不会提交 commit ，

git cherry-pick <commit-hash> --no-commit

　　然后手动提交一下

git commit -m "commit information"

解决冲突

　　如何自己已经修改过源代码，在合并过程中可能发生冲突，需要手动解决。
Git 也会进行提示，手动编辑冲突文件并保存，然后再提交更改。

批量提交

git cherry-pick <起始提交>^..<结束提交>

　　如果有冲突会按照顺序处理，然后执行， continue 直到结束

git cherry-pick --continue

<起始提交>：范围的开始点（不包含此提交，除非用 <起始提交>~ 或 <起始提交>^）。
<结束提交>：范围的结束点（包含此提交）。
^ 是 Git 的语法，用于指定“之前的提交”。
.. 表示范围。

推送

git push origin main

　　当然默认来说，并不会推送到新加入的 upstream ，直接 git push 即可

　　如果不再需要同步，可以删除上游的仓库

git remote remove upstream

2025年4月4日教程 Git阅读需 2 分钟

Markdown-标题语法 | 技术分享

原文位置: https://markdown.com.cn/basic-syntax/headings.html

要创建标题，请在单词或短语前面添加井号 (#) 。# 的数量代表了标题的级别。例如，添加三个 # 表示创建一个三级标题 (<h3>) (例如：### My Header)。

Markdown语法	HTML	预览效果
`# Heading level 1`	`<h1>Heading level 1</h1>`	Heading level 1
`## Heading level 2`	`<h2>Heading level 2</h2>`	Heading level 2
`### Heading level 3`	`<h3>Heading level 3</h3>`	Heading level 3
`#### Heading level 4`	`<h4>Heading level 4</h4>`	Heading level 4
`##### Heading level 5`	`<h5>Heading level 5</h5>`	Heading level 5
`###### Heading level 6`	`<h6>Heading level 6</h6>`	Heading level 6

可选语法

还可以在文本下方添加任意数量的 == 号来标识一级标题，或者 -- 号来标识二级标题。

Markdown语法	HTML	预览效果
`Heading level 1` `===============`	`<h1>Heading level 1</h1>`	Heading level 1
`Heading level 2` `---------------`	`<h2>Heading level 2</h2>`	Heading level 2

最佳实践

不同的 Markdown 应用程序处理 # 和标题之间的空格方式并不一致。为了兼容考虑，请用一个空格在 # 和标题之间进行分隔。

✅ Do this	❌ Don't do this
`# Here's a Heading`	`#Here's a Heading`

2025年2月12日教程标题语法 markdown阅读需 2 分钟

Markdown-速查表

原文位置: https://markdown.com.cn/cheat-sheet.html#%E6%80%BB%E8%A7%88

Markdown 速查表提供了所有 Markdown 语法元素的基本解释。如果你想了解某些语法元素的更多信息，请参阅更详细的 基本语法 和 扩展语法.

基本语法

这些是 John Gruber 的原始设计文档中列出的元素。所有 Markdown 应用程序都支持这些元素。

元素	Markdown 语法
标题（Heading）	\ # H1 一级标题 \ ## H2 二级标题 \ ### H3 三级标题
粗体（Bold）	bold text
斜体（Italic）	italicized text
引用块（Blockquote）	> blockquote
有序列表（Ordered List）	1. First item 2. Second item 3. Third item
无序列表（Unordered List）	- First item - Second item - Third item
代码（Code）	`code`
分隔线（Horizontal Rule）	—
链接（Link）	[title](https://www.example.com)
图片（Image）	![alt text](image.jpg)

扩展语法

这些元素通过添加额外的功能扩展了基本语法。但是，并非所有 Markdown 应用程序都支持这些元素。

元素	Markdown 语法
表格（Table）	`\| Syntax \| Description \|` `\| ----------- \| ----------- \|` `\| Header \| Title \|` `\| Paragraph \| Text \|`
代码块（Fenced Code Block）	``` `{` `"firstName": "John",` `"lastName": "Smith",` `"age": 25` `}` ```
脚注（Footnote）	Here’s a sentence with a footnote. `[^1]` `[^1]`: This is the footnote.
标题编号（Heading ID）	\ ### My Great Heading
定义列表（Definition List）	term : definition
任务列表（Task List）	`- [x] Write the press release` `- [ ] Update the website` `- [ ] Contact the media`

2025年2月11日教程 markdown阅读需 2 分钟

所需账号​

在 leancloud 里创建数据库​

在 Vercel 部署​

绑定域名 (可选)​

HTML 引入 (客户端)​

评论管理 (管理端)​

视频教程​

Waline 部署教程（快速上手）​

使用 Vercel 简单地部署 Waline 评论系统​

以上为部分修改原文​

第一部分：Vercel+Umami​

第二部分：Umami+Cloudflare worker​

第三部分：添加博客统计​

作者原文​

Git 同步上游仓库的更新​

添加上游仓库​

获取上游仓库的更改​

合并上游更改​

解决冲突​

批量提交​

推送​

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

可选语法​