[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content-add-twitter-card-for-blog":3,"$f1sxniaes5gr62":20},{"id":4,"type":5,"slug":6,"title":7,"date":8,"category":9,"tags":10,"body_markdown":12,"permalink":13,"excerpt_src":13,"media_type":13,"media_title":13,"media_author":13,"media_url":13,"rating":13,"layout":13,"pv":14,"admin_only":14,"created_at":15,"updated_at":15,"deleted_at":13,"status":16,"html":17,"excerpt":18,"cover":19},191,"article","add-twitter-card-for-blog","为博客添加Twitter卡片","2022-08-29 00:00:00","web",[11],"Twitter","\n## 什么是Twitter卡片\n\nTwitter中可以引用各个网站的链接，如果网站不做特殊处理的话，在推文中只会显示一条普通的蓝色文字链接。\n\n![普通链接](\u002Fassets\u002Fweb\u002F2022\u002Fadd-twitter-card-for-blog\u002F01.png)\n\n但是我们时不时会看到一些引用的链接，在推文中有另外的表现，像这样：\n\n![Twitter卡片](\u002Fassets\u002Fweb\u002F2022\u002Fadd-twitter-card-for-blog\u002F02.png)\n\n这就是Twitter卡片。\n\n## 原理\n\nTwitter卡片需要网站主动进行适配，Twitter会在适当的时候访问网址进行抓取，如果能抓取到指定的结构，就会显示成卡片。\n\n按照[官方文档](https:\u002F\u002Fdeveloper.twitter.com\u002Fen\u002Fdocs\u002Ftwitter-for-websites\u002Fcards\u002Fguides\u002Fgetting-started)，卡片可以有好几种类型：\n\n- `summary` 图文摘要\n- `summary_large_image` 大图展示的图文摘要\n- `app` APP下载链接\n- `player` 视频播放器\n\n针对博客，比较适合的类型是`summary`，如果图片更重要的话，用`summary_large_image`也可以。\n\n具体而言，如果需要使用`summary`类型的卡片，需要在页面的`head`中放置以下标记：\n\n```html\n\u003C!--指定卡片类型-->\n\u003Cmeta name=\"twitter:card\" content=\"summary\" \u002F>\n\u003C!--可选：站点的twitter账号-->\n\u003Cmeta name=\"twitter:site\" content=\"@nytimesbits\" \u002F>\n\u003C!--可选：作者的twitter账号-->\n\u003Cmeta name=\"twitter:creator\" content=\"@nickbilton\" \u002F>\n\u003C!--文章URL-->\n\u003Cmeta property=\"og:url\" content=\"http:\u002F\u002Fbits.blogs.nytimes.com\u002F2011\u002F12\u002F08\u002Fa-twitter-for-my-sister\u002F\" \u002F>\n\u003C!--文章标题-->\n\u003Cmeta property=\"og:title\" content=\"A Twitter for My Sister\" \u002F>\n\u003C!--文章摘要-->\n\u003Cmeta property=\"og:description\" content=\"In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling.\" \u002F>\n\u003C!--文章配图-->\n\u003Cmeta property=\"og:image\" content=\"http:\u002F\u002Fgraphics8.nytimes.com\u002Fimages\u002F2011\u002F12\u002F08\u002Ftechnology\u002Fbits-newtwitter\u002Fbits-newtwitter-tmagArticle.jpg\" \u002F>\n```\n\n\u003C!-- more -->\n\n事实上下面这些`og:`开头的标签，使用Twitter专属的标签也可以生效。\n\n```html\n\u003Cmeta name=\"twitter:title\" content=\"In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling.\" \u002F>\n\u003Cmeta name=\"twitter:description\" content=\"In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling.\" \u002F>\n\u003Cmeta name=\"twitter:image:src\" content=\"http:\u002F\u002Fgraphics8.nytimes.com\u002Fimages\u002F2011\u002F12\u002F08\u002Ftechnology\u002Fbits-newtwitter\u002Fbits-newtwitter-tmagArticle.jpg\" \u002F>\n```\n\n## 实战\n\n在Hexo中，只需要修改一下模板，为文章页添加一下上述标记，并填上对应的内容即可（模板是jade\u002Fpug）：\n\n```pug\nmeta(name=\"description\", content=desc)\nmeta(name=\"twitter:card\", content=\"summary\")\nmeta(name=\"twitter:creator\", content=\"@TooooooBug\")\nmeta(name=\"og:url\", content=config.url + url_for(page.path))\nmeta(name=\"og:title\", content=page.title)\nmeta(name=\"og:description\", content=page.raw.replace(\u002F^[\\s\\S]*---\\n\\n\u002F, '').replace(\u002F\\s+\u002Fg, ' ').slice(0, 100), '')\n- var getPhoto = (raw) => {\n-   const regex = \u002F\\!\\[.*?\\]\\((.*?)\\)\u002F;\n-   const matches = regex.exec(raw);\n-   if (matches && matches[1]) return matches[1];\n-   return '\u002Flogo.png';\n- }\nmeta(name=\"og:image\", content=config.url + getPhoto(page.raw))\n```\n\n中间加了一个`getPhoto()`方法，从原始的Markdown文本中解析出第一张图片的url，如果没有找到图片，则使用logo。\n\n## 小结\n\n挺简单的配置就能实现Twitter卡片，如果配置成功了，在发送推文的时候也可能会出现卡片预览。\n\n![卡片预览](\u002Fassets\u002Fweb\u002F2022\u002Fadd-twitter-card-for-blog\u002F03.png)\n",null,0,"2026-08-28 04:37:17","published","\u003Ch2>什么是Twitter卡片\u003C\u002Fh2>\n\u003Cp>Twitter中可以引用各个网站的链接，如果网站不做特殊处理的话，在推文中只会显示一条普通的蓝色文字链接。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fweb\u002F2022\u002Fadd-twitter-card-for-blog\u002F01.png\" alt=\"普通链接\">\u003C\u002Fp>\n\u003Cp>但是我们时不时会看到一些引用的链接，在推文中有另外的表现，像这样：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fweb\u002F2022\u002Fadd-twitter-card-for-blog\u002F02.png\" alt=\"Twitter卡片\">\u003C\u002Fp>\n\u003Cp>这就是Twitter卡片。\u003C\u002Fp>\n\u003Ch2>原理\u003C\u002Fh2>\n\u003Cp>Twitter卡片需要网站主动进行适配，Twitter会在适当的时候访问网址进行抓取，如果能抓取到指定的结构，就会显示成卡片。\u003C\u002Fp>\n\u003Cp>按照\u003Ca href=\"https:\u002F\u002Fdeveloper.twitter.com\u002Fen\u002Fdocs\u002Ftwitter-for-websites\u002Fcards\u002Fguides\u002Fgetting-started\">官方文档\u003C\u002Fa>，卡片可以有好几种类型：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>summary\u003C\u002Fcode> 图文摘要\u003C\u002Fli>\n\u003Cli>\u003Ccode>summary_large_image\u003C\u002Fcode> 大图展示的图文摘要\u003C\u002Fli>\n\u003Cli>\u003Ccode>app\u003C\u002Fcode> APP下载链接\u003C\u002Fli>\n\u003Cli>\u003Ccode>player\u003C\u002Fcode> 视频播放器\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>针对博客，比较适合的类型是\u003Ccode>summary\u003C\u002Fcode>，如果图片更重要的话，用\u003Ccode>summary_large_image\u003C\u002Fcode>也可以。\u003C\u002Fp>\n\u003Cp>具体而言，如果需要使用\u003Ccode>summary\u003C\u002Fcode>类型的卡片，需要在页面的\u003Ccode>head\u003C\u002Fcode>中放置以下标记：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><!--指定卡片类型-->\n<meta name="twitter:card" content="summary" \u002F>\n<!--可选：站点的twitter账号-->\n<meta name="twitter:site" content="@nytimesbits" \u002F>\n<!--可选：作者的twitter账号-->\n<meta name="twitter:creator" content="@nickbilton" \u002F>\n<!--文章URL-->\n<meta property="og:url" content="http:\u002F\u002Fbits.blogs.nytimes.com\u002F2011\u002F12\u002F08\u002Fa-twitter-for-my-sister\u002F" \u002F>\n<!--文章标题-->\n<meta property="og:title" content="A Twitter for My Sister" \u002F>\n<!--文章摘要-->\n<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." \u002F>\n<!--文章配图-->\n<meta property="og:image" content="http:\u002F\u002Fgraphics8.nytimes.com\u002Fimages\u002F2011\u002F12\u002F08\u002Ftechnology\u002Fbits-newtwitter\u002Fbits-newtwitter-tmagArticle.jpg" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>事实上下面这些\u003Ccode>og:\u003C\u002Fcode>开头的标签，使用Twitter专属的标签也可以生效。\u003C\u002Fp>\n\u003Cpre>\u003Ccode><meta name="twitter:title" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." \u002F>\n<meta name="twitter:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." \u002F>\n<meta name="twitter:image:src" content="http:\u002F\u002Fgraphics8.nytimes.com\u002Fimages\u002F2011\u002F12\u002F08\u002Ftechnology\u002Fbits-newtwitter\u002Fbits-newtwitter-tmagArticle.jpg" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>实战\u003C\u002Fh2>\n\u003Cp>在Hexo中，只需要修改一下模板，为文章页添加一下上述标记，并填上对应的内容即可（模板是jade\u002Fpug）：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>meta(name="description", content=desc)\nmeta(name="twitter:card", content="summary")\nmeta(name="twitter:creator", content="@TooooooBug")\nmeta(name="og:url", content=config.url + url_for(page.path))\nmeta(name="og:title", content=page.title)\nmeta(name="og:description", content=page.raw.replace(\u002F^[\\s\\S]*---\\n\\n\u002F, '').replace(\u002F\\s+\u002Fg, ' ').slice(0, 100), '')\n- var getPhoto = (raw) => {\n-   const regex = \u002F\\!\\[.*?\\]\\((.*?)\\)\u002F;\n-   const matches = regex.exec(raw);\n-   if (matches && matches[1]) return matches[1];\n-   return '\u002Flogo.png';\n- }\nmeta(name="og:image", content=config.url + getPhoto(page.raw))\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>中间加了一个\u003Ccode>getPhoto()\u003C\u002Fcode>方法，从原始的Markdown文本中解析出第一张图片的url，如果没有找到图片，则使用logo。\u003C\u002Fp>\n\u003Ch2>小结\u003C\u002Fh2>\n\u003Cp>挺简单的配置就能实现Twitter卡片，如果配置成功了，在发送推文的时候也可能会出现卡片预览。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fweb\u002F2022\u002Fadd-twitter-card-for-blog\u002F03.png\" alt=\"卡片预览\">\u003C\u002Fp>\n","\u003Ch2>什么是Twitter卡片\u003C\u002Fh2>\n\u003Cp>Twitter中可以引用各个网站的链接，如果网站不做特殊处理的话，在推文中只会显示一条普通的蓝色文字链接。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fweb\u002F2022\u002Fadd-twitter-card-for-blog\u002F01.png\" alt=\"普通链接\">\u003C\u002Fp>\n\u003Cp>但是我们时不时会看到一些引用的链接，在推文中有另外的表现，像这样：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fweb\u002F2022\u002Fadd-twitter-card-for-blog\u002F02.png\" alt=\"Twitter卡片\">\u003C\u002Fp>\n\u003Cp>这就是Twitter卡片。\u003C\u002Fp>\n\u003Ch2>原理\u003C\u002Fh2>\n\u003Cp>Twitter卡片需要网站主动进行适配，Twitter会在适当的时候访问网址进行抓取，如果能抓取到指定的结构，就会显示成卡片。\u003C\u002Fp>\n\u003Cp>按照\u003Ca href=\"https:\u002F\u002Fdeveloper.twitter.com\u002Fen\u002Fdocs\u002Ftwitter-for-websites\u002Fcards\u002Fguides\u002Fgetting-started\">官方文档\u003C\u002Fa>，卡片可以有好几种类型：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>summary\u003C\u002Fcode> 图文摘要\u003C\u002Fli>\n\u003Cli>\u003Ccode>summary_large_image\u003C\u002Fcode> 大图展示的图文摘要\u003C\u002Fli>\n\u003Cli>\u003Ccode>app\u003C\u002Fcode> APP下载链接\u003C\u002Fli>\n\u003Cli>\u003Ccode>player\u003C\u002Fcode> 视频播放器\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>针对博客，比较适合的类型是\u003Ccode>summary\u003C\u002Fcode>，如果图片更重要的话，用\u003Ccode>summary_large_image\u003C\u002Fcode>也可以。\u003C\u002Fp>\n\u003Cp>具体而言，如果需要使用\u003Ccode>summary\u003C\u002Fcode>类型的卡片，需要在页面的\u003Ccode>head\u003C\u002Fcode>中放置以下标记：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><!--指定卡片类型-->\n<meta name="twitter:card" content="summary" \u002F>\n<!--可选：站点的twitter账号-->\n<meta name="twitter:site" content="@nytimesbits" \u002F>\n<!--可选：作者的twitter账号-->\n<meta name="twitter:creator" content="@nickbilton" \u002F>\n<!--文章URL-->\n<meta property="og:url" content="http:\u002F\u002Fbits.blogs.nytimes.com\u002F2011\u002F12\u002F08\u002Fa-twitter-for-my-sister\u002F" \u002F>\n<!--文章标题-->\n<meta property="og:title" content="A Twitter for My Sister" \u002F>\n<!--文章摘要-->\n<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." \u002F>\n<!--文章配图-->\n<meta property="og:image" content="http:\u002F\u002Fgraphics8.nytimes.com\u002Fimages\u002F2011\u002F12\u002F08\u002Ftechnology\u002Fbits-newtwitter\u002Fbits-newtwitter-tmagArticle.jpg" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n","https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fweb\u002F2022\u002Fadd-twitter-card-for-blog\u002F01.png",{"total":21,"totalRoots":21,"comments":22,"pv":14},2,[23,31],{"id":24,"content":25,"user_id":26,"nick":27,"link":28,"date":29,"rid":14,"vote_up":14,"vote_down":14,"visible":30},157,"改版后又没有了……待修复……",76,"TooBug","https:\u002F\u002Fwww.toobug.net","2023-09-26 11:47:53",true,{"id":32,"content":33,"user_id":26,"nick":27,"link":28,"date":34,"rid":14,"vote_up":14,"vote_down":14,"visible":30},166,"To IP 来自香港，一直在尝试XSS的朋友：这里用的是一个成熟的评论系统的前端，一般不会留下低级XSS的漏洞。此外我本人开设过几年的web安全课程，XSS的防护方法闭着眼睛都能写。换个目标吧。","2025-10-11 10:33:32"]