演示网站现在在IPF中镜像!
由Artem Sheludko基于V1.0的Armando Maynez。
Adam Blog 2.0是一个Jekyll主题,该主题与GitHub页面100%兼容。如果您不熟悉GitHub页面,则可以查看其文档以获取更多信息。乔纳森·麦格隆(Jonathan McGlone)在Github上创建和托管个人网站的指南也是一个很好的资源。
Jekyll是一个简单的博客意识,静态网站生成器,用于个人,项目或组织网站。基本上,Jekyll将您的页面内容与模板文件一起使用,并生成一个完整的网站。有关更多信息,请访问官方Jekyll网站以获取其文档。 Codecademy还提供了有关如何为完整初学者部署Jekyll网站的出色课程。
在Github上托管您的网站的优点在于,您不必在计算机上实际安装了Jekyll。一切都可以通过GitHub代码编辑器来完成,并且了解如何使用Jekyll或命令行的知识。您所要做的就是将帖子添加到_posts目录中,然后编辑_config.yml文件以更改站点设置。有了一些关于HTML和CSS的基本知识,您甚至可以将网站修改为自己喜欢的。这一切都可以通过GITHUB代码编辑器来完成,该编辑器的作用像内容管理系统(CMS)。
<tweet> </tweet>标签即可。检查主题中的主题
主页看起来像这样:

主菜单中的深色模式选择器:

帖子页面看起来像:


自定义响应404:

黑暗模式看起来像这样:



有关Adam Blog 2.0的完整本地安装,请下载您自己的Adam Blog 2.0副本,然后将其解压缩到自己的目录中。从那里,打开您喜欢的命令行工具,输入bundle install ,然后输入jekyll serve 。您的网站应在http:// localhost:4000的本地启动并在本地运行。
如果您是Jekyll的新手,建议您在https://jekyllrb.com/上查看文档,或者有Smashing Magazine的教程。
如果您在GitHub页面上托管您的网站,则将更改对_config.yml文件(或任何其他文件)进行更改将迫使您与Jekyll进行重建。任何更改都应在不久之后可见。如果您在本地托管您的网站,则必须再次运行jekyll serve以进行更改。
前往_posts目录,查看网站上当前的所有帖子,并查看帖子文件通常是什么样子的示例。您只需复制模板帖子,然后开始添加自己的内容。
将此存储库分配到您自己的帐户中。
您可以免费使用GitHub页面免费托管Jekyll网站。单击此处以获取更多信息。
当分叉时,如果您用作目的地的一个名为USERNAME.github.io的存储库,则您的URL将为https://USERNAME.github.io/ https://USERNAME.github.io/REPONAME/ ),您的网站将发布给GH-PAGES分支。注意:如果要在同一github用户名下托管多个站点,那么您将必须使用项目页面而不是用户页面 - 只需将存储库名称更改为'http://username.github.io'之外的其他内容。
除了您的github-username.github.io repo映射到root URL之外,您还可以通过为其他存储库使用gh-pages分支来提供站点,以便在github-username.github.io/repo-name上找到它们。
这将要求您像这样修改_config.yml :
# Site settings
title : Repo Name
email : [email protected]
author : Your Name
description : " Repo description "
baseurl : " /repo-name "
url : " https://github-username.github.io "这将确保为您的资产和职位构建正确的相对路径。
使用您的数据,位于根目录中的Modify _config.yml文件。
# Site settings
title : The Title for Your Website
description : ' A description of your blog '
permalink : ' :title:output_ext ' # how the permalinks will behave
baseurl : " / " # the subpath of your site, e.g. /blog
url : " " # the base hostname & protocol for your site, e.g. http://example.com
logo : " " # the logo for your site
logo-icon : " " # a smaller logo, typically squared
logo-icon-SEO : " " # must be a non SVG file, could be the same as the logo-icon
# Night/Dark mode default mode is "auto", "auto" is for auto nightshift (19:00 - 07:00), "manual" is for manual toggle, and "on/off" is for default on/off. Whatever the user's choice is, it will supersede the default setting of the site and be kept during the visit (session). Only the dark mode setting is "manual", it will be always kept on every visit (i.e. no matter the browser is closed or not)
night_mode : " auto "
logo-dark : " /assets/img/branding/MVM-logo-full-dark.svg " # if you want to display a different logo when in dark mode
highlight_theme : syntax-base16.monokai.dark # select a dark theme for the code highlighter if needed
# Author settings
author : Your Name # add your name
author-pic : ' ' # a picture of you
about-author : ' ' # a brief description of you
# Contact links
email : [email protected] # Add your Email address
phone : # Add your Phone number
website : # Add your website
linkedin : # Add your Linkedin handle
github : # Add your Github handle
twitter : # Add your Twitter handle
bandcamp : # Add your Bandcamp username
# Tracker
analytics : # Google Analytics tag ID
fbadmin : # Facebook ID admin
# Paginate
paginate : 6 # number of items to show in the main page
paginate_path : ' page:num '
words_per_minute : 200 # default words per minute to be considered when calculating the read time of the blog posts要配置新闻通讯,请在https://mailchimp.com中创建一个帐户,设置Web注册表单,然后从config.yml文件中的嵌入式注册表粘贴链接:
# Newsletter
mailchimp : " https://github.us1.list-manage.com/subscribe/post?u=8ece198b3eb260e6838461a60&id=397d90b5f4 "要配置DISQU,请设置一个与您的网站相同名称的DISQUS网站。然后,在_config.yml中,编辑disqus_identifier值以启用。
# Disqus
discus_identifier : # Add your discus identifier
comments_curtain : yes # leave empty to show the disqus embed directly有关如何设置Disqus的更多信息。
自定义网站颜色。 modify /assets/css/main.css main.css如下:
html {
--shadow : rgba ( 32 , 30 , 30 , .3 );
--accent : # DB504A ; /* accent */
--accent-dark : # 4e3e51 ; /* accent 2 (dark) */
--main : # 326273 ; /* main color */
--main-dim : # 879dab ; /* dimmed version of main color */
--text : # 201E1E ;
--grey1 : # 5F5E58 ;
--grey2 : # 8D897C ;
--grey3 : # B4B3A7 ;
--grey4 : # DAD7D2 ;
--grey5 : # F0EFED ;
--background : # ffffff ;
}
html [ data-theme = "dark" ] {
--accent : # d14c47 ; /* accent */
--accent-dark : # CD8A7A ; /* accent 2 (dark) */
--main : # 4C6567 ; /* main color */
--main-dim : # 273335 ; /* dimmed version of main color */
--text : # B4B3A7 ;
--grey1 : # 8D897C ;
--grey2 : # 827F73 ;
--grey3 : # 76746A ;
--grey4 : # 66645D ;
--grey5 : # 4A4945 ;
--background : # 201E1E ;
--shadow : rgba ( 180 , 179 , 167 , .3 );
}自定义站点字体。 modify /assets/css/main.css main.css如下:
...
--font1 : 'Lora' , charter , Georgia , Cambria , 'Times New Roman' , Times , serif ; /* body text */
- - font2 : 'Source Sans Pro' , 'Helvetica Neue' , Helvetica , Arial , sans-serif ; /* headers and titles */
- - font1 - light : 400;
- - font1 - regular : 400;
- - font1 - bold : 600;
- - font2 - light : 200;
- - font2 - regular : 400;
- - font2 - bold : 700;
...如果更改字体,则还需要修改/_includes/head.html如下:不使用新字体和字体权重:不按下来和更改以下行:
< link href =" https://fonts.googleapis.com/css?family=Lora:400,600|Source+Sans+Pro:200,400,700 " rel =" stylesheet " >在上面的行之前删除<style></style>中的所有内容:
< style >
/* latin */
@font-face {
font-family: 'Lora';
...
</ style >您会在/_posts/ Directory中找到示例帖子。继续编辑任何帖子并重新构建网站以查看您的更改,对于GitHub页面,每次提交都会自动发生这种情况。您可以以多种不同的方式重建网站,但是最常见的方法是运行jekyll serve ,该服务可以在更新文件时启动Web服务器并自动将您的网站自动再生。
要添加新帖子,只需在_posts YYYY-MM-DD-name-of-post.md约定中添加一个文件,并包含必要的前提。查看任何示例帖子,以了解其工作原理。如果您已经有一个使用Jekyll构建的网站,只需复制您的帖子即可迁移到Adam Blog 2.0。
每个帖子的前提选择是:
---
layout : post # ensure this one stays like this
read_time : true # calculate and show read time based on number of words
show_date : true # show the date of the post
title : Your Blog Post Title
date : XXXX-XX-XX XX:XX:XX XXXX
description : " The description of your blog post "
img : # the path for the hero image, from the image folder (if the image is directly on the image folder, just the filename is needed)
tags : [tags, of, your, post]
author : Your Name
github : username/reponame/ # set this to show a github button on the post
toc : yes # leave empty or erase for no table of contents
---使用Markdown编辑您的博客文章。这是有关如何使用它的好指南。
删除/assets/img/posts/ of to张贴的图像中的图像。
确保在存储库设置中打开github页面,并指向主分支或主分支(在此克隆此存储库)。
如果您熟悉Jekyll,那么Adam Blog 2.0目录结构不应该太难导航。您可能会注意到默认目录结构之间的差异的一些亮点。有关这些文件夹和文件的更多信息,请参见Jekyll文档网站。
Adam Blog 2.0/
├── _includes # Theme includes
├── _layouts # Theme layouts (see below for details)
├── _posts # Where all your posts will go
├── assets # Style sheets and images are found here
| ├── css # Style sheets go here
| | └── _sass # Folder containing SCSS files
| | └── main.css # Main SCSS file
| | └── highlighter # Style sheet for code syntax highlighting
| └── img #
| └── posts # Images go here
├── _pages # Website pages (that are not posts)
├── _config.yml # Site settings
├── Gemfile # Ruby Gemfile for managing Jekyll plugins
├── index.html # Home page
├── LICENSE.md # License for this theme
├── README.md # Includes all of the documentation for this theme
├── feed.xml # Generates atom file which Jekyll points to
├── 404.html # custom and responsive 404 page
├── all-posts.json # database of all posts used for infinite scroll
├── ipfs-404.html # 404 page for IPFS
├── posts-by-tag.json # database of posts by tag
├── robots.txt # SEO crawlers exclusion file
├── search.json # database of posts used for search
└── sitemap.xml # automatically generated sitemap for search engines要完全从头开始,只需删除_posts , assets/img/posts文件夹中的所有文件,然后添加您自己的内容。 _config.yml文件中的所有内容都可以编辑以满足您的需求。还将favicon.ico文件更改为您自己的favicon。
如果您的博客文章中有可推文报价,并希望将其作为单击“推文”块中的单击,则只需使用<tweet></tweet>标签,它们之间的所有内容都将在单击中转换为Tweet Box。


可以通过Google Analytics(分析)跟踪您的网站统计信息。与DISQUS类似,您必须为Google Analytics(分析)创建一个帐户,并在_config.yml文件中的google-ID下为您的网站输入正确的Google ID。有关如何设置Google Analytics(分析)的更多信息。
默认情况下,通过Jekyll-Feed支持原子。使用jekyll feed,您可以在_config.yml文件中设置诸如“标题”,“描述”和“作者”之类的配置变量。
您的原子供稿文件将在https://your.site/feed.xml示例上进行。
所有社交媒体偶像都归功于字体很棒。您可以在_config.yml文件中更改出现的图标以及它们链接到的帐户。
Adam Blog 2.0与MathJax开箱即用,这使您可以通过使用乳胶在帖子中显示数学方程式。只需添加Mathjax: yes在您的帖子的前磨牙中。
< p style = " text-align : center " >
( theta _ {t+1} = theta _ {t} - dfrac{eta}{sqrt{hat{v} _ t} + epsilon} hat{m} _ t ) .
</ p >
Adam Blog 2.0通过围栏代码块提供语法突出显示。语法突出显示允许您根据显示哪种编程语言以不同的颜色和字体显示源代码。您可以在此处找到支持的编程语言的完整列表。另一个选择是通过GIST嵌入您的代码。
您可以在_config.yml文件中选择语法亮点的颜色主题:
highlight_theme : syntax-base16.monokai.dark # select a theme for the code highlighter有关选项的参考,请参见Highlighter目录。
Jekyll提供了对GitHub风味的Markdown的支持,这使您可以使用Markdown语法格式化帖子。
查看Jekyll文档,以获取有关如何充分利用Jekyll的更多信息。在Jekyll的GitHub repo中提交所有错误/功能请求。如果您有疑问,可以在Jekyll Talk上询问他们。
如果您想提出功能请求,或在文档中报告错误或错字,请提交GitHub问题。如果您想做出贡献,请随时提交拉动请求 - 作为奖励,我将在下面归功于所有贡献者!如果这是您的第一个拉动请求,则首先阅读GitHub流程可能会有所帮助。
Adam Blog 2.0被设计为用户自定义和满足自己独特需求的基础。请求功能和/或提交拉的请求时,请记住这一点。我想看到的一些变化的例子是使网站更容易使用或更好地做事的事物。请避免更改不会使大多数用户受益。
该主题是完全免费的开源软件。您可以根据需要使用它,因为它是根据MIT许可证分发的。如果您有任何问题,任何问题或建议,请随时提出GitHub问题。