gitblog4

TTyb · Feb 5, 2019 · 90dd03d · 90dd03d
1 parent dc305f6
commit 90dd03d
Show file tree

Hide file tree

Showing 8 changed files with 369 additions and 79 deletions.
diff --git a/_posts/gitblog/2019-02-05-4_编写博客.md b/_posts/gitblog/2019-02-05-4_编写博客.md
@@ -0,0 +1,183 @@
+---
+layout: post
+categories: [gitblog]
+title: 编写博客
+date: 2009-02-05
+author: TTyb
+desc: "4.编写博客"
+showdate: 2019-02-05
+---
+
+上一章节已经开发好了一个属于自己的网站，本章节将会涉及如果在网站里面配置博客模板和编写博客。
+
+# 编写博客
+
+在博客目录下新建一个命名为 `_posts` 的文件夹，`github` 默认博客是放在这个文件夹下的，`github` 会自动解析这个文件夹下的文件，其次再在 `_posts` 里面新建一个 `blogs` 文件夹，即新建一个 `blogs` 的博客分类。最后在 `blogs` 里面新建文件一个 `2019-02-05-firstblog.md` 文件，文件名的格式一定是：
+
+~~~ruby
+年-月-日-文件名.md
+~~~
+
+文件切记是 `以UTF-8无BOM格式编码` ，在文件里面添加如下内容：
+
+~~~ruby
+---
+layout: post
+categories: [blogs]
+title: firstblog
+date: 2019-02-05
+author: TTyb
+desc: "这是我的第一篇博客"
+---
+
+# 这是我的第一篇博客
+~~~
+
+博客的内容写完了，那么怎么展示呢？这里需要设置一个博客的入口 `topic` ，以方便显示博客，打开 `index.html` 将里面改成如下内容：
+
+~~~ruby
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <!-- Stylesheets -->
+    <link href=https://www.tybai.com/static/css/bootstrap.min.css rel="stylesheet"/>
+    <title>TTybTest</title>
+</head>
+<body>
+	<div class="navbar navbar-default navbar-fixed-top" style="background-color:rgba(255, 255, 255, 0.75);box-shadow:0 10px 10px 0 rgba(0, 0, 0, 0.15)">
+    <div class="container">
+        <div class="navbar-header">
+            <a class="navbar-brand brand" href="/">TTybTest|个人网站</a>
+        </div>
+        <div style="font-family: serif;text-decoration: none;" class="collapse navbar-collapse navbar-responsive-collapse" id = "target-menu">
+			<ul class="nav navbar-nav" style="margin: 0 0 0;">
+				<li><a class="navbar-brand" href="/topic">文章随笔</a></li>			
+			</ul>
+        </div>
+    </div>
+	</div>
+	我的个人博客
+</body>
+</html>
+~~~
+
+然后在当前目录打开 `cmd` 调出本地模式 `jekyll server` ，打开[http://127.0.0.1:4000/](http://127.0.0.1:4000/) 查看本地调试：
+
+<p style="text-align:center"><img src="/img/gitblog4/20190205115922.jpg" class="img-responsive" style="display: block; margin-right: auto; margin-left: auto;"></p>
+
+在当前目录下新建一个 `_layouts` 文件夹，里面新建一个 `default.html` 文件，里面填入如下内容：
+
+~~~ruby
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <!-- Stylesheets -->
+    <link href=https://www.tybai.com/static/css/bootstrap.min.css rel="stylesheet"/>
+    <title>TTybTest</title>
+</head>
+
+<body>
+    {{ content }}
+</body>
+</html>
+~~~
+
+最后在根目录下新建一个 `topic.html` 文件，用以放博客的页面，里面填入如下内容：
+
+~~~ruby
+---
+layout: default
+---
+<div>
+	{% for post in site.posts %}
+		<h3><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h3>
+	{% endfor %}
+</div>
+~~~
+
+可能很多读者会有点乱，目前我们博客的目录结构如下所示：
+
+~~~ruby
+--- TTybTest
+    .git
+    --- _layouts
+        default.html
+	--- _posts
+	    --- blogs
+		    2019-02-05-firstblog.md
+	.gitignore
+	index.html
+	README.md
+	topic.html
+~~~
+
+如果不清楚的可以按照如上目录以此建立文件和文件夹，并把相关的内容复制进去，最后打开[http://127.0.0.1:4000/](http://127.0.0.1:4000/) 查看本地调试，点击进入 `文章随笔` 可以看到如下内容：
+
+<p style="text-align:center"><img src="/img/gitblog4/20190205124148.jpg" class="img-responsive" style="display: block; margin-right: auto; margin-left: auto;"></p>
+
+点击 `firstblog` 进去，能看到之前写的博客 `2019-02-05-firstblog.md` :
+
+<p style="text-align:center"><img src="/img/gitblog4/20190205124349.jpg" class="img-responsive" style="display: block; margin-right: auto; margin-left: auto;"></p>
+
+这样子就算吧博客放到了专门放博客的 `_post` 文件夹里面了，这个文件夹是 `gitblog` 默认的放博客的文件夹，博客文本以 `.md` 结尾，以后的博客文本都会放到这里面。
+
+# 博客模板
+
+很多读者可能会注意，上文建立的 `_layouts` 文件夹和 `default.html` 是干什么，这个其实是博客的模板。可以注意到在 `index.html` 和 `topic.html` 文本里面都有这样的开头和结尾：
+
+~~~ruby
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <!-- Stylesheets -->
+    <link href=https://www.tybai.com/static/css/bootstrap.min.css rel="stylesheet"/>
+    <title>TTybTest</title>
+</head>
+
+<body>
+    ......
+</body>
+</html>
+~~~
+
+这个模板是为了防止过多写入重复的内容跟而造成累赘，因此我们可以注意到在 `topic` 里面加入了模板，即在文本内容的开头调用 `default` 模板：
+
+~~~ruby
+---
+layout: default
+---
+~~~
+
+而 `default` 里面的 `{{ content }}` 也就是套用模板后想要放入的内容。
+
+现在既然已经有了模板，那么可以把 `index.html` 里面的网页头部也调用模板信息，编辑打开 `index.html` 文件，加入模板后如下所示：
+
+~~~ruby
+---
+layout: default
+---
+
+<div class="navbar navbar-default navbar-fixed-top" style="background-color:rgba(255, 255, 255, 0.75);box-shadow:0 10px 10px 0 rgba(0, 0, 0, 0.15)">
+<div class="container">
+	<div class="navbar-header">
+		<a class="navbar-brand brand" href="/">TTybTest|个人网站</a>
+	</div>
+	<div style="font-family: serif;text-decoration: none;" class="collapse navbar-collapse navbar-responsive-collapse" id = "target-menu">
+		<ul class="nav navbar-nav" style="margin: 0 0 0;">
+			<li><a class="navbar-brand" href="/topic">文章随笔</a></li>			
+		</ul>
+	</div>
+</div>
+</div>
+我的个人博客
+~~~
+
+
+
+
+
+
+
diff --git a/code/2019-01-10-4_编写博客.md b/code/2019-01-10-4_编写博客.md