学习[VuePress Theme Hope主题的Feed支持](Feed 支持 | vuepress-theme-hope)的官方文档的时候始终不得其法，最后终于试验出来了，成功使用Feed功能。

之前写了一个Memos的组件，里面是使用的TailwindCSS；后来又写了一个Vuepress热力图组件，因为想跟vuepress-theme-hope主题保持一致，发现TailwindCSS的样式跟主题样式有些冲突，索性干脆卸载了TailwindCSS，于是重写Memos组件也跟vuepress-theme-hope主题一样，可以使用主题的深色模式和主题色，这是就发现了一个问题纠结了两三天，Memos的内容循环使用DOM生成出来的，然而使用v-html渲染的DOM中的样式无法使用scoped中的样式,Vuepress生成的html里面都有个[data-v-*]之类的标识，导致不能使用scoped内的样式，查了好久才知道，这个时候就需要使用deep了，如下：

使用Memos的都知道老版的Memos都有个热力图功能，和flomo的热力图是一样的。于是我也想在vuepress2中实现一样的热力图。一开始准备写个插件，结果发现我的水平写vuepress的插件实在是太难了，就写了个自定义组件。

使用vuepress项目可以很简单的把Markdown渲染成html文档，类似这样的应用如Hugo、Hexo、Ghost、Jekyll等，但是出于对vue的认识包括vuepress-theme-hope主题的强大，我选择了Vuepress。

Memos是一个开源的,仿flomo的,自托管的碎片化笔记应用。最近几年一直使用它记录笔记，之前看到过木木大大写的Memos单页,但是他是用纯html写的,我用Vue写过一个类似的单页将Memos中的笔记展示出来。最近准备使用vuepress重新构建的自己的网站，因为vuepress就是脱胎于vue，所以把Memos也添加进来。

方法一

1. 安装评论插件和twikoo

   pnpm add -D @vuepress/plugin-comment twikoo

2. 配置twikoo 打开.vuepress/config.ts文件，引入import { commentPlugin } from '@vuepress/plugin-comment'

https://www.bilibili.com/video/BV1dy4y1Z7xS

1. 安装依赖

   pnpm add -D tailwindcss postcss autoprefixer
2. 本地初始化安装tailwindcss

   pnpx tailwindcss init
3. 配置tailwindcss
   1. 打开tailwind.config.js

   /** @type {import('tailwindcss').Config} */
   export default {
       content: [
           './src/*.md',
           './src/.vuepress/**/*.{js,ts,jsx,tsx,vue}',
           './src/components/*.{js,ts,jsx,tsx,vue}',  // 添加这一行,我的配置文件是在components文件夹下
           ],
       theme: {
           extend: {},
       },
       plugins: [],
   }
   2. 新建文件.vuepress/styles/index.scss

   // place your custom styles here
    @tailwind components;
    @tailwind utilities;
   3. 打开.vuepress/config.js

   //省略掉其他配置
    import TailwindCSS from "tailwindcss";
    import { viteBundler } from "@vuepress/bundler-vite";
    import Autoprefixer from "autoprefixer";
   
    export default defineUserConfig({
        //省略其他配置
   
        //配置打包工具
        bundler: viteBundler({
            viteOptions: {
            css: {
                postcss: {
                plugins: [
                    TailwindCSS(),
                    Autoprefixer(),
                ],
                }
            },
            },
        }),
        
        });