Jekyll模板,感觉 - 响应导入图像

时间:2017-11-28 15:55:48

标签: jekyll webpage github-pages

我正在使用Jekyll“Feeling-Responsive”主题(https://github.com/Phlow/feeling-responsive)作为我的github页面。我希望在首页上包含我自己的.jpg图像以显示小部件,因此我在index.md中使用我的图像名称编辑了相应的“图像”字段,但没有图像显示该小部件,而另一个小部件仍然显示其库存图像。不知道如何进行,任何帮助将不胜感激。

这是我的index.md文件,我已经更改了widget1的图像字段。

layout: frontpage
header:
  image_fullwidth: header_unsplash_12.jpg

widget1:
  title: "Portfolio"
  url: 'http://phlow.github.io/feeling-responsive/blog/'
  text: 'Some of my past and current work (under construction)'
  image: figure__atom.jpg 
  <!-- image: widget-1-302x182.jpg -->

widget2:
  title: "Why use this theme?"
  url: 'http://phlow.github.io/feeling-responsive/info/'
  text: '<em>Feeling Responsive</em> is heavily customizable.<br/>1. Language-Support :)<br/>2. Optimized for speed and it&#39;s responsive.<br/>3. Built on <a href="http://foundation.zurb.com/">Foundation Framework</a>.<br/>4. Seven different Headers.<br/>5. Customizable navigation, footer,...'
  video: '<a href="#" data-reveal-id="videoModal"><img src="http://phlow.github.io/feeling-responsive/images/start-video-feeling-responsive-302x182.jpg" width="302" height="182" alt=""/></a>'

widget3:
  title: "Download Theme"
  url: 'https://github.com/Phlow/feeling-responsive'
  image: widget-github-303x182.jpg
  text: '<em>Feeling Responsive</em> is free and licensed under a MIT License. Make it your own and start building. Grab the <a href="https://github.com/Phlow/feeling-responsive/tree/bare-bones-version">Bare-Bones-Version</a> for a fresh start or learn how to use it with the <a href="https://github.com/Phlow/feeling-responsive/tree/gh-pages">education-version</a> with sample posts and images. Then tell me via Twitter <a href="http://twitter.com/phlow">@phlow</a>.'
#
# Use the call for action to show a button on the frontpage
#
# To make internal links, just use a permalink like this
# url: /getting-started/
#
# To style the button in different colors, use no value
# to use the main color or success, alert or secondary.
# To change colors see sass/_01_settings_colors.scss
#
callforaction:
  url: https://tinyletter.com/feeling-responsive
  text: Inform me about new updates and features ›
  style: alert
permalink: /index.html
#
# This is a nasty hack to make the navigation highlight
# this page as active in the topbar navigation
#
homepage: true
---

<div id="videoModal" class="reveal-modal large" data-reveal="">
  <div class="flex-video widescreen vimeo" style="display: block;">
    <iframe width="1280" height="720" src="https://www.youtube.com/embed/3b5zCFSmVvU" frameborder="0" allowfullscreen></iframe>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div>

1 个答案:

答案 0 :(得分:0)

您应使用图片目录的参数“ urlimg:”编辑_config.yml文件