jekyll-theme-prologue, HTML5"Prologue" 主题的版本

分享于 

9分钟阅读

GitHub

  繁體 雙語
SinglePaged - Simple Jekyll template
  • 源代码名称:jekyll-theme-prologue
  • 源代码网址:http://www.github.com/chrisbobbe/jekyll-theme-prologue
  • jekyll-theme-prologue源代码文档
  • jekyll-theme-prologue源代码下载
  • Git URL:
    git://www.github.com/chrisbobbe/jekyll-theme-prologue.git
    Git Clone代码到本地:
    git clone http://www.github.com/chrisbobbe/jekyll-theme-prologue
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/chrisbobbe/jekyll-theme-prologue
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    - Jekyll主题

    Gem Version

    Prologue Theme

    到 up,这是一个简单的单页面响应网站模板,现在可以从 Chris Bobbe 中获得一个博客识别主题。 它的特点是简洁,简约,带有导航链接滚动的棘手侧边栏。

    演示: https://chrisbobbe.github.io/jekyll-theme-prologue/

    新增功能
    • Jekyll 的博客和多页面功能
    • 兼容GitHub页面
    • 向你的电子邮件地址添加你的电子邮件- 只需将你的邮件添加到 _config.yml
    • 在文件夹中创建带有收费的自定义scrolly节的网页
    • 为任何部分设置一个的封面图片,用alt文本为屏幕阅读器和搜索引擎优化
    • 在中轻松添加你的社会概要。
    • 自动搜索引擎优化( SEO ) 元标签基于你在 _config.yml 和frontmatter中提供的信息
    • 内置了 Google Analytics ;只需将你的音轨 ID_config.ymlgoogle_analytics
    • 自定义404页。
    安装

    有两种启动( 选择一个)的方法:

    接下来,确保 urlbase_url_config.yml 中为你自己的网站设置。 对于本地测试,使它们都为空白。 将照片头像添加到项目中,然后在 _config.yml; 中设置 avatar: path/to/your/avatar.jpg,例如 avatar: assets/images/avatar.jpg ( 48 x48像素效果最佳)。 查看 _config.yml 文件的poke,看看如何添加你的社交配置文件。

    构建你的主页

    你的文件必须包括以下行,否则你的主页将无法工作: collections: [sections]。这告诉on查看内容的_sections文件夹( 你将创建的) 并将它的全部呈现在一页上。

    在项目目录中创建一个 _sections 文件夹,并开始将内容添加到网页中。 通过添加 cover-photo: path/to/photo.jpg 和,在任何部分设置封面照片 cover-photo-alt: your alt text here 示例内容。示例内容在GitHub知识库中提供。

    所有新的部分都应该在 _sections 文件夹中添加为html或者 Markdown 文档。 可以使用 frontmatter 设置以下节变量:

    • title ( 必需)
    • order ( 必需;订购页面上的节序列。 示例:1 )
    • cover-photo ( 可选;为分区设置一个 background 图像。 示例:assets/images/banner.jpg )
    • cover-photo-alt ( 如果使用封面照片需要)。 描述屏幕阅读器和SEO的照片;比如"台湾高雄 Light dome")
    • icon ( 可选;请参见 icon 代码的Font Awesome。 示例:fa-github )
    • auto-header ( 可选;"使用无 header 或者自定义 header 文本的标题"是默认的"无"
    • hide ( 可选;如果为 true,则不显示该节)
    启动博客 !

    Jekyll拥有大量的资源让你开始写博客文章。 请先查看这个Jekyll文档页。 编写完一两个帖子后,将以下内容复制到项目目录中的新文件 blog.html,然后从主页看到你的博客链接:

    
    ---
    
    
    layout: blog
    
    
    title: My Blog
    
    
    ---
    
    
    
    

    --,就是这样 !

    添加页面

    要添加一个页面,只需在项目目录中创建一个新的. html 或者. md 文件。 有一个示例调用 reading-list提供了GitHub存储库。 添加这里 frontmatter:

    
    ---
    
    
    title: My New Page
    
    
    layout: page
    
    
    ---
    
    
    
    

    如果需要,还可以在frontmatter中设置这些页变量:

    • subtitle
    • order ( 导航菜单中的订单链接,比如 1 )
    • icon ( 可选;请参见 icon 代码的Font Awesome。 示例:fa-github )
    • hide ( 可选;如果为 true,则导航菜单中将不显示链接)。 所有这些都是移除导航链接;你的页面仍然会为有URL的任何人提供服务。

    index.mdblog.html 中也可以设置这个相同的frontmatter变量集合的1. 你可能想要给他们标题,或者如果主页是唯一的页面,就用 hide: true 隐藏首页链接。

    对于高级 SEO,这个主题还允许你将 permalink ( 请参见 Jekyll文档。)。robots ( 字符串,比如"noindex。nofollow") 和 canonical ( 布尔值;true 默认值) 添加到任何页面或者帖子中。

    请随时提交问题和功能请求 !

    Credits

    感谢 @andrewbanchich 对优雅的主题的适应性,帮助和激发了我,当然很多感谢 HTML5.

    来自HTML5的原始自述文件:

    
    Prologue by HTML5 UP
    
    
    html5up.net | @ajlkn
    
    
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
    
    
    
    This is Prologue, a simple, single page responsive site template. It features a
    
    
    clean, minimalistic design and a sticky sidebar with navigation-linked scrolling.
    
    
    
    Demo content images* are courtesy of the ridiculously talented Felicia Simion. Check out
    
    
    more of her amazing work over at deviantART:
    
    
    
    http://ineedchemicalx.deviantart.com/
    
    
    
    (* = Not included! Only meant for use with my own on-site demo, so please do NOT download
    
    
    and/or use any of Felicia's work without her explicit permission!)
    
    
    
    Demo banner images* courtesy of Unsplash, a radtastic collection of CC0 (public domain)
    
    
    images you can use for pretty much whatever.
    
    
    
    (* = Not included)
    
    
    
    AJ
    
    
    aj@lkn.io | @ajlkn
    
    
    
    PS: Not sure how to get that contact form working? Give formspree.io a try (it's awesome).
    
    
    
    Credits:
    
    
    
     Demo Images:
    
    
     Felicia Simion (ineedchemicalx.deviantart.com)
    
    
     Unsplash (unsplash.com)
    
    
    
     Icons:
    
    
     Font Awesome (fortawesome.github.com/Font-Awesome)
    
    
    
     Other
    
    
     jQuery (jquery.com)
    
    
     html5shiv.js (@afarkas @jdalton @jon_neal @rem)
    
    
     CSS3 Pie (css3pie.com)
    
    
     background-size polyfill (github.com/louisremi)
    
    
     Respond.js (j.mp/respondjs)
    
    
     jquery.scrolly (@ajlkn)
    
    
     jquery.scrollzer (@ajlkn)
    
    
     Skel (skel.io)
    
    
    
    

    theme  版本  Html5  Jekyll  
    相关文章