Warning: Illegal string offset 'download' in /www/wwwroot/www.oilcn.net.cn/wp-content/themes/wpzt-hot/template-parts/single/single-pc.php on line 4

个人网站源码下载后怎么安装(个人商城网站源码)

22次
2021-06-23

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第1张

image

第一步 网站托管

我们晓得,一个网站要才能在任何地方都还能被访问,那么还要布署至服务器上。其实github就提供了这么的功能,只要依照github格式要求,新建一个库房,把你的网站代码上传至旁边,那么就可以在任何时侯任何地方都还能访问了,那么怎么搭建这个代码托管库房呢?

可参考官方链接,我这也把方法写下来。

1.首先你要至GitHub上注册一个帐户,例如我注册的用户名为:leach-chen(用户名可以在设置里改)

2.点击New repository–>输入库房名称格式为:用户名.github.io(如:leach-chen.github.io)->点击Create repository

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第2张

image

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第3张

image

3.浏览器里访问,可以发觉这个url可以被访问了,你可以把改库房拉取至本地,然后在上面改建一个index.html的文件,在里面键入任意内容,然后再把代码推送至git上,然后再访问改链接,可以发觉index.html上面的内容被访问至了。

到这儿,一个免费且无限流量的github代码托管库房就争创完成了。

第二步 Jekyll安装

首先解释下哪些是jekyll,jekyll相当于一个编译工具,安装好jekyll后,你可以通过jekyll争创一个网站模版,创建好以后,我们就可以通过:4000/访问昨天争创的网站了(具体jekyll用法上面再介绍),我们可以实时更改昨天争创的模版上面的内容,并可以实时通过本地url预览改动后的疗效。我们把这个博客推送至上一步争创的代码库房里,再通过就可以访问至博客上面的内容了。有了Jekyll,我们不用每天改动一点点就把代码推送至库房中进行预览,而是本地就可以预览。GitHub支持jekyll,hexo等时态解读。

那么怎么安装jekyll呢?我那边暂只讲解windows下的安装方法。

首先点击下载安装Ruby installer;

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第4张

点击下载RubyGems,下载完成后解压到你想放的位置,例如我放在E:\Software\Install\StudySoftware\rubygems-2.7.4。 打开命令行执行:

cd E:\Software\Install\StudySoftware\rubygems-2.7.4 //踏入至解压包的位置

E:

ruby setup.rb

在命令行执行gem install jekyll;

安装完成,我们可以用jekyll命令争创一个博客模版,打开命令行执行:

cd d:

d:

jekyll new testblog

cd testblog

jekyll server

在浏览器键入:4000/即可浏览昨天争创的blog

到此jekyll 就安装完成了。

第三步 Jekyll 主题选择

上一步我们完成了jekyll的安装,默认争创的博客模版通常比较简略,jekyll官网提供了大量博客模版,我们可以去选购一个自己喜欢的博客模版,然后在这个博客基础上更改至满足自己需求的博客

点击抵达jekyll 主题官网

我选择的adam-blog这篇主题

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第5张

点击Homepage可以链接至该blog Github页面个人网站源码下载后怎么安装,点击download可以下载该博客源码,点击demo可以预览该博客疗效

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第6张

image

我们点击download,将该源码下载出来,命令行踏入该目录执行jekyll server,执行成功可以在控制台见到运行路径:

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第7张

image

若下载的主题jekyll server执行失败,则用方法中学争创的testblog目录下的Gemfile,Gemfile.lock文件替换下载的主题旁边的该文件,若还不成功,则按照控制台提示的错误个人网站源码下载后怎么安装,可以百度至解决方案。 到此,我们早已选取了一个博客主题模版,接下来我们讲解下jekyll主题的目录结构

第四步 Jekyll 目录结构

jekyll目录结构主要包含如下目录:

_posts 博客内容

_pages 其他还要生成的网页,如About页

_layouts 网页排版模版

_includes 被模版包含的HTML花絮,可在_config.yml中更改位置

assets 辅助资源 css布局 js脚本 图片等

_data 动态数据

_sites 最终生成的静态网页

_config.yml 网站的一些配置信息

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第8张

index.html 网站的入口

那么这种目录是怎样运作的呢?

我们打开根目录下的index.html可以看见:

layout: home-page

html代码段

上面的home-page我们至_layouts目录下可以找到:

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第9张

image

实际上根目录下index.html运行后是home-page上面的代码内容,1中html代码段会填充的上图中的content位置

上图的default布局也可以再_layouts目录下找到:

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第10张

image

实际上根目录下index.html运行后,home-page.html上面的代码内容会填充至上图中的content位置

jekyll是将分散在各个目录下的html文件条纹上去运行。

文章链接这儿有篇讲的比较好的,跟着该文章里的操作,能使你更熟悉

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第11张

第五步 Jekyll 语法

上一步大约讲解了下Jekyll的目录结构,现在我们讲解下部份jekyll的句型,也可去官方网站学习更具体官方链接

{% for post in paginator.posts %} {% endfor %}表示一个for循环,百分号之间的句子为要执行的句子,该段代码表示分栏输出文章,分页人数在_config.yml中配置,注意:分页只在根目录下的index.html中有效

{ site.自定义数组名称 } 表示获取_config.yml旁边的自定义数组名称的值

{% for post in site.posts limit:2 %} {% endfor %}循环输出 2 篇文章

{% for post in site.posts offset:0 limit:2 %}循环输出最新2篇文章

{% for tag in post.tags %} {% endfor %}输出该篇文章里的tag

{% if link.type == site.blog_1 %} {% endfor %}字符串比较

| {% assign count = 0 %}****{% assign count = count | plus: 1 %}定义assign变量加1 |

{{post.content | strip_html | strip_newlines | truncate: 100 }}获取文章摘要,取前100个字符

2018-02-10-你要添加的描述.markdown,文章命名格式,否则辨识不了

{{ page.date | date: ‘%Y, %b %d’ }}输出文章日期

{{page.title}}输出文章标题

{% if post.jekyll %} 判断文章里的jekyll数组是否为true

{% if paginator.previous_page %}是否有上一页

{% if paginator.next_page %}是否有下一页

{{ paginator.previous_page_path }}上一页url

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第12张

{{ paginator.next_page_path }}下一页url

| {{ post.url | prepend: site.baseurl }}要访问的文章的url |

第六步 修改博客模版

第四步中下载的博客模版发觉并不完全符合自己的需求,于是做了如下更改

1. 添加文章分类功能:

a. 在_config.yml中添加如下分类

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第13张

image

b. 在_includes目录下的header.html上面添加如下代码,该代码是循环输出分类及该分类下的文章数目

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第14张

image

c.在根目录下争创博客文件夹,在里面争创对应目录,目录名称跟a方法中的url路径对应

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第15张

image

d.在每位目录下争创index.html,并按如下图形式添加代码,这样就可以按分类输出文章

个人网站源码下载后怎么安装(个人商城网站源码) (https://www.oilcn.net.cn/) 综合教程 第16张

image

END

发表评论