Giter VIP home page Giter VIP logo

drama-blog's Introduction

Drama Blog

VitePress + Tailwind CSS 实现的 个人博客

Initial

Vitepress

# https://vitepress.dev/guide/getting-started
$ pnpm add -D vitepress

$ pnpm vitepress init

# Theme 选择 Default Theme + Customization

Tailwind CSS

# https://tailwindcss.com/docs/guides/vite#vue
$ pnpm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

Configure your template paths.

.md files and .vue files

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    ".vitepress/theme/components/*.vue",
    ".vitepress/theme/pages/*.vue",
    "./posts/**/*.md",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

add to style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Customize

  • dotenv/con
# https://github.com/motdotla/dotenv
$ pnpm i -S dotenv

Read Time

#
$ pnpm i -D reading-time

Enhanced Markdown

$ pnpm i -D markdown-it-footnote markdown-it-image-figures markdown-it-mathjax3

图片统一优化

sips -Z 1080 *.png

部署后刷新页面 404 的问题

由于启动了 cleanUrls: true, 这个会让 /posts/a.html 变成 /posts/a ,路径更加简洁,单服务端也需要做出适配。

  • Vercel 新增 vercel.json
{
  "cleanUrls": true
}
  • Ngix 配置
 location /posts/ {
  try_files  $uri $uri.html
 }

即找不到路径就在路径后加html试试

drama-blog's People

Contributors

goozyshi avatar

Watchers

 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.