剑夜の个人空间

【建站技术】HUGO 博客中如何记录浏览量和网站运行时间

Sun, 08 Dec 2024 19:48:02 +0800

引言

之前给博客引入了评论系统 Waline，根据 Waline 官方文档的介绍，了解到可以通过 Waline 在个人博客网站中加入浏览量统计的功能。由于本次需要修改博客的底部面板，并需要添加 JavaScript 代码，顺便给我的个人博客加入了动态刷新的建站时间指示器。

基于 Waline 的浏览量统计

Waline 评论系统自带了浏览量统计的功能，如何配置 Waline 的评论系统可以参考《【建站技术】为你的 Hugo 博客加入评论功能 (Waline)》。或者你也可以阅读 Waline 官方文档-浏览量统计，只引入浏览量统计能力而不引入评论能力。

HUGO 配置

在配置文件中，设置 comments-waline 属性中的 pageview 为 true 即可自动开启浏览统计功能。

1
2

waline:
    pageview: true

浏览量显示

开启浏览量统计能力后，waline 会在初始化时（有开启评论的页面将会自动初始化）给带有 class="waline-pageview-count" 的 html 元素自动更新为当前页面的浏览数量。可以在文章的任意地方，插入类似以下代码，来展示本页面的浏览量。

`1`	`<span class="waline-pageview-count" data-path="<your/article/path>">···</span>`

其中，data-path 属性决定了页面路径，如果不填则默认为当前页面。
如果你想把浏览量显示加入到文章头部状态栏中，可以在对应的模板代码中加入类似以下代码：

<div>
    {{ partial "helper/icon" "pageview" }}
    <time class="article-time--reading">
        {{ T "article.pageview" }}
            <time class="waline-pageview-count" data-path="{{ .RelPermalink }}">···</time>
    </time>
</div>

其中，{{ partial "helper/icon" "pageview" }} 是浏览量对应的 icon，{{ .RelPermalink }} 属性则能够获取到当前页面的路径。

文章列表中显示浏览量

当你做完上述设置后，就可以在文章页面的头部状态栏中看到当前页面的浏览量了。但是，当你返回首页或者其他文章列表页面时，会发现每篇文章的浏览量不能正常显示了，这是因为 waline 只会在评论功能初始化时拉取数据，要想在没有评论系统的页面展示浏览量信息，则需要手动请求对应的数据。
这里借鉴了 Jqtmviyu 大佬的文章《为Hugo博客添加评论和统计功能》，并对代码做了部分修改，将以下代码引入页面 footer 或 header 的模板中，就可以自动拉取页面中每篇文章的浏览数据了。

<script>
    (async ()=>{
      let indexCountEle = document.querySelector('.waline-index-count')
      let walineUrl = indexCountEle.getAttribute('waline-url')

      let pageCountEles = document.querySelectorAll('.waline-pageview-count')
      let pagePathNames = Array.from(pageCountEles).map(item => item.getAttribute('data-path'))

      // 获取访问统计函数
      function getViewCount (urlList) {
        let url = walineUrl + 'api/article/?path='
        urlList.forEach((item,index) => {
          url += index === 0 ? item :  (',' + item)
        })
        return fetch(url)
        .then(res => res.json())
        .then(res => {
          if(res.errno == 0) {
            return res.data.map(item => item.time)
          } else {
            throw new Error('获取失败')
          }
        })
        .catch(err => {
          return new Promise((resolve,reject) => {
            reject(err)
          })
        })
      }
      // 添加访问统计函数
      function addViewCount (pathname) {
        let data = { path: pathname}
        return fetch(`${walineUrl}/api/article`,{
            method:'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body:JSON.stringify(data)
        })
        .then(res => res.json())
        .then(res => {
          if(res.errno == 0) {
            return res.data[0].time
          } else {
            throw new Error('获取失败')
          }
        })
        .catch(err => {
          return new Promise((resolve,reject) => {
            reject(err)
          })
        })
      }

      // 获取列表页的访问统计
      if(window.location.pathname == '/' || window.location.pathname.includes('/posts/')){
        getViewCount(pagePathNames).then(pageCounts => {
          pageCounts.forEach((item,index) => {
            pageCountEles[index].innerText = item
          })
        })
      }

      // 更新页面底部访问统计,localStorage记录访问时间和访问统计
      // 没有访问过,往api添加访问记录并更新访问统计
      // 在1小时内访问过,从本地存储拿
      // 超过1小时,重新获取
      let indexCount = localStorage.getItem('indexCount')
      let lastVisitTime = localStorage.getItem('lastVisitTime')
      if (!!lastVisitTime == false) {
        addViewCount('/').then(indexCount => {
          localStorage.setItem('indexCount',indexCount)
          localStorage.setItem('lastVisitTime', Date.now())
          indexCountEle.innerHTML = indexCount
        })
      }
      if(!!lastVisitTime && !!indexCount && Date.now() - lastVisitTime < 3600000 ){
        indexCount = localStorage.getItem('indexCount')
        indexCountEle.innerHTML = indexCount
      }
      if(!!lastVisitTime && Date.now() - lastVisitTime >= 3600000){
        getViewCount(["/"]).then(res => {
          indexCount = res[0]
          localStorage.setItem('indexCount',indexCount)
          localStorage.setItem('lastVisitTime', Date.now())
          indexCountEle.innerHTML = indexCount
        })
      }
    })()
</script>

网站总浏览量统计

细心的朋友会发现，上面的代码包括了对整个站点的浏览量更新，因此我们可以在 footer 模板中加入以下代码来显示站点的浏览量信息。

`1`	`<span class="waline-index-count waline-pageview-count" waline-url="{{ .Site.Params.comments.waline.serverURL }}" data-path="/">0</span>`

网站运行时间指示器

由于本次需要修改博客的底部面板，并需要添加 JavaScript 代码，因此顺便给我的个人博客加入了动态刷新的建站时间指示器。

计时代码

类似浏览量统计，将以下代码引入页面 footer 或 header 的模板中，就可以每秒自动更新网站的运行时长数据。

<script>
  function updateTime() {
      const targetDate = new Date("2024-09-19T00:00:00");
      const now = new Date();
      const diff = now - targetDate;

      if (diff > 0) {
          const seconds = Math.floor((diff / 1000) % 60);
          const minutes = Math.floor((diff / (1000 * 60)) % 60);
          const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
          const days = Math.floor(diff / (1000 * 60 * 60 * 24));

          const timeString = `${days}d ${hours}h ${minutes}m ${seconds}s`;
          document.getElementById("overTime").textContent = timeString;
      }
  }
  // 初始化立即执行一次
  updateTime();
  // 每秒更新
  setInterval(updateTime, 1000);
</script>

这段代码将每秒运行一次，并对 id 为 overTime 的标签进行赋值。

计时显示

与总浏览量的显示相同，在 footer 模板中添加以下代码即可显示网站运行时长。

`1`	`<span id="overTime" style="font-weight: bold;">0day</span>`

尾声

至此，你就可以在看到每个页面的浏览量信息，并且在网站底部拥有一个动态更新的网站运行时长指示器啦~

作者信息

邮箱： remiliascarlet578@gmail.com 欢迎交流技术知识

本文原载于 jianyese.com，遵循 CC BY-NC-SA 4.0 协议，复制请保留原文出处。

【建站技术】在你的 Hugo 博客中使用 Google Analytics 来统计和分析流量数据

Mon, 14 Oct 2024 00:55:45 +0800

引言

博客建成以后，想要看看有多少人访问博客、他们看了什么文章、哪些文章浏览量更高、用户画像是什么样的，可以接入 Google Analytics 来自动统计和分析这些数据。这个流程十分简单。

接入流程

注册 Google Analytics 账户

点此创建账号
按顺序走完创建流程后，可以拿到你的衡量 ID 代码 G-XXXXXXXXXX

在 Hugo 中配置 Google Analytics

打开 config.yaml，将你的 ID 添加到 googleAnalytics 的 id 属性中，Hugo 就会自动在 html 的 head 中加入谷歌数据分析的代码。

services:
    # GA Tracking ID
    googleAnalytics:
        id: "G-XXXXXXXXXX"

本地运行时禁止数据采集

为了防止数据污染，可以禁用本地运行调试时的数据采集。

在根目录创建谷歌数据采集代码的 layout 文件以覆盖掉源文件(已有覆盖文件的情况请直接修改)，以 Stack 主题为例，创建 layouts\partials\head\head.html，并找到如下位置修改代码。

1
2
3

{{ if not hugo.IsServer }}
{{- template "_internal/google_analytics.html" . -}}
{{ end }}

尾声

至此，就可以通过谷歌的数据分析面板查看你的网站浏览数据啦~

作者信息

邮箱： remiliascarlet578@gmail.com 欢迎交流技术知识

本文原载于 jianyese.com，遵循 CC BY-NC-SA 4.0 协议，复制请保留原文出处。

【建站技术】为你的 Hugo 博客加入评论功能 (Waline)

Sat, 12 Oct 2024 23:58:58 +0800

引言

一个合格的博客怎能没有评论区，Hugo 的 Stack 主题提供了多种评论系统的接入，点此跳转官方文档，本文将介绍 Waline 的接入流程。

具体步骤

创建 LeanCloud 数据库

首先登录 LeanCloud，并创建应用。
之后进入应用的 设置 - 应用凭证，并记录 AppID、AppKey、MasterKey 供后续使用。

Vercel 部署

点击此处跳转 Vercel并登录 github 账号。
输入项目名并点击 create 按钮，等待 2-3 分钟即可完成创建。

进入项目的 dashboard，并打开 Settings - Environment Variables，添加三个 key，对应刚才 LeanCloud 记录的 AppID、AppKey、MasterKey。

1
2
3

LEAN_ID:            <AppID>
LEAN_KEY:           <AppKey>
LEAN_MASTER_KEY:    <MasterKey>

打开 Deployments 选项卡，并选择项目右侧的三个小点，然后选择 Redeploy 重新部署，使环境参数生效。
等待部署完成后，页面出现 Visit 按钮，点击此按钮，即可跳转到部署好的页面，该页面的链接就是你的评论系统服务端地址。

域名配置（可选）

在 Vercel 的 Settings - Domains 选项中添加你的域名地址。

在服务提供商处添加 CNAME 域名解析记录。

评论管理

访问 <serverURL>/ui/register 进行注册，首个注册的人将成为管理员，请及时注册。
如果访问网址出现重定向过多问题，可以在域名提供商中将 SSL/TLS 加密模式改为完全，以 Cloudflare 为例：

在 Hugo Stack 中配置 Waline

Stack 主题的评论系统配置非常简单，打开网站的配置文件 config.yaml，将评论系统修改为 Waline，并将评论系统链接配置上去就可以使用啦！

comments:
    enabled: true
    provider: waline # waline

    waline:
        serverURL: <你的评论系统网址>
        lang: zh-CN # 中文
        pageview:
        emoji:
            - https://unpkg.com/@waline/emojis@1.0.1/weibo
        requiredMeta:
            - name
            - email
            - url
        placeholder: 在此输入评论...
        locale:
            admin: 剑夜
            placeholder:

尾声

直接配置的 Waline 评论系统感觉有点不好康，后续对它进行美化一下吧~

作者信息

邮箱： remiliascarlet578@gmail.com 欢迎交流技术知识

本文原载于 jianyese.com，遵循 CC BY-NC-SA 4.0 协议，复制请保留原文出处。

【建站技术】在你的 Hugo 文章中加入字数统计能力

Sat, 12 Oct 2024 01:00:20 +0800

引言

Hugo 的 Stack 主题在每篇文章的标题下方展示了当前文章的创建日期和大致的阅读时长，今天想给自己的博客添加一个小功能，统计每篇文章的字数。

具体步骤

修改文章模板

首先介绍一下 Hugo 使用样式文件的基本优先级，Hugo 会优先使用网站根目录下layouts\文件夹中的样式文件，之后使用模板中的样式文件，以 Stack 主题中的文章详情样式为例，它使用的模板是themes\hugo-theme-stack\layouts\partials\article\components\details.html，如果我们想要修改样式，则需要在同样的目录下创建同样的样式文件将其覆盖，即在layouts\partials\article\components\目录下创建details.html文件，并将源文件中的代码复制过来。之后对该文件进行修改，加入想要的字数统计效果相关代码，加入位置和具体代码如下。

    ...
    <footer class="article-time">
        {{ if $showDate }}
            <div>
                {{ partial "helper/icon" "date" }}
                <time class="article-time--published">
                    {{- .Date | time.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
                </time>
            </div>
        {{ end }}
    <!-- 在此插入以下代码 -->

        {{ if $showReadingTime }}
        <div>
            {{ partial "helper/icon" "wordcount" }}
            <time class="article-time--reading">
                {{ T "article.wordCount" .WordCount  }}
            </time>
        </div>
        {{ end }}

    <!-- 在此结束 -->
        {{ if $showReadingTime }}
            <div>
                {{ partial "helper/icon" "clock" }}
                <time class="article-time--reading">
                    {{ T "article.readingTime" .ReadingTime }}
                </time>
            </div>
        {{ end }}
    </footer>
    {{ end }}
    ...

此时由于站内没有对应的图标和文案定义，因此无法正常显示，还请继续往下看。

国际化文案

在上述代码中 {{ T "article.wordCount" .WordCount }} 表示使用 article.wordCount的文案模板，并使用 .WordCount 作为参数传入。

类似文章模板，我们需要覆盖掉模板自带的文案模板，将 themes\hugo-theme-stack\i18n 中你所需要的语言类型复制到 i18n\ 中，以英文 en.yaml 、简体中文 zh-cn.yaml 和繁体中文 zh-hk.yaml 为例。将这三个文件复制到 i18n\ 中后，在其 article 类目下分别添加 wordCount 字段，如下所示。

en.yaml

...
article:
    ...
    readingTime:
        one: "{{ .Count }} minute read"
        other: "{{ .Count }} minute read"
# new codes below
    wordCount:
        other: "{{ .Count }} words"
...

zh-cn.yaml

...
article:
    ...
    readingTime:
        one: "{{ .Count }} minute read"
        other: "{{ .Count }} minute read"
# 以下为新增代码
    wordCount:
        other: "本文共 {{ .Count }} 字"
...

zh-hk.yaml

...
article:
    ...
    readingTime:
        one: "{{ .Count }} minute read"
        other: "{{ .Count }} minute read"
# 以下為新增代碼
    wordCount:
        other: "本文共 {{ .Count }} 字" # 繁體
...

图标修改

建议在阿里矢量图标库中寻找你想要的图标，选择好想要的图标后，将下载的 svg 文件复制入 assets\icons\ 并命名 wordcount.svg，之后可以根据喜好或者主题样式来更改图标的粗细、颜色等属性，本站使用的 svg 代码如下：

<svg t="1728665493176"
    class="icon icon-tabler icon-tabler-clock" 
    viewBox="0 0 1024 1024"
    xmlns="http://www.w3.org/2000/svg" 
    p-id="6574" 
    fill="currentColor" >
<path d="M640 42.666667a42.666667 42.666667 0 0 1 30.165333 12.501333l213.333334 213.333333A42.666667 42.666667 0 0 1 896 298.666667v597.333333a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333V128a85.333333 85.333333 0 0 1 85.333333-85.333333z m-17.706667 85.333333H213.333333v768h597.333334V316.373333L622.293333 128z m69.504 256.938667a42.666667 42.666667 0 0 1 32.768 50.688l-64 298.666666c-8.448 39.424-61.866667 46.208-79.872 10.112l-68.522666-137.002666-68.48 137.002666c-17.28 34.517333-66.858667 29.824-78.549334-5.162666l-1.365333-4.949334-64-298.666666a42.666667 42.666667 0 1 1 83.456-17.92l38.485333 179.754666 52.309334-104.533333a42.666667 42.666667 0 0 1 73.6-4.693333l2.730666 4.693333 52.224 104.533333 38.528-179.754666a42.666667 42.666667 0 0 1 50.688-32.768z" p-id="6575" >
</path>
</svg>

中文字数统计

如果你的博客和我一样有中文或者日语和韩文的话，需要设置 hasCJKLanguage: true 以确保字数统计正确，只需在 config.yaml 中加入以上属性即可。

作者信息

邮箱： remiliascarlet578@gmail.com 欢迎交流技术知识

本文原载于 jianyese.com，遵循 CC BY-NC-SA 4.0 协议，复制请保留原文出处。

【建站技术】使用 Hugo + CloudFlare Pages + Github 自动化部署你的个人博客网站

Sun, 06 Oct 2024 00:22:40 +0800

从大学以来一直有一个搭建个人博客的想法，但因为各种原因 ~~其实是拖延症~~ 没有没有付出行动，最近被工作忙的焦头烂额，反而觉得每天给公司干活是一件很亏的事情，于是又把搭建博客的计划提上了日程。本文记录下该博客搭建从技术选型到初步建成的过程，也希望能给后续的站主们提供一些有用的参考。

引言

本节将介绍本站对建站方案以及具体架构框架选择的思考。

建站方案

当前主流的个人博客建站方案包括两种：

方案	优势	劣势
静态部署方案 ( 如 hugo + github + cloudflare pages 部署个人网站 )	1. 无需租用服务器即可免费搭建网站 2. 静态网页的访问速度相对较快 3.可以通过 git 自动化部署	1. 可扩展性相对较差 2. 动态化能力需要额外实现，且比较麻烦 3. 可能会踩更多的坑，仅适合比较爱折腾的人
动态部署方案 ( 如使用 wordpress + cvm 部署个人网站 )	1. 拥有更好的扩展能力 2. 可以同时构建数据库和对象存储库 3. wordpress 方案更成熟，有不少现成的插件和教程，可以少踩坑	1. 需要租赁服务器，价格较贵 2. 动态访问服务器加载各种资源，会降低网站访问速度

本站最终采用了静态部署方案，目的是节约成本（仅付了域名购买的费用）并且拥有较好的浏览体验。

框架选择

现有许多主流静态博客建站框架如 hugo、hexo 等等，本站采用 hugo 作为最终方案，原因如下：

hugo 基于 go 语言开发，相比基于 php 的 hexo 拥有更好的性能。
经过一段时间的调研发现近年有较多的博客选择 hugo 作为建站方案，如果踩坑更容易找到解决措施。
发现了 hugo stack 这个主题，符合个人审美于是直接采用。

代码托管

可以使用 github、gitlab、gitee 等，为了方便后续部署，本站使用 github 作为托管平台。

服务提供商

Cloudflare 、vercel 等服务提供商都有静态网站部署方案可供使用，本站域名在 cloudflare 上购买，并且计划使用其 CDN 加速服务和其他安全服务，并考虑后续使用其提供的 serverless 服务，因此将本站部署在了 Cloudflare pages 上。

域名服务

可以直接使用 github 提供的免费域名，也可以自行购买域名并进行绑定。

建站流程

本节将分别从 Hugo 安装、主题安装、创建文章、GitHub Pages 配置、Cloudflare Pages 部署以及域名绑定介绍建站流程。

安装 Hugo

点此跳转 Hugo 官方文档

安装 Hugo 前，需要先安装其前置依赖 git、go 和 Dart Sass

项目	linux	macos	windows	备注
git	`sudo apt install git-all`	1. 可以通过 Xcode Command Line Tools 安装 2. Homebrew 安装 `brew install git` 3. MacPorts 安装 `sudo port install git` 4. 也可以点此下载安装器	点此下载安装器	git 官方手册
go	官网下载	官网下载	官网下载	go 官方手册
Dart Sass	1. Homebrew 安装 `brew install sass/sass/sass` 2. Snap 安装 `sudo snap install dart-sass`	1. Homebrew 安装 `brew install sass/sass/sass`	1. Chocolatey 安装 `choco install sass` 2. Scoop 安装 `scoop install sass`	安装手册
Hugo	1. Homebrew 安装 `brew install hugo` 2. Snap 安装 `sudo snap install hugo`	1. Homebrew 安装 `brew install hugo` 2. MacPorts 安装 `sudo port install hugo`	1. Chocolatey 安装 `choco install hugo-extended` 2. Scoop 安装 `scoop install hugo-extended`	安装手册

主题安装

Hugo 安装完成后，可以通过 Hugo 主题选择你喜欢的主题，本站使用了 Jimmy Cai 的 Stack 主题。

选择好想要的主题后，就可以开始搭建你的个人博客了，执行以下命令：

hugo new site <你的网站目录>
cd <你的网站目录>
git init
git submodule add <你选择的主题的 git 地址（建议 fork 到自己的库中）> themes/<主题名称>
echo "theme = '<主题名称>'" >> hugo.toml
hugo server

就可以搭建并启动你的个人博客啦！之后可以在浏览器中输入 http://localhost:1313/ 来访问你的本地博客。

创建文章

新建你的第一篇文章：

`1`	`hugo new content content/posts/my-first-post.md`

之后在你的 content/posts 文件夹中会创建你的第一篇文章，打开后可以发现它的 draft = true，说明它还是一篇草稿，此时即使发布了你的网站，该文章也不会被浏览者看见。但是你可以通过如下指令启动 Hugo 服务，并看到所有草稿文章：

`1`	`hugo server -D`

GitHub Pages 配置

创建好你的第一篇博客后，就可以将它部署到网上了，这里首先介绍 Github Pages 配置。

在 Github 中创建新的代码仓库，由于我们将使用 Cloudflare Pages 部署网站而非直接使用 Github，因此仓库可以设为私密状态，注意代码仓库名称要填写 用户名.github.io，之后将本地代码提交到代码仓库中：

git config --global user.name "<用户名>"
git config --global user.email "<邮箱>"
git remote add <你的仓库地址>

git add --all
git commit -m ""
git push origin master

Cloudflare Pages 部署

打开 Cloudflare 官网，并登录你的 Cloudflare 账户。
进入 Workers 和 Pages 页面并点击创建
选择 Pages 选项卡，并点击连接到 git
选择 github 并登录选择刚才创建的代码仓库
配置构建设置：生产分支选择 master，框架预设选择 Hugo，需要注意的是在环境变量这一栏中需要配置 HUGO_VERSION 为当前 Hugo 最新的版本号，如图。

之后点击保存并部署，就可以完成自动化部署配置，此后你对博客的所有更新只需提交到 github 的 master 分支， Cloudflare 将会自动拉取最新代码并进行部署操作。

绑定域名

在购买好你的域名后（建议在 Cloudflare 中直接购买），可以在刚刚创建的 Cloudflare Pages 中的自定义域选项卡中绑定你的域名，此后就可以通过你的域名来访问博客啦！

尾声

至此，你的个人博客搭建并部署完成，恭喜你拥有了属于自己的博客网站！撒花*★,°:.☆(￣▽￣)/$:.°★* 。

作者信息

邮箱： remiliascarlet578@gmail.com 欢迎交流技术知识

本文原载于 jianyese.com，遵循 CC BY-NC-SA 4.0 协议，复制请保留原文出处。

剑夜 | 归档

Fri, 20 Sep 2024 00:00:00 +0000

【iOS 开发】swift 解决wkwebview自适应内容问题

Thu, 28 May 2020 00:46:30 +0800

背景

项目中接入后端提供的html字符串时出现了内容大小不适配的问题，折腾了半天没搞懂怎么解决，最后在网上找到了解决方法（万能的网友）

特此记录一下解决方案，以备不时之需。

解决方案

1. 在字符串前加入一段html控制页面和图片缩放的语句

1
2

let headerString : String = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'><style>img{max-width:100%}</style></header>"
webView.loadHTMLString(headerString + content), baseURL: nil)

2. 在didFinish navigation代理方法中获取高度

webView.evaluateJavaScript("document.body.scrollHeight") { (Result, error) in
    //页面高度
    let height = Result as? Double
}

作者信息

邮箱： remiliascarlet578@gmail.com 欢迎交流技术知识

本文原载于 jianyese.com，遵循 CC BY-NC-SA 4.0 协议，复制请保留原文出处。

【iOS 组件】MHVerifyCodeView

Wed, 13 May 2020 00:25:50 +0800

2020 年练手写的组件，已经不再维护。

最近的项目需要实现一个验证码的功能，看完项目原型的我想都没想就开始动手，结果功能实现了之后，产品经理突然改了原型，变成了手机号+验证码+获取验证码的形式（参考市面上大多数app）。
我TM心态直接爆炸，干脆把现在已经完成的验证码功能封装成一个组件，方便自己以后使用。

简介

一个常见的验证码输入功能，几个四四方方的格子，用户填完验证码之后自动验证。

安装

可以直接通过我的github项目地址下载源码导入工程，也可以通过 CocoaPods进行安装。cocoapods的安装方法:

在你的podfile文件里加入pod 'MHVerifyCodeView'，然后执行pod install指令就可以开始愉快的使用了。

使用

let verifyCodeView = MHVerifyCodeView.init()
verifyCodeView.spacing = 10
verifyCodeView.verifyCount = 4
verifyCodeView.setCompleteHandler { (result) in
      print(result)
}

需要注意的是，我为了方便偷懒使用了UIStackView作为容器，所以需要自己设置UIStackView的frame属性，如：

let count = 4
//这是StackView的属性,内容会根据属性自动布局
let spacing: CGFloat = 10
let height: CGFloat = 50
let width: CGFloat = height * CGFloat(count) + spacing * CGFloat(count - 1)//需要自己计算宽度
 
verifyCodeView.verifyCount = count
verifyCodeView.spacing = spacing
verifyCodeView.frame = CGRect(x: (UIScreen.main.bounds.width - width) / 2, y: (UIScreen.main.bounds.height - height) / 2, width: width, height: height)

示例

可以去我的github项目地址查看示例源码并下载

尾声

所以说不要相信产品的原型啊！等UI出来了之后再动手不香吗！

作者信息

邮箱： remiliascarlet578@gmail.com 欢迎交流技术知识

本文原载于 jianyese.com，遵循 MIT 协议，复制请保留原文出处。

【iOS 组件】MHTabView

Mon, 27 Apr 2020 15:15:40 +0800

2020 年练手写的组件，已经不再维护，推荐使用 JXSegmentedView。

上班期间闲来无事，想摸鱼看番但是又害怕项目经理的制裁，那不如给自己找点事情做。于是开始封装了自己的第一个组件。

简介

一个简单的基于swift实现的顶部滚动标签栏，提供了四种不同的样式选择。

安装

可以直接通过我的github项目地址下载源码导入工程，也可以通过 CocoaPods进行安装。cocoapods的安装方法:

在你的podfile文件里加入pod 'MHTabView'，然后执行pod install指令就可以开始愉快的使用了。

使用

通过以下两种方式初始化你的tabview 注意titles和views数组长度需要相同

convenience init

`1`	`let tabview = MHTabView.init(withTitles: titles, pageViews: views)`

init and set titles and pageviews

1
2

let tabview = MHTabView.init()
tabview.setTitlesAndPageViews(titles: titles, pageViews: views)

示例

可以去我的github项目地址查看示例源码并下载

unscrollable

`1`	`tabview.titleStyle = .unscrollable`

scrollable

`1`	`tabview.titleStyle = .scrollable`

autoscrollable

`1`	`tabview.titleStyle = .autoScrollable`

autoUnscrollable

`1`	`tabview.titleStyle = .autoUnscrollable`

other

1. change color

1
2

tabview.defaultColor = .blue
tabview.selectedColor = .red

2. change width for scrollable style

1
2

tabview.style = .scrollable
tabview.tabWidth = 150

3. usage of delegate

protocol MHTabViewDelegate {
  /**停止滚动后的回调函数(index, scrollview) -> (当前滚动到的位置, scrollView属性 )*/
  func MHTabViewDidEndDecelerating(_ index: Int, _ scrollview: UIScrollView)
}

4. other APIs

setSelectedFont(_ font: UIFont)//修改选中按钮的字体

setUnSelectedFont(_ font: UIFont)//修改未选中按钮的字体

setIndicatorHeight(_ height: CGFloat)//修改指示器高度

setIndicatorWidth(_ width: CGFloat)//修改指示器宽度
 
setDefaultPage(withIndex index: Int)//设置默认选中的页面

setAnimateDuration(_ duration: TimeInterval)//设置动画过渡时间

尾声

一开始看上去觉得很简单的一个小组件，没想到自己实现起来遇到了挺多困难，也许这就是一个无名小程序员的悲伤吧，成长之路还很长啊！尽管一路跌跌撞撞，最终还是完成了，成就感爆棚 ~~感觉要开始膨胀了~~ 。哈哈，程序员道路弯又长，还是要戒骄戒躁继续前进。欢迎各位大佬们提出问题和建议，也可以到github项目地址里发issue和pull request，我会及时查看并吸取意见。

作者信息

邮箱： remiliascarlet578@gmail.com 欢迎交流技术知识

本文原载于 jianyese.com，遵循 MIT 协议，复制请保留原文出处。

【unity 教程】unity 2d 游戏光照系统使用

Tue, 06 Aug 2019 00:13:29 +0800

开发于 2019 年，源码应该不可用，教程仅供参考。

游戏源码地址

安装包(apk)下载

本篇为视频教程。

视频教程

作者信息

邮箱： remiliascarlet578@gmail.com 欢迎交流技术知识

本文原载于 jianyese.com，遵循 CC BY-NC-SA 4.0 协议，复制请保留原文出处。

【unity 游戏】横板过关游戏 Adventure in forest

Wed, 03 Jul 2019 00:13:29 +0800

开发于 2019 年，源码应该不可用，仅供参考。

源码地址

安装包(apk)下载

游戏介绍

游戏名：Adventure In Forest
游戏类型：像素风格的横板过关游戏
游戏平台：移动端 & pc 端

玩法介绍

玩家可以通过跳跃和冲刺动作通过关卡，关卡设计中加入了自行动和自动攻击玩家的怪物，以及需要通过一定的操作和思考才能通过的关卡。

游戏截图

开始页面
游戏内容(白天)
游戏内容(夜晚)
部分boss截图

视频演示

前半段演示

后半段演示

学习技术点

cinemachine相机平缓跟随
Light2D2d游戏光照系统(试验版本)
TileMap绘制地图
单例控制全局音乐
角色技能创建
boss行动模式控制
伤害判定
怪物追随
无敌时间判定
特效使用
第三方摇杆控件使用及适用性修改
转场动画
~~初识pr视频剪辑和b站投稿~~

所用资源

来自爱给网音频资源
来自unity AssetStore的免费资源

作者信息

邮箱： remiliascarlet578@gmail.com 欢迎交流技术知识

本文原载于 jianyese.com，遵循 CC BY-NC-SA 4.0 协议，复制请保留原文出处。

⭐剑夜の独白⭐

Mon, 01 Jan 0001 00:00:00 +0000

🏷️硕士毕业于一所不知名院校，和大多数人一样，毕业后理所当然的进社会成为牛马，现于某互联网企业工作，是一个普普通通的程序员。无异于其他互联网从业者，每天早晚十点上下班，做着干不完的活，吃着画不完的饼，过着日复一日的生活，是一个平凡得不能再平凡的人，即使这并不是我的本意。

生于忧患而死于安乐。所幸，正因为工作占据了绝大多数的时间，使得我开始深入思考究竟自己想要的是什么，并为所追寻的事物挤出所剩无几的时间。

⌨️我喜欢折腾，于是尝试独立开发，曾独自完成不少 app 和小游戏；喜欢记录，于是开始写博客、写日记，记录技术与生活；喜欢音乐，于是自学了吉他和钢琴，虽然学了很久依旧是入门水平，但也足够自娱自乐；喜欢旅游，于是走了不少城市，也还有很多旅游计划还未实施；还看了很多电影、动画、特摄剧，玩了很多电子游戏、桌游、剧本杀、密室，看了很多小说、漫画、文学作品……

🖋️奈何一天只有二十四小时，而我还喜欢睡觉。时间不仅不够用，大多时候还不属于自己，工作日能用在自己身上的时间屈指可数，也只有节假日能做些非碎片化的事情。话虽如此，现实总是与理想不同，除了心血来潮的时候，我总是不甘心在周末花时间做点“正事”，这可能让我如咸鱼一般度过一周中最悠闲的日子，不过能好好在周末消除疲惫也便足够了。

🕯️梦想是成为优秀的独立开发者，辞去工作后专注于开发自己的产品，不再为资本家创造剩余价值，而是通过自驱为理想与喜好提供时间和经济基础，从而实现自身价值。

🚩在此给自己立个 flag，希望这个博客可以持续更新下去，希望我的旅途终能抵达星辰大海！

iOS 开发

Mon, 01 Jan 0001 00:00:00 +0000

iOS 组件

Mon, 01 Jan 0001 00:00:00 +0000

unity 开发

Mon, 01 Jan 0001 00:00:00 +0000

🏷️本站后续规划🏷️

Mon, 01 Jan 0001 00:00:00 +0000

📅待办功能

📕P0

点赞能力 - Waline 自带 or 自己做
seo 优化 - 谷歌、百度、必应、搜狗
本站运行时间动态计时
评论回复邮件通知

📙p1

广告接入
电子书
pjax
看板娘
打赏能力
网页美化 - 卡片、tag 圆角调整、网站背景调整、首页美化、封面图片大小调整
评论系统美化
评论部署在 vercel 响应较慢，考虑迁移至 Cloudflare 的无服务器
评论的数据库 LeanCloud 容量较小，考虑迁移至 TiDB CLoud，可参考教程

📗p2

AI 接入
评论数统计 - Waline 自带
工具箱
- JSON 转义
- 编解码工具

📃已完成功能

网站 favicon
字数统计
评论系统
流量分析 - Google Analytics
访问量统计

技术问题

Mon, 01 Jan 0001 00:00:00 +0000

建站技术

Mon, 01 Jan 0001 00:00:00 +0000

剑夜 | 搜索

Mon, 01 Jan 0001 00:00:00 +0000