Code Monkey home page Code Monkey logo

awesome-nextjs-notion-blog's Introduction

Example article page

Awesome Next.js-Notion Blog

本项目基于 nextjs-notion-starter-kit 项目修改而成。

完整教程见:如何用Notion搭建自己的博客

New Features

  • 目录放置于左边
  • 增加公众号跳转
  • 修复代码展示 BUG
  • 增加图片放大功能
  • 增加 Google Analytics 分析功能
  • 补全中文教程
  • 支持简单表格
  • 支持文章级别的效果反馈

Setup

All config is defined in site.config.js.

  1. Fork / clone this repo
  2. Change a few values in site.config.js
  3. yarn
  4. yarn dev to test locally
  5. npm run deploy to deploy to vercel 💪

URL Paths

The app defaults to slightly different pathnames in dev and prod (though pasting any dev pathname into prod will work and vice-versa).

In development, it will use /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202 which is a slugified version of the page's title suffixed with its Notion ID. I've found that it's really useful to always have the Notion Page ID front and center during local development.

In production, it will use /nextjs-notion-blog which is a bit nicer as it gets rid of the extra ID clutter.

The mapping of Notion ID to slugified page titles is done automatically for you as part of the build process. Just keep in mind that if you plan on changing page titles over time, you probably want to make sure old links will still work, and we don't currently provide a solution for detecting old links aside from Next.js built-in support for redirects.

See mapPageUrl and getCanonicalPageId from for more details.

NOTE: if you have multiple pages in your workspace with the same slugified name, the app will throw an error letting you know that there are duplicate URL pathnames.

Notes

  • 修改node_modules/进行patch后,vercel需要重新deploy一下,否则会使用默认的依赖包,导致patch失败。

License

MIT ©

This project based on transitivebullsh.it.

Feedback 部分使用的表情包版权来源于 ISUX

awesome-nextjs-notion-blog's People

Contributors

transitive-bullshit avatar frankcbliu avatar jorgeruvalcaba avatar andrewnt219 avatar gobyebye avatar dizotoff avatar jsonmartin avatar chenqianchenga avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.