IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> 使用 Next.js 开发个人博客的一点记录 -> 正文阅读

[开发工具]使用 Next.js 开发个人博客的一点记录

使用 Next.js 开发个人博客的一点记录

其实是要帮学校的某个 club 写官网,最终会使用学校的服务器进行部署,所以也就不考虑 hexo+GitHub 这样的实现方法了。

经过一番搜索之后,最终决定使用 Next.js 作为服务端渲染,读取本地 Markdown 的,以及使用图床三管齐下结合的方式进行实现。

下面解释一下为什么使用 Next.js,markdown 和 图床。

  • Next.js

    可以使用 SSG 的方式进行渲染,俱乐部的文章内容等本身就不会更新的特别频繁,所以可以使用 SSG 加上重新自动部署的时间设置为 1-3 天一次,这样也能够比较准确地在让爬虫抓到信息。

    同时使用 SSG 的方式进行渲染也可以避免像 hexo 一样,每次修改完内容之后都需要手动部署一次的麻烦。俱乐部写文章内容的成员可能没有权限或不是计算机系的成员,那也没有办法做到即时再部署,即时性也不用考虑太多。

    不采用 SSR 的是因为文章的更新频率肯定很低,既然 SEO 都能满足的情况下,那就尽量减少学校服务器的压力了。

  • markdown

    文档尺寸会小很多,而且也能通过第三方插件进行 HTML 渲染,在前期 CSS 确定了之后,基本上就不太用考虑样式的问题。

    另外 md 的写法也比较简单,上手也比快,不用考虑之后交接下一任成员是不是计算机系,是不是还得学一下编程这种考量。

  • 图床

    主要还是为了节省空间,白嫖就真的香……

第三方库

目前有四个第三方库的使用:

  • Material UI

    主要是为了移动端适配,Material UI 提供的一些 React Component 对于页面的实现会方便很多,并且我也需要使用一些 Material UI 的 icon

  • react-markdown

    下载量最高的 markdown 第三方库是 marked,不过我简单查了一下,我觉得对我的需求来说,marked 有这么几个问题:

    1. 无法完全发挥 Next 的优势

      Next 提供了一个名为 Image 的组件,可以根据浏览器对图片进行压缩和优化,如原本使用的样例图片的大小为 320kb,并且格式是 jepg

      large jpeg file

      但是将图片转化为 Image 的组件之后,Next.js 对图片进行了优化,将原本的 jpeg 转换成了 webp,格式也从原来的 320 减少到了 191kb:

      optimized webp

      在响应式(移动端)上,图片格式更是减少到了 134kb:

      responsive

      这种优化就能够极大地提高用户体验。可惜 marked 是一个通用库,没有专门提供对 Next.js 的接口。

    2. 需要使用 refs

      如果非得做优化,那么使用 refs 应该也可以……不过如非必要,我就不适用 refs。

    3. code style 的优化比较难做

      marked 使用的方法是传 class 进去,不过这样就肯定需要操作 refs 了……

      从官方文档来看,marked 本身对于 code style 也没有做什么优化:

      no code optimization

      如果自己做优化,那就……感觉更麻烦了。

      在有替代品的情况下,有点不值得,而且这个样式不是很符合颜狗的审美。

    与之对比的 react-markdown 就开放了组件的重写,目前实现的效果如下:

    react markdown

    代码高亮功能和样式是使用另一个库完成的,下文另说,图片部分实现代码为:

    const PostContent = ({ post }) => {
      const customerComponents = {
        p(paragraph) {
          const { node } = paragraph;
    
          if (node.children[0].tagName === "img") {
            const img = node.children[0].properties;
    
            return (
              <div className={classes.image}>
                <Image
                  src={img.src}
                  alg={img.alt}
                  width="100%"
                  height="100%"
                  layout="responsive"
                  objectFit="contain"
                />
              </div>
            );
          }
    
          return <p>{paragraph.children}</p>;
        },
      };
    
      return (
        <ReactMarkdown components={customerComponents}>
          {post.content}
        </ReactMarkdown>
      );
    };
    

    component 是 react-markdown 开放对组件的重构,这段代码就对传进来的截点做了判断,如果是图片,就是用 Next.js 自带的组件进行渲染,同时完成多端优化,完胜小屏设备进一步压缩图片大小的优化(上面截图有展示)。

  • react-syntax-highlighter

    这是代码高亮的插件,react-markdown 原生对代码的支持也挺……朴素的,所以找了这个插件,实现也是通过判断截点是否为 code,如果是的话就使用 syntax highlighter 重写默认的样式,实现方法如下:

    import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
    import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism";
    
    const customerComponents = {
      code(code) {
        let language = "";
    
        if (code.className) {
          language = code.className.split("-")[1];
        }
    
        return (
          <SyntaxHighlighter language={language} style={darcula}>
            {code.children}
          </SyntaxHighlighter>
        );
      },
    };
    
  • gray-matter

    这是用来读取 markdown 的 meta data 的插件。不知道 markdown 里面可以添加 meta data 这个功能有多少人了解,hexo 也是使用这种方法进行数据获取。

    常用的 YAML 格式如下:

    ---
    title: "Dummy Blog"
    date: "2022-04-24"
    lastUpdated: "2022-04-25"
    ---
    

    gray-matter 就是一个可以读取这些 meta data 和 markdown 内容的第三方库,官方文档说明如下:

    假设 md 内容为:

    ---
    title: Hello
    slug: home
    ---
    
    <h1>Hello world!</h1>
    

    解析后的内容为:

    {
      "content": "<h1>Hello world!</h1>",
      "data": {
        "title": "Hello",
        "slug": "home"
      }
    }
    

    通过这种方式,可以在 meta data 中添加封面的 url,发布日期等,实现起来更加方便也可以统一格式。

大致分析就是上面这些内容,这个项目具体的代码应该……不会放出来,但是根据已有的库来说,自己实现一个博客/日志系统应该也不是特别的难,可以当作练手项目玩玩看。

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-04-27 11:30:40  更:2022-04-27 11:31:10 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/14 15:05:55-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码