feat: 用心算替代不蒜子

iamyunsin · May 14, 2024 · 1fc5e89 · 1fc5e89
1 parent 71f8209
commit 1fc5e89
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -1,68 +1,3 @@
-# Astro Starter Kit: Blog
+# 原心的个人主页
 
-```sh
-npm create astro@latest -- --template blog
-```
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/blog)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/blog)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/blog/devcontainer.json)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![blog](https://github.com/withastro/astro/assets/2244813/ff10799f-a816-4703-b967-c78997e8323d)
-
-Features:
-
-- ✅ Minimal styling (make it your own!)
-- ✅ 100/100 Lighthouse performance
-- ✅ SEO-friendly with canonical URLs and OpenGraph data
-- ✅ Sitemap support
-- ✅ RSS Feed support
-- ✅ Markdown & MDX support
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
-├── public/
-├── src/
-│   ├── components/
-│   ├── content/
-│   ├── layouts/
-│   └── pages/
-├── astro.config.mjs
-├── README.md
-├── package.json
-└── tsconfig.json
-```
-
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-The `src/content/` directory contains "collections" of related Markdown and MDX documents. Use `getCollection()` to retrieve posts from `src/content/blog/`, and type-check your frontmatter using an optional schema. See [Astro's Content Collections docs](https://docs.astro.build/en/guides/content-collections/) to learn more.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Check out [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
-
-## Credit
-
-This theme is based off of the lovely [Bear Blog](https://github.com/HermanMartinus/bearblog/).
+一个由作者自己设计和实现的astro博客模板，还在持续完善中，计划一遍完善博客内容，一边完善博客模板。
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "mdast-util-to-string": "^4.0.0",
     "pagefind": "^1.0.4",
     "reading-time": "^1.5.0",
+    "sinsuan": "^0.1.0",
     "vue": "^3.4.21",
     "vue-codemirror": "^6.1.1"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -6,8 +6,8 @@ import '@/styles/iconfont.css'
 import '@/styles/global.less';
 import '@/styles/pagefind.less';
 import '@/styles/toc.less';
-
 import { ViewTransitions } from 'astro:transitions';
+
 interface Props {
 	title: string;
 	description: string;
@@ -52,4 +52,7 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
-<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" data-astro-rerun></script>
+<script>
+  import { bootstrap } from "sinsuan";
+  bootstrap();
+</script>
diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro
@@ -6,7 +6,7 @@ interface Props {
 const { date } = Astro.props;
 ---
 
-<time style="font-size: 8px;" datetime={date.toISOString()}>
+<time style="font-size: 3rem;" datetime={date.toISOString()}>
 	{
 		date.toLocaleDateString('zh-CN', {
 			year: 'numeric',

diff --git a/src/content/blog/knowledge/sinsuan.mdx b/src/content/blog/knowledge/sinsuan.mdx
@@ -0,0 +1,112 @@
+---
+title: '心算：静态站点统计新星'
+description: '静态站点统计工具中，最受程序员欢迎的肯定是大名鼎鼎的不蒜子，不过不蒜子只提供了在线服务，作者没有开放自建服务的能力，于是就有了...'
+draft: false
+pubDate: '2024-05-14'
+tags: ['心算', '静态站点统计']
+---
+
+静态站点统计工具中，最受程序员欢迎的当数大名鼎鼎的[不蒜子](http://ibruce.info/2015/04/04/busuanzi/)，不过不蒜子只提供了在线服务，并没有开放自建服务的能力，于是就有了[心算](https://github.com/iamyunsin/sinsuan)。  
+
+心算作为新一代静态站点统计工具，设计上参考了前辈不蒜子，只是既支持在线服务接入，也支持自建服务；同时心算还支持hash路由和history路由模式的SPA站点的统计。  
+
+## 一、在线服务接入
+
+心算在线服务接入方式参考了不蒜子，下面我们就详细说明心算在线服务的使用步骤。
+
+### (一) 安装依赖
+
+```bash
+npm i sinsuan
+```
+
+### (二) 启动统计
+
+```ts
+import { bootstrap } from 'sinsuan'
+
+// 启动统计
+bootstrap();
+```
+
+上面的代码会开启页面统计功能，`bootstrap`函数未传入参数，意味着使用默认配置启动，那么要呈现数据，就需要在页面上声明承载数据的html节点，如下所示：
+
+```html
+当前页面PV: <span data-sinsuan-pv></span>
+当前页面UV: <span data-sinsuan-uv></span>
+站点PV: <span data-sinsuan-site-pv></span>
+站点UV: <span data-sinsuan-site-uv></span>
+```
+
+### (三) `bootstrap`参数详解
+
+`bootstrap`函数的参数类型如下：
+
+```ts
+/**
+ * 配置信息
+ */
+export type SinSuanConfig = {
+  /** 服务器接口地址 */
+  serverUrl?: string;
+  /** 传递ID值的请求头 */
+  idHeaderKey?: string;
+  /** 传递统计地址的请求头，由于需要支持单页形式的hash模式路由的请求和避免no-referer页面服务器无法获取Referer头的情况 */
+  countUrlHeaderKey?: string;
+  /** 用于存储信息的实例，可以由使用方实现，默认实现使用localStorage */
+  storage?: Storage;
+  /** 是否启用hash路由统计模式 */
+  hashMode?: boolean;
+  /** 是否启用history路由统计模式 */
+  historyMode?: boolean;
+  /** 当收到数据时要执行的处理 */
+  onReceiveData?: OnReceiveDataHandler;
+};
+```
+
+如上所示，我们常用的参数有：
+* **serverUrl**：当我们使用自建服务时，在启动的时候首先要配置的就是这个服务器地址，此地址使用全路径  
+* **hashMode**：用于指定当页面hash变化的时候是否执行统计，默认值：`false`  
+* **historyMode**：当通过history api改变url时是否统计，默认值：`true`  
+* **onReceiveData**：自定义数据接收函数，请求后端接口并收到响应后触发，默认会将数据填入到页面上的填值占位符（如：`<span data-sinsuan-pv></span>`这样的节点）中  
+
+
+## 二、自建服务
+
+### （一）Linux系统  
+
+对于linux系统，可以直接下载[sinsuan-x86_64-unknown-linux-musl-v0.1.0.zip](https://github.com/iamyunsin/sinsuan/releases/download/v0.1.0/sinsuan-x86_64-unknown-linux-musl-v0.1.0.zip)资源包，解压并执行`./sinsuan`来启动服务。  
+解压后的目录结构：
+
+```bash
+├── sinsuan
+└── Rocket.yaml
+```
+
+当我们执行`./sinsuan`命令后，会在当前目录中生成`db.sqlite`文件，这就是数据文件。  
+当然我们可以通过[sqlite3](https://sqlite.org/index.html)命令行工具管理我们的数据。  
+
+**如果希望更改服务监听的地址、数据库文件存放路径，以及数据库连接池调优，也可以通过修改`Rocket.yaml`文件来达到目的**。
+
+### （二）其它操作系统
+
+其它操作系统会稍微麻烦一点，我们需要安装rust环境，然后从github下载源码自行编译，这里就不详述了，有需要可以联系我（微信：iamyunsin）。
+
+### （三）项目集成
+
+集成时，与在线服务模式的集成相似，仅仅需修改`bootstrap`函数的入参，将`serverUrl`改为您自己的服务地址即可。
+
+```ts
+import { bootstrap } from 'sinsuan'
+
+// 启动统计
+bootstrap({
+  serverUrl: 'https://your.host/path/to/count'
+});
+```
+
+## 结语
+
+大家可以看到，心算的使用方式与不蒜子非常类似，只是有了更多选择空间。  
+
+欢迎大家使用，也欢迎大家给作者[反馈](https://github.com/iamyunsin/sinsuan/issues/new)意见、建议和问题，再次感谢您的耐心阅读，谢谢^_^
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -25,7 +25,7 @@ const { title, description, pubDate, updatedDate, minutes, words } = Astro.props
         <section class="flex-1 bg-white overflow-hidden">
           <header class="bg-white top-0 p-12 pb-4 b-b-dashed b-b-[#cdcdcd] b-b-1">
             <h1 class="font-size-18 font-weight-900 text-center">{title}</h1>
-            <div class="flex justify-between items-center lt-xs:flex-col font-200">
+            <div class="flex justify-between items-center lt-xs:flex-col font-200 font-size-12">
               <div>
                 <span>共{words}字，</span>
                 <span>预计阅读{minutes?.toFixed(0)}分钟</span>
@@ -40,7 +40,7 @@ const { title, description, pubDate, updatedDate, minutes, words } = Astro.props
                     </div>
                   )
                 }
-                发表，累计阅读<span id="busuanzi_value_page_pv"></span>次
+                发表，已被<span class="color-green-700 pl-2 pr-2" data-sinsuan-uv></span>人阅读<span class="color-green-700 pl-2 pr-2" data-sinsuan-pv></span>次
               </div>
             </div>
           </header>
@@ -112,7 +112,7 @@ const { title, description, pubDate, updatedDate, minutes, words } = Astro.props
                 const hEl = allHElements[i];
                 const hElRect = hEl.getBoundingClientRect();
 
-                if(hElRect.top <= rootRect.bottom) {
+                if(hElRect.top <= rootRect?.bottom) {
                   activeTocWithHEl(hEl);
                   break;
                 }

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -23,12 +23,12 @@ import CardTitle from '@/components/CardTitle.astro';
         <Author />
         <Card class="shadow">
           <CardTitle>统计数据</CardTitle>
-          <p class="pt-12 font-size-12">已被<span class="color-green-700 pl-2 pr-2" id="busuanzi_value_site_uv"></span>人访问了<span class="color-green-700 pl-2 pr-2" id="busuanzi_value_site_pv"></span>次</p>
+          <p class="pt-12 font-size-12">已被<span class="color-green-700 pl-2 pr-2" data-sinsuan-site-uv></span>人访问了<span class="color-green-700 pl-2 pr-2" data-sinsuan-site-pv></span>次</p>
         </Card>
         <Card class="shadow">
           <CardTitle>关于本站</CardTitle>
           <p class="pt-12 font-size-12">本站是一个基于 Astro 的纯静态博客，使用 Github Actions + Github Pages / Nginx 部署。</p>
-          <p class="pt-4 font-size-12">站点统计使用<strong>大名鼎鼎</strong>的<a class="color-blue-600" href="http://ibruce.info/2015/04/04/busuanzi/" target="_blank">不蒜子</a>，文章评论使用<strong>小有名气</strong>的<a class="color-blue-600" href="https://giscus.app/" target="_blank">giscus</a>。</p>
+          <p class="pt-4 font-size-12">站点统计使用<strong>最新自研</strong>的<a class="color-blue-600" href="http://ibruce.info/2015/04/04/busuanzi/" target="_blank">心算</a>，文章评论使用<strong>常常挂掉</strong>的<a class="color-blue-600" href="https://giscus.app/" target="_blank">giscus</a>。</p>
           <p class="flex pt-10">
             <a href="https://http3.wcode.net/?q=yunsin.top" target="_blank" class="m-auto">
               <img src="https://http3.wcode.net/badges/http3.svg?host=yunsin.top" alt="" style="max-width: 100%; height: 20px;"/>

diff --git a/src/styles/global.less b/src/styles/global.less
@@ -185,6 +185,7 @@ hr {
     border-radius: 1rem;
     margin: 16px 0px;
     max-width: calc(100vw - 48px);
+    font-size: 14px;
 
     & > code {
       all: unset;