个人中心
gpt4 book ai didi

javascript - 颤振网络 : SPA: Open Graph: Dynamically assign og:image meta tags

转载 作者：行者123 更新时间：2023-12-04 09:10:10 27 4
gpt4 key购买 nike

尝试为爬虫创建动态 og:image 标签以捕获适当的缩略图。我有一个 JS 脚本生成适当的 og:image url，但爬虫在搜索时似乎没有运行任何 JS。有更好的方法吗？

目前:

<head>
  <script>
    const queryString = window.location.href;
    const urlParams = new URLSearchParams(queryString);
    const uid = urlParams.get('uid')
    const pid = urlParams.get('pid')
    if (uid != null && pid != null)
      document.getElementById('urlThumb').content = `https://my.app/posts%2F${uid}%2F${pid}%2Furl_thumb.jpg?alt=media`;
  </script>
  <meta property="og:image" id='urlThumb' content="https://my.app/default%default.png?alt=media"/>

...

</head>

最佳答案

好的，所以我能够以半黑客的方式实现这一目标。我修改了 firebase.json 以将“/post”路由路由到 firebase 云函数。您只需添加要重新路由的路由“源”，并添加要触发的 firebase 云函数的名称。

    "rewrites": [
      {
        "source": "/post",
        "function": "prebuildPostPage"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]

我必须添加 'express' 包来处理 https 请求。在您的函数文件夹中运行“npm i express”。然后我做了这两个功能(看起来有点奇怪):

const express = require('express');
const app = express();

app.get('/post', (req, res) => {
    console.log(req.query);
    const uid = req.query.uid;
    const pid = req.query.pid;
    console.log(`uid[${uid}], pid[${pid}]`);
    if (uid == null || pid == null)
        res.status(404).send("Post doesn't exist");
    res.send(`<!DOCTYPE html>
    <html>
    <head>
      <meta property="og:image" id='urlThumb' content="${`https://my.app/posts%2F${uid}%2F${pid}%2Furl_thumb.jpg?alt=media`}"/>
      <meta property="og:image:width" content="800">
      <meta property="og:image:height" content="600">
      
      //Rest is the same as index.js head.

    </head>
    <body id="app-container">
      //Same as index.js body
    </body>
    </html>
    `);
});

exports.prebuildPostPage = functions.https.onRequest(app);

这对于让正确的拇指接触爬虫非常有用，不幸的是它会将人们带到主页。没有布埃诺。

这是因为 Flutter Web 使用“#”来管理页面的路由和历史记录。在转发到我的云功能的 url 中忽略主题标签后的所有内容。

所以...黑客部分...我是我的 flutter web 应用程序 main.dart 文件我必须检查给定的 URL 实际上是否是“my.app/post?uid=xxx&pid=xxx”格式.在这种情况下，我没有加载从主页开始的默认 MyApp，而是创建了一个名为 MyAppPost 的第二个选项，它默认为带有提供的 uid 和 pid 数据的发布屏幕。这行得通，但它搞砸了我的导航系统。

将继续尝试和改进此设置。

void main() {
  //Provider.debugCheckInvalidValueType = null;
  setupLocator();
  String url = window.location.href;
  String _uid;
  String _pid;
  bool isPost = false;
  print(url);
  if (url.contains('/post')) {
    _uid = getParam(url, 'uid', 28);
    _pid = getParam(url, 'pid', 20);
    if (_uid != null && _pid != null) isPost = true;
  }
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => PageManager(),
        ),
      ],
      child: isPost
          ? MyAppPost(
              uid: _uid,
              pid: _pid,
            )
          : MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'VESTIQ',
      navigatorKey: locator<NavigationService>().navigatorKey,
      onGenerateRoute: (rs) => generateRoute(rs, context),
      initialRoute: HomeRoute,
    );
  }
}

class MyAppPost extends StatelessWidget {
  final String uid;
  final String pid;

  const MyAppPost({Key key, this.uid, this.pid}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'VESTIQ',
      navigatorKey: locator<NavigationService>().navigatorKey,
      //onGenerateRoute: (rs) => generateRoute(rs, context),
      home: PostView(
        oid: uid,
        pid: pid,
      ),
    );
  }
}

编辑:工作导航器

void main() {
  setupLocator();
  String url = window.location.href;
  String _uid;
  String _pid;
  bool launchWebApp = false;
  if (url.contains('/post')) {
    _uid = getParam(url, 'uid', 28);
    _pid = getParam(url, 'pid', 20);
  }
  if (url.contains('/app')) launchWebApp = true;
  runApp(
    MyApp(
      uid: _uid,
      pid: _pid,
      launchWebApp: launchWebApp,
    ),
  );
}

class MyApp extends StatelessWidget {
  final String uid;
  final String pid;
  final bool launchWebApp;

  const MyApp({Key key, this.uid, this.pid, this.launchWebApp})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    bool isPostLink = (uid != null && pid != null);
    if (isPostLink) {
      urlPost = PostCard.fromPost(Post()
        ..updatePost(
          uid: uid,
          pid: pid,
        ));
    }
    Provider.of<Post>(context, listen: false).updatePost(uid: uid, pid: pid);
    return MaterialApp(
      title: 'VESTIQ',
      navigatorKey: locator<NavigationService>().navigatorKey,
      onGenerateRoute: (rs) => generateRoute(rs, context),
      initialRoute: launchWebApp
          ? AppRoute
          : isPostLink
              ? PostRoute
              : HomeRoute,
    );
  }
}

关于javascript - 颤振网络 : SPA: Open Graph: Dynamically assign og:image meta tags，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63364474/

27 4 0
文章推荐： python - 运行以下代码时出现逻辑错误
文章推荐： python - 将一个文件的代码应用于多个文件python(新手问题)
文章推荐： azure - 使用 Azure Devops Pipeline 将标签(带空格)传递到 ARM 模板
文章推荐： sql - 两个表引用同一个表时选择
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com