给妹妹写的做网站指导

超详细的!

Posted by Alex on October 19, 2019

喵酱!喵酱!

1.这是网站的基本介绍

文件页现在可以直接在你的主页最下方点击star进入了!

KnNj7n.png

其实你只会遇到这些:

(1)_posts文件夹里存放你的文章

(2)img文件夹里存放网站背景中使用的图片

(3)_config.yml是你的基本信息

(4)index.html是主页的配置

(5)tags.html是标签归档页的配置

(6)404.html是404页面(当别人访问到了网站的一个不存在的角落时,显示的网页)

(7)README.md是显示在文件页最下方的文字

Okay!

2.这是网页中一些文字编辑的方法

(1)主页

这一段内容在_config.yml里,你可以自己编辑:

title: Rachel Blog #主页上最大的标题
SEOTitle: 喵酱小屋 | cat Jiang Blog #浏览器上面显示的标题
header-img: img/post-new-background.jpg #这是主页背景,怎么改下面再说
email: 2380087797@qq.com #你的邮箱地址,手机网页不显示,电脑显示在一方的头像下面
description: "Give me some lollypop(゜o゜)" #主页的副标题

对照着网页可以看到各部分文字的位置!比如,你可以改成:

title: A CAT NEARLY KILLED BY MATH
SEOTitle: 喵酱小屋 | miao House
header-img: img/post-new-background.jpg
email: 我也不知道我的邮箱@mail.com
description: "Whoever can save me!"

侧边栏(电脑页面上右侧显示的)

# Sidebar settings
sidebar: true             #决定开启不开启侧边栏(开着美观些...吧)
sidebar-about-description: "嘤嘤嘤"   #大爷下面显示的内容,还是改改吧
sidebar-avatar: /img/pg-accelerator-2.jpg      #侧边栏图片,现在是大爷

这是你的社交网站链接:(这一段在#SNS Settings后)

# weibo_username:     none  #新浪微博帐号
zhihu_username:     alex1219-35  #知乎帐号

微博的地址被我注释掉了(编程里往往“#”后面的代码不执行,叫做“注释”;在一段代码前添加“#”就称为“注释掉”)

还有这里要说一下知乎的帐号,坑人得很!这并不是你的知乎昵称,而是你在知乎网页版里面点击“我的主页”,网址的内容!比如我的知乎昵称是Alexander,但是“我的主页”的网址却是 所以我的实际帐号便是alex1219-35!如果你有微博帐号,只需要去掉注释后填入即可:

weibo_username:     none
zhihu_username:     alex1219-35

如果上面有隐私信息,还是不填为好…

然后这是主页底部(或者侧边栏上)展示的友链:

# Friends
friends: [
    {
        title: "哥哥嗒",
        href: "https://alexander-huang.github.io"
    }
]

所以我们是朋友吧(大雾

添加的时候这样:

# Friends
friends: [
    {
        title: "哥哥嗒",
        href: "https://alexander-huang.github.io"
    },{
        title: "友A",
        href: "(友A的网址)"
    },{
        title: "友B",
        href: "(友B的网址)"
    },{
        title: "友C",
        href: "(友C的网址)"
    },{
        title: "友D",
        href: "(友D的网址)"
    }
]

以此类推就行了!

改完之后就可以保存了。有时候因为网站刷新的原因,”commit changes”是灰色的,点不下去(尤其是手机上经常如此)。可以把这个:

  • Commit directly to the master branch.

  • Create a new branch for this commit and start a pull request.

先选到第二个再选回第一个,就可以保存了!

(2)Tags

实际能改的就只有tags.html中的这段:

---
title: Tags  #标题。没改过。
layout: default #样式。不改。
description: I think therefore I am. #Tags标题下面显示的一句话,可以乱改。
header-img: "img/ai-universe.jpg" #标题的背景图片
---

(3)关于 about

修改的是about .html(好了不解释了)

---
layout: page
title: "About"
description: "hi,I'm Rachel,nice to meet you!"
header-img: "img/ai-city-bluegreen.jpg"
---

然后下面这一段,正文

<blockquote><p>Where there is a will,<br>
    there is a way.</p></blockquote>

    <p>Hey,我是<strong>Rachel</strong>,一只理科不好的初三狗</p>

    <p>闲下来,习惯性写文。当然,文笔一般(但别人都说很好,不知道为什么...)</p>

    <p>这是我利用 哥哥的<a href="https://github.com/Alexander-Huang/Alexander-Huang.github.io/">Repo</a> 搭建的主页。</p>

    <p></p>

这个blockquote啊,就是正文开头显示的格言。比如你可以改成:

<blockquote><p>我绝不是为了故意针对谁,<br>
    我只想说,在坐的各位都是垃圾。</p></blockquote>

正文这一段,其实也很简单:只要你新建一段,就换行,按tab键(或者多按两下空格)添加一个<p>(英文字符!!!!!!),末尾再添加一个</p>

	<p>Hey,我是<strong>Rachel</strong>,一只理科不好的初三狗</p>

    <p>闲下来,习惯性写文。当然,文笔一般(但别人都说很好,不知道为什么...)</p>

    <p>这是我利用 哥哥的<a href="https://github.com/Alexander-Huang/Alexander-Huang.github.io/">Repo</a> 搭建的主页。</p>
    
    <p>这是新的一段</p>
    
    <p>这又是新的一段</p>
    
    <p>sorry,新建段落就是可以猥琐欲为!</p>

大佬们瞧见了,肯定要问我为什么空行。个人爱好。

<a href="https://github.com/Alexander-Huang/Alexander-Huang.github.io/">Repo</a>

这一段是链接的意思。

<a href="(网站的链接)">(链接的标题)</a>

比如你要放个百度的链接

<a href="https://www.baidu.com/">某度</a>

好了,又讲完咯,开心!

3.这是你期待已久的发文!

emmm,这个网页的文章是用markdown写的。(你问我markdown是啥,程序员的快乐你不懂~)

顺便插一句,markdown能够提供丰富的格式。这里已经有了很详细的教程链接。但是首先,你得有一个支持markdown的编辑器!在电脑上可以用typora,手机上可以用纯纯写作(要开启MD!,保存时选另存为即可)。

在写好你的文章后,你还需要:注明你的标题,副标题,时间,作者等信息。

---




layout:     post   				    # 使用的布局(不需要改)
title:      百度搜索替换方案(1) 				# 标题 
subtitle:   一些纯净的小众搜索引擎推荐 #副标题
date:       2019-08-15 				# 时间
author:     Alex 						# 作者
header-img: img/ai-sundial.jpg 	#这篇文章标题背景图片
catalog: true 						# 是否归档,写true就行
tags:								#标签
    - 生活
    - Notes
---

你可以把这一段复制下来,专门存一个文档,以后每次只需要复制过来就行了。

这里提一下tags,这个tags就是刚才那个tags,是你给文章加的标签。比如你写了一篇议论性散文,你可以这样:

tags:					
    - 议论
    - 散文

当然,你也可以按照自己的喜好来设置。比如:

---




layout:     post   				 
title:      浮生戏		
subtitle:   人生一生一出戏,一点绛唇笑空秋。 
date:       2019-08-20 		
author:     Rachel 				
header-img: img/ai-sundial.jpg 	
catalog: true 						
tags:				
    - 生活
    - 哲思
    - 抒情
---

就可以啦!保存的时候,文件名需要把时间写在标题的前面,比如上面那个就应该保存为:

2019-08-20-浮生戏.md

有的编辑器保存时会自动补全“.md”的后缀,Windows系统是默认不显示后缀的,所以注意不要写重了哦!

纯纯写作中,你只要在标题中写“2019-08-20-浮生戏”就行,保存时会自动加上md的!同时,它会告诉你保存到了哪儿,记得留意一下。

现在开始上传了!手机上先进入网站的文件页(github项目地址,有“正在建设中”的那一页)

进入_posts文件夹,选择文件列表上方的“Upload Files”(手机上需要先在网页下方点击desktop version,然后才看得到电脑视图)。如果在电脑上,只需要把文件拖拽入网站就行,或者点击“choose your files”来选择。手机上点开choose your files后,会”选择操作“,用“文件”之类的程序打开,如果你没有看见目录,试试从左边缘向右滑打开菜单,看看有没有“文件管理”或者压缩包管理之类的软件,如果有的话,点进去,按照目录选择你的文件即可!(沙雕网友就不要看了,我相信你们都会。)

好吧。。。如果行的话还是在电脑上做吧(明明超级简单的)

耐心等待上传完成,commit changes就保存了。你可以去你的主页刷新一下,如果顺利的话,多刷新几次就出现了。

4.换图片!添图片!

emmm,首先我得跟你普及两个东西。

第一个叫做“图片在线压缩”,即把图片的文件大小变小一些,让看网页的人舒心一些,不至于等了很久都加载不出来。这种网站在百度上一搜一大堆,比如压缩图啊,图好快之类的,一点也不难找。

一般来说,网站上用的图片大小最好不超过300kb。

第二个叫做“图床”,因为网页本身和markdown的文章本身是不包含图片文件的,一般是直接丢一个图片的链接在那儿,在打开时自动加载。这种网站还是一搜一大堆,我现在用的就是路过图床

以路过图床为例,在上传完成后,在“图片链接代码”里选择“markdown详细信息”,把下面的代码粘贴到你的markdown文档里面,图片就有了。

主页背景,文章背景是不需要图床生成链接的,只需要命一个适当的名字,丢进img文件夹就行。.png和.jpg格式的图片应该都是支持的。其他的格式要上传,可以先百度一下”XXX格式转jpg”。由于操作有点繁琐,推荐在电脑上完成。

之前我们在很多地方看到了img/XXX.jpg,现在你可以用自己上传的图片来换了。比如你的图片是railgun.jpg,你就可以

img/railgun.jpg

啊,终于,讲完了。

结尾

上上上前天我跟生物老师聊天的时候,谈到为什么现在普遍女生的成绩不如男生,他提到了一点:女生很难有自己觉得很酷、很值得炫耀、很值得留恋的东西,因此在创新上胆量不足,思维也较局限。

也许是这样的吧。

尝试一下自己未接触到的东西,未尝不是一种成长呢?

做一个网站有很多好处。你可以在这里畅所欲言,表达自己,在这里,你完全可以掌握发言权;也可以把这个作为自己的一张名片,让别人更全面地了解自己。也可以作为自己的一本日记,在数十年后回望,依然如新。

沙雕网友:这是我给妹妹写的,可能有语言上不准确的地方,或者说了不少废话,望谅解。