网站设置访问权限导流微信公众号

# 效果展示

平常我们会看到一些网站的内容访问的时候会受到限制，需要登录或者是关注才能访问全文，效果如下:

阅读全文

# 注册 openWrite 平台

目前本站点使用的解决策略是借助于 openWrite 平台提供的支持

点击注册账号 (opens new window)

然后点击 openWrite 管理后台 (opens new window)

openWrite 绑定公众号方法，请见详情博客导流公众号 (opens new window)

# vuePress 的代码布局

在 .vuepress => components 文件夹下面创建组件


<script>
export default {
  name: 'HideArticle',
  mounted() {
    import('../public/js/btwplugin')  // 引入那段代码脚本,直接把那段代码写到这里不行?还真不行,依旧会报btw is not defined
    // 或者使用require('../../public/js/btwplugin');当然最好是在上面定义,monted里面调用

  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12

在 .vuepress => config => head 全局导入 js

export default <HeadTags>[
  [
    'script',
    { charset: 'utf-8', src: 'https://my.openwrite.cn/js/readmore.js' },
  ],
];

1
2
3
4
5
6

在 .vuepress => public => js 导入 js 加载代码

window.onload = function() {
  themeDefaultContent = $(
    '#app > .theme-container  .page > .theme-vdoing-wrapper'
  ); // 通过 jq 查找DOM
  themeDefaultContent.attr('id', 'container'); // 添加标签
  btw = new BTWPlugin(); // 注意btw需要是个全局变量,把const去掉
  btw.init({
    id: 'container', // openWrite 获取到的
    blogId: 'xxxxxx',
    name: '乌图AI',
    qrcode: 'https://www.utuai.com/assets/img/weixin.jpg',
    keyword: 'uTuAIBlog',
  });
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在微信公众号里面设置关键词回复即可完成

# vuePress 组件其他导入方式

# 1. 插件形式

在 /.vuepress/ 中的 config.js 配置插件中，以插件的方式全局引入的，具体插件的引入可以见文档 vuepress 使用插件

module.exports = {
  plugins: [
    [
      {
        name: 'page-plugin',
        globalUIComponents: ['global-HideArticle组件的名称'],
      },
    ],
  ],
};

1
2
3
4
5
6
7
8
9
10

# 2. enhanceApp.js 导入

在 vuepress 中的 enhanceApp.js , 这个文件是需要自己手动创建的，它可以对 VuePress 应用进行拓展配置，这个文件应当 export default 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数

你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子

import ElementUI from 'element-ui';

// 使用异步函数也是可以的
export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData, // 站点元数据
  isServer, // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
  // ...做一些其他的应用级别的优化
  // 全局注入组件
  Vue.use(ElementUI);
  Vue.mixin({
    // 混合注入,加载全局文件
    mounted() {
      import('./public/js/btwplugin');
    },
  });
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 存在问题

因为 vuepress 是采用 vue 开发的单页面应用，所以加载存在问题

openWrite 目前在主要的问题是处理好指定哪些页面显示，后面带思考

改良后的代码是放在 mixin 函数里面

    mounted() {
      if(!this.$frontmatter.article){
        const container = $('.theme-vdoing-wrapper>  .articleInfo-wrap + .content-wrapper .theme-vdoing-content');
        if (!container) return;
        container.attr('id', 'container');
        window.btw = new BTWPlugin();
        window.btw.init({
          id: 'container',
          blogId: '32233-1699069242965-284',
          name: '乌图AI',
          qrcode: 'https://www.utuai.com/assets/img/weixin.jpg',
          keyword: 'uTuAIBlog',
        });
      }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

针对主题色修改还需要在 styles => index 里面加入以下代码

#read-more-mask
  background : -webkit-gradient(linear, 0 0%, 0 100%, from(var(--sidebarBg)), to(var(--borderColor))) !important

1
2
3

#微信公众号

上次更新: 12/12/2023, 9:12:33 AM

← Baidu站长资源提交收录 Docker+Pandora本地部署镜像chatGPT→