首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Jekyll页面上嵌入twitter feed?

在Jekyll页面上嵌入Twitter feed可以通过以下步骤实现:

  1. 首先,确保你已经创建了一个Twitter开发者账号,并且拥有一个应用程序的API密钥和访问令牌。
  2. 在Jekyll项目的根目录下,创建一个新的HTML文件,用于显示Twitter feed。可以命名为twitter.html
  3. twitter.html文件中,引入Twitter的JavaScript SDK。可以使用以下代码:
代码语言:html
复制
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  1. twitter.html文件中,创建一个容器元素,用于显示Twitter feed。可以使用以下代码:
代码语言:html
复制
<div id="twitter-feed"></div>
  1. twitter.html文件中,使用JavaScript代码初始化Twitter feed。可以使用以下代码:
代码语言:html
复制
<script>
    window.onload = function() {
        twttr.widgets.createTimeline(
            {
                sourceType: "profile",
                screenName: "YOUR_TWITTER_USERNAME"
            },
            document.getElementById("twitter-feed")
        );
    };
</script>

请将YOUR_TWITTER_USERNAME替换为你的Twitter用户名。

  1. 保存并关闭twitter.html文件。
  2. 在你的Jekyll页面中,使用Liquid标签来包含twitter.html文件。可以使用以下代码:
代码语言:txt
复制
{% include twitter.html %}
  1. 保存并关闭你的Jekyll页面。

现在,当你访问该Jekyll页面时,你将在页面上看到嵌入的Twitter feed。

注意:为了使Twitter feed正常显示,确保你的Jekyll项目已经正确配置了CSS和JavaScript文件的引入。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 个人免费博客花式搭建指南

    当然,还有另外一个原因,Github 的原生支持静态生成器就是 Jekyll,这也意味着 Github 上部署 Jekyll 更加方便。   ...当然,Jekyll 完全支持用户原有主题上进行更改,只要你了解文件是如何组织的、需要何种环境等等,你就可以做出自己的修改。...实际的使用过程中,笔者根据自己的需求也 H2O 主题上做出了一定的功能修改,并开源为 jekyll-them-H2O-ac。...12 # a tag will be recommended if the size of it is more than this value # Build settings # 文章列表展示每页显示的文章数量...插件 plugins: [jekyll-paginate, jekyll-feed, jemoji, jekyll-sitemap] # Netlify 设置选项,指定遵循的强制跳转规则 include

    1.8K40

    Jekyll 优化合集

    由于本站目前是采用 Jekyll 来搭建的,所以为了提供给读者更加高效的阅读条件,笔者廖柯杰大佬开发的 H2O 主题的基础上做了一些功能上的增加和优化,接下来就来详细介绍一下。...Prism 工具的安装使用相较其他两种稍微复杂一点,需要下载插件 prism.rb 手动安装到 _plugins 文件夹中,然后文章模板添加 prism.css 和 prism.js 的引入。...mkdir blog mv index.html blog/index.html cp search.json blog/search.json 添加页面模板   因为页面模板内容面上会被翻译导致无法正常显示...  归档其实是在上一个功能的基础上实现的,使用的也是同一个页面模板,只是内容稍有不同。...config.yml nav: home: '/' blog: '/blog/' archives: '/archives.html' tags: '/tags.html' RSS: '/feed.xml

    2.1K30

    用Github搭建个人博客

    jekyll templates中可以看到,是支持include的,只需要在根目录下创建一个名为_includes的目录,把页面片放到这个目录中,然后用下面的语法加载对应的页面片文件即可: {% include...高亮展示 对于代码的阅读体验,当然能高亮显示会更好些,jekyll也支持相应的代码高亮显示,像这样: {% highlight 代码类型 %} 代码放这里 {% endhighlight %} 支持的代码类型可以...的项目,下载你需要的RSS文件放到站点根目录下 3.然后页面的区加上RSS的即可,像 <link href='/<em>feed</em>.xml' rel='alternate' type='...评论系统 网上有几个可以<em>嵌入</em>到静态站点的评论系统,像多说、友言、畅言等等,还有<em>Jekyll</em>模板里默认使用的DISQUS。...-- 多说评论框 end --> 把上面的代码放到文章<em>页</em>模板的下面即可。

    73310

    博客主题用腻了?来试试赛博朋克 2077 主题吧!

    这里详细说一下 widgets,widgets 就是页面上的各个区域的挂件,可以通过配置灵活改变其位置和具体信息,根据喜好决定布局采用 3 栏还是 2 栏布局。...profile widgets:这块是用户信息模块,把相关信息改成你自己的就好啦,下面有一个 social_links,也可以自定义配置,如果没有 Twitter 和 FaceBook,可以把相关信息注释掉...Step 7 怎么样让文章两栏展示 目前文章仍然和首页一样,是三栏布局,为了有效利用空间,希望文章能够两栏布局。...GitBook、Gatsby、Hugo、Next.js、Jekyll 、WordPress、Drupal、Dumi。...其他的适合写博客的有 Gatsby、Hugo、Jekyll ,没深入使用过,先不做评价。

    43220

    如何将 Jekyll 部署到云开发静态网站托管

    项目根目录直接命令行运行 jekyll build 即可查看构建结果 ➜ blog git:(master) ✗ jekyll build Configuration file: /github...如果想在本地查看效果,项目根目录直接命令行运行 jekyll server 即可 ➜ blog git:(master) ✗ jekyll server Configuration file: /github...如下图,点击新建环境,然后弹框中输入你自定义的环境名称,选择付费模式,然后点击下方的「立即开通」。 qcloud_jekyll_evn.png 之后就进入了环境的初始化阶段,初始化比较久。...静态网站服初始化一般需要约 3 分钟 qcloud_jekyll_hosting.png 将静态页面部署到托管服务 你阔以直接选择将构建好的静态页面上传到托管服务,但是考虑到博客的更新频率,还是选择使用官方提供的工具来上传...如果你有自己的域名,你也可以添加自己的域名解析,例如下面我修改为使用我自己的域名,并设置了自定义的索引和404面: Zkyx39SOCYgHimv.png 访问静态页面 浏览器输入讯云提供的默认域名

    3.6K105

    Github搭建个人博客(2019最新版,亲测)

    现在上几张成果图,呵呵,使用的轮子真高(滑稽.gif): (二) 关于我的博客 (1)Home: (2) 分类与标签: (3)单个文章的编辑日期,作者,分类,标签,查看更多...(4)顶部Tab栏 (5)底部分页,访客量统计,回到顶部按钮 (6)博客详情 以上就是整个博客的页面,其实这个博客也是后来发现的,一位比较低调的阿里前端哥哥撸出来的,且一直维护中的...# the base hostname & protocol for your site permalink: /:year/:month/:day/:title/ # other links twitter_username...(2)使用Jekyll修改静态博客 请详细跟这篇教程走: Jekyll 搭建静态博客 请务必走完,因为上面这博客讲的很清楚,很详细,环境搭建好,剩下的就简单了。...微信后台回复「130个小程序」,即可免费领取享有导入就能跑的微信小程序 微信后台回复「Flutter移动电商」,即可免费领取Flutter移动电商系列全套 发布者:全栈程序员栈长,转载请注明出处

    66820

    如何在Ubuntu 16.04上建立一个Jekyll开发网站

    添加新帖子和页面时,使用现有结构并遵循Jekyll的命名约定非常重要。 提示: tree是查看文件和目录结构的一个非常有用的命令。...如果您正在使用本地计算机,则可以 没有主机设置的情况下运行jekyll serve并连接http://localhost:4000。...│ └── index.html ├── assets │ ├── main.css │ └── minima-social-icons.svg ├── feed.xml...您可以Jekyll网站上了解有关此实验性功能的更多信息。 该网站现已上线。...Web浏览器中,我们可以jekyll serve输出中显示的服务器地址和端口访问它: 结论 本教程中,我们安装了Jekyll并创建了一个包含一些自动生成内容的开发站点。

    1.6K71

    如何在Ubuntu 16.04上建立一个Jekyll开发网站

    添加新帖子和页面时,使用现有结构并遵循Jekyll的命名约定非常重要。 提示: tree是查看文件和目录结构的一个非常有用的命令。...如果您正在使用本地计算机,则可以 没有主机设置的情况下运行jekyll serve并连接http://localhost:4000。...│ └── index.html ├── assets │ ├── main.css │ └── minima-social-icons.svg ├── feed.xml...您可以Jekyll网站上了解有关此实验性功能的更多信息。 该网站现已上线。...Web浏览器中,我们可以jekyll serve输出中显示的服务器地址和端口访问它: 结论 本教程中,我们安装了Jekyll并创建了一个包含一些自动生成内容的开发站点。

    1.4K31

    如何在Windows平台上基于github搭建个人博客平台

    本文将介绍Windows平台上搭建基于github pages 的个人博客网站的过程,以及利用Jekyll进行本地博客调试的过程,对于不懂前端的人来说是一个比较基础的入门教程。...之前CSDN上写过一些博客,但是许久不更新就懒得再管了。...市面上有很多支持Markdown语法的代码编辑器可选,例如vscode,sublime text,atom等等。...而且typora本身支持内嵌LaTex数学公式,本人试过,几乎所有的公式都可以嵌入,而且支持公式的自动编号,可以作为平时快速写作的一个高效编辑器。...选择自己喜欢的主题 用户也可以自行选择其他主题,jekyll主题官网 上有很多开源的主题,可以选择自己喜欢的,也可以自行搜索jekyll主题,网上有不少开源的主题,选择自己喜欢的即可。 3.

    83950

    Allens Blogs 创建历程(1)

    └── index.html 该目录下执行: $ jekyll server // 简写 jekyll s 浏览器地址栏中输入:http://localhost:4000/ 就可以看到刚才新建的...开始写作 Jekyll 博客的配置全 Blogs 根目录的_config.yml文件中,一般来说,只要没有什么特殊的需求,只需要修改诸如:博客名、所有者名字、email等信息即可,如果有更多的需求,请参考所用主题的说明和...20baseurl: /domain_name: 'http://allenn.cn/'google_analytics: 'UA-XXXXXXXX-X'# Details for the RSS feed...按照 Jekyll 的规范,文章是放在_posts目录下的,并且需要以时间戳开头,比如:2007-10-29-why-every-programmer-should-play-nethack.md,文章的开头...---layout: posttitle: "多线程构建场景下Powermockito无法不同类中Mock同一个静态方法"date: 2015-10-14 13:50:39comments:

    73610

    巧用 Redis,实现微博 Feed 流功能!

    Feed流:持续更新并呈现给用户内容的信息流。每个人的朋友圈,微博关注等等都是一个 Feed 流。...Feed 流初始化 Feed 流【关注 Feed 流】的初始化指的是,当用户的 Feed 流还不存在的时候,为该用户创建一个属于他自己的关注 Feed 流,具体怎么做呢?...这里面有几个关键点: 插播一条,如果你近期准备面试跳槽,建议ddkk.com在线刷题,涵盖 1万+ 道 Java 面试题,几乎覆盖了所有主流技术面试题,还有市面上最全的技术栈500套,精品系列教程,免费提供...因为处理 大V 【千万级别粉丝】的时候,我们是需要对 大V 的所有粉丝的 feed 流进行处理的,这时候涉及到的量就会非常巨大,需要多加斟酌。关于推送,一般有两种 推/拉。...流系统,下面介绍一下具体的实现代码,主要包括3大个部分: 插播一条,如果你近期准备面试跳槽,建议ddkk.com在线刷题,涵盖 1万+ 道 Java 面试题,几乎覆盖了所有主流技术面试题,还有市面上最全的技术栈

    49710
    领券