【算法哥】兄弟们要的建站教程!累屁了

哈喽大家好,我是算法哥,之前费劲心思,把我关于校招的内容,全部放在了我的个人网站上,当时确实肝,整了快一个月,累屁了,不过也得到了大家伙的鼓励和认可,俺也是非常开心滴,能给各位彦祖有一点帮助,那就算是没白忙活。

具体内容见这篇文章。

网站的具体界面如下所示

还有一些内容,就不在这里详细描述了,需要的老哥可以自己去网站看一下

网站地址

然后有好多老哥私信我,网站如何搭的,让我写个教程,说实话,这个网站搭起来也不难,就算不是程序员也可以完全搞定,可以直接跟着我的这个文章来就行,不能说全网最细吧,不过搭建过程中遇到的问题在这里都进行了解答,叫声彦祖不过分吧,铁铁们,废话不多说开冲!哦对了,大家阅读,也欢迎大家关注,支持一下JR。

代码也全部开源给大家,需要的可以下载一下。

链接:

建站的前置条件(网址在图片下面)

1.个人服务器,个人博客的话,不用买配置太高的,我的是 2c4g ,当然你也可以用 Github page,不过我个人建议还是自己买一个,不咋贵。

https://cloud.tencent.com/

2.服务器运维面板,我用的宝塔,个人认为非常好用。

https://www.bt.cn/

3.博客模版,当然你也可以自己写代码,我用的是 docsify。一个简约又不简单的网站模版。

https://docsify.js.org/

4.域名,可以在阿里云或者腾讯云自行购买,个人建议服务器和域名买一家的,备案认证时省事一些。

https://dnspod.cloud.tencent.com/?from=qcloudHpProductDns/

5.简要了解 MarkDown 语法,常用的段落标题等。

好啦,具备上述前置条件,则可以搭建个人网站啦,具体教程如下。

安装 node.js

这一步 docsify 官方文档没有提到,但是node.js是必须安装的,安装方式可以去官网看或者 CSDN 搜一哈就行,这一块就不进行详细介绍啦。在这里贴一下 node.js 的官方网站。

https://nodejs.org/en/

安装完成之后,可以使用 npm -v 查看版本号并检查一下是否安装成功。安装 docsify-cli 工具

命令非常简单

npm i docsify-cli -g

然后你就能看到刷刷刷正在安装的面板,安装完成之后,可以使用 docsify -v查看版本号并查看是否安装成功。

则需要对其初始化,工程目录可以自行设定。

docsify init chengxuchu

好啦,初始化完成之后,网站就建好了,是不是很简单?

得了吧,你可别吹牛啦,输几行代码就建好网站啦?你忽悠谁呢?

不信你看,首先启动 docsify

本地预览

网站

是不是就把网站的框架就搭好啦?下面只需要对内容进行填充和美化即可。

首先打开其目录。

其中 index.html 文件可以对网站进行一些设定,安装某些插件(后面会详细介绍),或者自己进行编码对网站进行优化,README 则能够对网站主页进行渲染。下面来对 README 进行修改并查看具体效果。

保存后本地预览

这样就完成了修改。

下面继续来看一下 index.html 文件内有哪些内容

其中 #app 会显示 loading... 内容,也就是加载网站时的内容,这一块可以自己定制。

window.$docsify 则为配置函数,初始情况如下。      window.$docsify = {      name: '',      repo: '',    }  

name 代表网站内部名称,设置完成之后显示在网站侧边栏的上部。 repo 设置导向链接,可以将其连接到 github。

下面来对 window.$docsify 中的常用属性进行详细介绍,并进行演示。导航栏

我们通过设置 window.$docsify 中的loadNavbar 属性来设置导航栏。window.$docsify = {     themeColor: '#333333',     name: ' ? 2022',     repo: 'https://github.com/chefyuan/algorithm-base',     loadNavbar: true,      }

将 loadNavbar 属性设置为 true,并新建 _navbar.md 文件,注意文件名中的 _ 不可以省略。之前再对 _navbar.md文件填充,效果如下

导航栏 1

导航栏 2

导航栏 3

导航栏 4

好啦,到这里,导航栏就完成啦,你可以根据实际需要,设置不同的导航栏数目。侧边栏

我们发现上述页面中的侧边栏,是根据 md 文件中的标题生成,如果我们不想让其根据标题生成,而是通过自定义生成,则可以在指定的 md 文件中添加 # {docsify-ignore-all} 并在 window.$docsify 中添加 loadSidebar: true。具体实现方式如下

侧边栏 1

侧边栏 2

侧边栏 3

此时发现侧边栏中标题导航已经消失,此时如果想要自定义侧边栏导航的话,则需要新建 _sidebar.md 并在该文件中定义侧边栏内容,具体实现方式如下。

侧边栏 4

侧边栏 5

侧边栏 6

此时我们发现,当我们点进好运来时,侧边栏并没有随着文件的改变而改变,所以搭建网站时,可以根据实际需求,选择根据标题等级自动生成侧边栏,还是自定义。

如果选择自动是生成侧边栏,则可以使用 subMaxLevel: 来设计标题显示等级。封面

网站封面大家可以根据自身喜爱来设置,封面对应文件为 _coverpage.md并在 window.$docsify 中加入 coverpage: true ,具体实现过程如下 。

封面 1

封面 2

封面 3

这样整理框架就完成的差不多啦,下面就可以在你的网站中填充你的文章啦,还有很多玩法可以自行开发一下。

下面给大家,介绍几个常用的插件,进一步完善网站。插件搜索功能

这个功能还是比较重要的,这样你就可以在网站中搜索内容,快速定位。

搜索

实现方式也非常简单,只需两步。

1.在 body 中添加 JS 文件

2.

字数统计

字数统计用来统计当前页面字数,实现也非常简单。

字数统计

只需要插入下面 js 文件即可

返回顶部

该功能也是经常使用的,当我们在阅读时,想要返回顶部阅读,滑动滚动条,是比较麻烦的,此时则可以直接点击返回顶部按钮,重新进行阅读。

实现起来也非常简单。 

页脚

网站上线之后,要进行备案,所以可以在页脚放备案号,或者网站的简短介绍,具体效果如下。

实现起来也比较简单

只需要导入以下 JS 文件即可

然后再在 window.$docsify 中添加 foot 来对内容进行修改

这下网站主要功能就算在本地搭建完成啦。

接下来则需要进行购买服务器,购买域名,域名备案,配置 DNS。这些内容较简单,大家可以去网上搜一下,但是需要注意的是,因为 Docsify 默认是 3000 端口,大家可以使用 docsify serve --port XXXX 命令使用指定端口。网站的维护和运营则可以使用宝塔来完成,真的挺不错。

还一个事就是,寒假打卡小队,目前开始一个星期了,效果还不错,打卡的人还不少,希望都可以坚持到最后吧,如果你也需要的话,。

完全免费哈,但是希望大家能够遵守小队规则,不然维护起来太累了。

PS有一些老哥私信我要网站的源码,哎嘛,真没写多少代码,既然大家需要我就把文章补充一下发出来吧,各位自行下载即可。

链接:

提取码: dvqd

好啦,今天就说这么多吧,如果你在网站的搭建过程中,遇到任何问题,都可以问我,希望这篇文章能够对你有一丢丢帮助。

  • 评论列表:
  •  新2备用网址
     发布于 2022-03-09 00:02:45  回复
  • 这文太温暖了
    •  游戏百家乐
       发布于 2022-11-02 19:18:11  回复
    • 每天更新新赛季防守球员集锦……敬请关注,感谢近日最爱

添加回复:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。