在Gatsby中使用

可以使用gatsby-plugin-valine插件在 Gatsby 站点中嵌入 Valine 组件。

本插件支持 TypeScript(因为就是用 TypeScript 写的),目前仅支持 Gatsby v2。

安装

  1. 通过 npm 下载和安装本插件:

        npm install --save gatsby-plugin-valine
    
        # 或者用 yarn:
    
        yarn add gatsby-plugin-valine
    
  1. 在项目的 gatsby-config.js 文件中加入插件配置:

        // gatsby-config.js
        {
            module.exports = {
                plugins: [`gatsby-plugin-valine`],
            };
        }
    
  1. gatsby-config.js 中配置插件时,也支持设置插件选项,比如这样:

        // gatsby-config.js
        {
            module.exports = {
                plugins: [
                    {
                        resolve: `gatsby-plugin-valine`,
                        options: {
                            appId: `LEANCLOUD_APP_ID`,
                            appKey: `LEANCLOUD_APP_KEY`,
                            avatar: `robohash`,
                        },
                    },
                ],
            };
        }
    

使用插件

插件安装好后,只需要在需要的页面中导入它并添加<Valine>组件标签即可。

比如你希望在一个用gatsby-starter-blog模板创建的博客站点上加入评论功能,并将 Valine 评论显示在每个博客文章页面的底部,那么只需要在src/templates/blog-post.js文件中添加如下代码:

import Valine from 'gatsby-plugin-valine' // 导入

...

const BlogPostTemplate = ({ data, pageContext, location }) => {
  ...
  return (
    <Layout location={location} title={siteTitle}>
      ...
      <!-- 在页面框架最后添加Valine标签 -->
      <Valine appId="LEANCLOUD_APP_ID" appKey="LEANCLOUD_APP_KEY"/>
    </Layout>
  )
}

也许你已经注意到,在上例中appIdappKey的值是作为<Valine>标签的属性传入的。同理,其他 Valine 选项也可以用这种方式传入。

如果这种方式对你来说看着太乱,或者太麻烦(比如有多个页面都需要添加标签),那么也可以在gatsby-config.js插件选项中进行全局设置。

标签里的局部选项会与gatsby-config.js提供的全局选项进行深度合并lodashmerge行为),且局部选项会覆盖同名的全局选项。

Valine 选项

如前文所述,Valine 选项可以通过插件选项组件属性进行设置。el以外,本插件支持 Valine 1.4.14版本所提供的所有可用选项。el属性在插件中会被改写,因此设置了也没效果。

关于 Valine 选项的更多详细描述,请参阅配置项

Valine组件的各属性已经编写了详细的注释,TypeScript 开发者可以在支持的代码编辑器中直接查看。

下面是插件支持的 Valine 选项列表,以便快速查阅。列表使用 TypeScript 的语法进行了类型描述。

  appId?: string
  appKey?: string
  placeholder?: string
  path?: string
  avatar?: '' | 'mp' | 'identicon' | 'monsterid' | 'wavatar' | 'retro' | 'robohash' | 'hide'
  meta?: ('nick' | 'mail' | 'link')[]
  pageSize?: number
  lang?: string
  visitor?: boolean
  highlight?: boolean
  avatarForce?: boolean
  recordIP?: boolean
  serverURLs?: string
  emojiCDN?: string
  emojiMaps?: Record<string, string>
  enableQQ?: boolean
  requiredFields?: ['nick'] | ['nick', 'mail']

为组件设置样式

<Valine> 组件支持 styleclassName 两个属性,以便开发者进行 CSS 样式重写和定制。

自定义的样式和 CSS 类名会被应用到Valine的容器 DOM 节点上,即拥有 CSS 类v的那个节点。自定义的类名会出现在v之前。

© 2017 - 2020
Powered By xCss.