在起项目用`nginx`反代的时候，会发现出现意料之外的`301`，把需要或者不需要的端口号带上。

## 现象

使用 `vanblog` 的镜像时使用`-p 2333:80`,那么：

1. 使用 http://域名:2333 可以正常访问
2. 使用 http://域名:2333/admin 无法访问，具体体现为：该请求会返回 301 重定向，Location 为 http://域名/admin



## 原因分析

[官方文档](http://www.5190m.top/note/2020/7/8/2020-07-08-install-elastic-and-kibana.html#%E4%BD%BF%E7%94%A8nginx%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86Kibana)

```nginx
If a location is defined by a prefix string that ends with the slash character,
 and requests are processed by one of proxy_pass, fastcgi_pass, uwsgi_pass, scgi_pass, or memcached_pass,
 then the special processing is performed.
 In response to a request with URI equal to this string, but without the trailing slash,
 a permanent redirect with the code 301 will be returned to the requested URI with the slash appended.
 If this is not desired, an exact match of the URI and location could be defined like this:

location /user/ {
    proxy_pass http://user.example.com;
}

location = /user {
    proxy_pass http://login.example.com;
}
```

## 解决方案

配置文件增加：

```nginx
absolute_redirect off;
```

nginx 301 问题

参考： [CSS 实现展开动画](https://www.cnblogs.com/WindrunnerMax/p/14346468.html)

展开收起效果是比较常见的一种交互方式，通常的做法是控制 display 属性值在 none 和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素展开收起能具有平滑的效果。



## max-height

首先想到的是通过 height 在 0 与 auto 之间切换，但是结果可能并不会是我们所预期的那样，原因是我们将要展开的元素内容是动态的，即高度值不确定，因此 height 使用的值是默认的 auto，从 0px 到 auto 是无法计算的，因此无法形成过渡或动画效果。

据此我们可以使用 max-height，将 max-height 从 0 过渡到一个能够大于完全显示内部元素的值，展开后的 max-height 值，只需要设定为保证比展开内容高度大的值即可，在 max-height 值比 height 值大的情况下，元素仍会默认采用自身的高度值即 auto，如此一来一个高度不定的元素展开收起动画效果就实现了。

请注意这种方式实现还是有限制的，使用 CSS 进行过渡动画的时候依旧是通过计算 0 到设定的 max-height 高度值进行计算的，在实际应用中如果 max-height 值太大，在元素收起的时候将会产生延迟的效果，这是因为在收起时，max-height 从设定的特别大的值，到元素自身高度值的变化过程将占用较多时间，此时画面表现则会产生延迟的效果。因此建议将 max-height 值设置为足够安全的最小值，这样在收起时即使有略微延迟，也会因为时间很短，难以被用户感知，将不会影响体验。

```html
<!DOCTYPEhtml>
<html>
  <head>
    <title>展开动画</title>
    <styletype="text/css">
      .page {
        width: 200px;
        padding: 10px20px;
        border: 1pxsolid#eee;
      }
      .container {
        overflow: hidden;
      }
      .container > .options {
        transition: all0.5s;
        max-height: 0;
      }
      .container > .unfold {
        max-height: 150px;
      }
      .container > .btn {
        color: #4c98f7;
        cursor: pointer;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <divclass="page">
      <divclass="container">
        <divclass="btn"onclick="operate(this)"unfold="1">展开</div>
        <divclass="options">
          <divclass="option">选项1</div>
          <divclass="option">选项2</div>
          <divclass="option">选项3</div>
          <divclass="option">选项4</div>
          <divclass="option">选项5</div>
          <divclass="option">选项6</div>
          <divclass="option">选项7</div>
        </div>
      </div>
    </div>
  </body>
  <scripttype="text/javascript">
    functionoperate(btn) {
      constoptionsNode = document.querySelector(".container > .options");
      constunfold = btn.getAttribute("unfold");
      if (unfold && unfold === "1") {
        btn.innerText = "收缩";
        optionsNode.classList.add("unfold");
      } else {
        btn.innerText = "展开";
        optionsNode.classList.remove("unfold");
      }
      btn.setAttribute("unfold", unfold === "0" ? "1" : "0");
    }
  </script>
</html>
```

## height

使用 max-height 必定有一定的局限性，那么不如我们在 DOM 加载完成后就取得元素的实际高度并保存，之后直接利用这个真实高度与 0 进行动画过渡即可，因为浏览器的渲染顺序，在解析 JavaScript 时会阻塞 DOM 的渲染，所以在获取元素实际高度再设置高度为 0 的过程中一般不会出现闪烁的情况，如果实在担心因为获取高度之后再将高度设置为 0 可能会有一个闪烁的过程，那么我们可以取得元素父节点后调用 cloneNode(true)方法或者 innerHTML 方法取得字符串再 innerHTML 到一个新创建的节点，目的就是将其拷贝，之后将其使用绝对定位等放置到屏幕外即将其设置到屏幕能够显示的外部区域，注意此时要设置 body 的 overflow: hidden;，之后利用 getComputedStyle 取得实际高度，然后再将其移出 DOM 结构，此时有了实际高度就可以进行动画过渡了，下面简单的实现一下在 DOM 加载时便取得实际高度进行动画实现。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>展开动画</title>
    <style type="text/css">
      .page {
        width: 200px;
        padding: 10px 20px;
        border: 1px solid #eee;
      }
      .container {
        overflow: hidden;
      }
      .container > .options {
        transition: all 0.5s;
      }
      .container > .btn {
        color: #4c98f7;
        cursor: pointer;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="container">
        <div class="btn" onclick="operate(this)" unfold="1">展开</div>
        <div class="options">
          <div class="option">选项1</div>
          <div class="option">选项2</div>
          <div class="option">选项3</div>
          <div class="option">选项4</div>
          <div class="option">选项5</div>
          <div class="option">选项6</div>
          <div class="option">选项7</div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    (function init(win, doc) {
      const optionsNode = document.querySelector(".container > .options");
      optionsNode.setAttribute(
        "real-height",
        win.getComputedStyle(optionsNode).height
      );
      optionsNode.style.height = "0px";
    })(window, document);

    function operate(btn) {
      const optionsNode = document.querySelector(".container > .options");
      const unfold = btn.getAttribute("unfold");
      const realHeight = optionsNode.getAttribute("real-height");
      if (unfold && unfold === "1") {
        btn.innerText = "收缩";
        optionsNode.style.height = realHeight;
      } else {
        btn.innerText = "展开";
        optionsNode.style.height = "0px";
      }
      btn.setAttribute("unfold", unfold === "0" ? "1" : "0");
    }
  </script>
</html>
```

## translateY

还有一种常用实现动画的方式，即首先将外层元素没有动画过渡的形式直接展开，再将选项加入动画缓慢下落，通常利用 transform: translateY();去实现这个缓慢下降的动画，在微信的 WEUI 小程序组件库的首页就是采用这种实现方式。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>展开动画</title>
    <style type="text/css">
      .page {
        width: 200px;
        padding: 10px 20px;
        border: 1px solid #eee;
      }
      .container,
      .options-container {
        overflow: hidden;
      }
      .options-container {
        height: 0;
      }
      .container .options {
        transition: all 0.5s;
        transform: translateY(-100%);
      }
      .container .unfold {
        transform: translateY(0);
      }
      .container > .btn {
        color: #4c98f7;
        cursor: pointer;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="container">
        <div class="btn" onclick="operate(this)" unfold="1">展开</div>
        <div class="options-container">
          <div class="options">
            <div class="option">选项1</div>
            <div class="option">选项2</div>
            <div class="option">选项3</div>
            <div class="option">选项4</div>
            <div class="option">选项5</div>
            <div class="option">选项6</div>
            <div class="option">选项7</div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    function operate(btn) {
      const optionsNode = document.querySelector(".container .options");
      const optionsContainer = document.querySelector(".options-container");
      const unfold = btn.getAttribute("unfold");
      if (unfold && unfold === "1") {
        btn.innerText = "收缩";
        optionsNode.classList.add("unfold");
        optionsContainer.style.height = "auto";
      } else {
        btn.innerText = "展开";
        optionsNode.classList.remove("unfold");
        optionsContainer.style.height = "0px";
      }
      btn.setAttribute("unfold", unfold === "0" ? "1" : "0");
    }
  </script>
</html>
```

css 实现展开收起动画

## 闲话

我喜欢写博客，或者说喜欢有这么一个地方。因为哪怕平时不怎么写，但是有时候看到的好东西偶尔会想着有个放过来。

第一次知道个人博客这个东西是刚上大学，那时候搜索一些代码相关的问题，偶尔会搜到别人的博客里，就感觉好酷啊。 在互联网上有这么一个地方，可以抒发自己的见解并且分享知识。于是那时候搜索一番，用`hexo`写了第一篇博客：

> [OpenWrt/LEDE 内网转发ipv6](https://www.mereith.com/post/129#heading-0) 。

后续零零散散写了一些，但发现有些不方便：每次写完必须构建然后发布，然后刷新 `CDN` ，而且很大程度上我必须用常用的那一台电脑写，不然我就要重装环境（那时候还没有 `codespace`）。



## 第一次

2021上半年我准备出去找工作，第一份工作打算招前端的。于是我花了大概不到一个月学了一些前端知识和一点框架（`react`、`umijs`、`eggjs`）。当时觉得自己比较僵硬，想写个项目练练手，顺便简历有的写，于是就写了博客。当时用的 `egg.js` 和`umi.js` 作为前后端的框架，还用了 `服务端渲染` 的方式。记得当初不熟悉部署那一套（`docker`啊，`k8s`啊），直接在裸机服务器部署的，`nginx`反代给我折腾半天，不过总算是搞明白了。

但是用着用着发现小问题不断，一方面是我代码写的不好，`react` 总是触发多次重复渲染；另一方面是`cdn`和`ssr`的配置不对，我新写的文章有时候在页面上刷新也不展示，缓存的奇奇怪怪。移动端展示也不优秀。

但作为一个前端新手，我还是挺满意的，虽然现在看来代码写的稀烂。当时还写了一篇文章：[基于React/umi/egg自建博客系统](https://www.mereith.com/post/90) ，当初还想开源给别人用，结果文章后面说的那些一个也没实现。后面工作忙了我也没更新过这一版了。

## 第二次

后面我去了`Authing`，随着我工作带来的水平提高，我看原来的博客越来越不顺眼了。也愈发觉得`SSR`这种方式不适合个人博客的场景。于是我想用`SSG（静态生成）`来重新写一次博客。因为在公司也一直用`react`，所以这一次用了`gatsby`，顺手复习一下`graphQL`岂不是秒的很？

于是我就用了`gatsby`重新写了博客，其中遇到了一些问题，比如插件对接`API`或者`mongoDB`对数据的一致性要求很高，我当时的数据结构偶尔会丢数据，我就写了适配函数。当时还颇为认真的规划了一下`css`，因为写博客是对自己水平的考察，所以我没有用任何第三方库，组件啥的都是自己写的。还写了简单的搜索接口。

后来部署的时候发现每次都手动构建很傻，我还写了一个微服务叫`blog-publisher`，它接收后台的构建请求，拉取最新的代码，然后`build`，发版到`cdn`并自动刷新`cdn缓存`。虽然延迟长了一些，但是也还能用。

但它还是有一些问题：

* 代码写的比较混乱，维护性差。尤其是写了一堆适配函数。
* 不具备通用性，我没办法给别人用。一开始就是为了自用而开发的。
* 黑暗模式没实现，搜索卡片简陋。
* 样式还是不美观。
* 构建到看到结果还是慢了点。

## 第三次（现在的版本）

2022年中我离职了，现在有了大把的时间。那就重构吧，这次就比较系统了，一开始就瞄准了以下几个目标：

* 良好的代码维护性，清晰的层级逻辑
* 面向开源，任何人都能用（所以得有完善的初始化功能、所有选项都可配置化）
* 还用`SSG`但是要增量渲染，不要每次都手动刷新。
* 支持黑暗模式，完美支持各个屏幕大小，样式好看。

其实在这之前我也调研过，考虑了一下要不要用现在的博客。但是要么我觉得不好看，要么觉得花里胡哨的，要么觉得功能不完备。想来想去还是自己实现比较好。
总之最终我决定把这个博客系统分为几个服务：

* 后台服务： 采用`nest.js`实现。
* 管理页面：采用`antd pro`实现。
* 博客前台：采用`next.js`实现，完美支持需求。
* 评论系统：直接用`waline`，以后会考虑自研。

具体到前后端我都尽量先规划好再写，这样避免了很大程度上的代码混乱（虽然有些地方还是小脏 2333）。

现在你所看到的就是重构之后的版本啦~ 基本能用了，但是文档还没写。我会慢慢补的。

具体大概有以下特点：

* 一站式博客系统，功能全面。
* `docker-compose` 一键部署。
* 有完善的初始化和后台页面。
* 支持百度、谷歌分析。
* 支持 `waline` 评论系统。
* 数据可以导入导出。
* 具备完善的文章、分类、标签、草稿功能。
* 站点信息可配置化，logo图片可配置化，导航栏可配置化。
* 完善的主题切换系统，支持：自动、白天和黑暗三种模式。
* 全面适配各个尺寸的屏幕，移动端友好，自适应布局。
* 静态生成页面，`CDN`与`SEO`友好。
* 增量渲染，自动根据最新的数据生成页面，无需重新构建。
* 资源消耗少，初始化后所有服务加起来 `100M` 内存左右。（默认开启了内存缓存后面会增大些）
* 带有快捷键的搜索功能。
* 内置访客、访问量统计。
* `API First`，后端自带`swagger` ，方便调试查看。（后面会补 API 文档）
* 理论上你可以只用后端和后台，网站的前台自己去实现。（其实就是把本项目当作`无头 CMS`也是完全可以的）
  。。。

有兴趣的可以试试哈，有啥问题也欢迎和我联系，我会持续更新的。👀️

项目主页: [https://vanblog.mereith.com](https://vanblog.mereith.com)

关于我重写了三次博客项目这件事

```css
.fathor {
display: flex;
}
.son1{ flex: 1;  overflow: hidden;}
```

[其他参考](https://juejin.cn/post/6844904012794298375)

css flex 布局超出隐藏

```css
.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
```