哈喽大家好,我是算法哥,之前费劲心思,把我关于校招的内容,全部放在了我的个人网站上,当时确实肝,整了快一个月,累屁了,不过也得到了大家伙的鼓励和认可,俺也是非常开心滴,能给各位彦祖有一点帮助,那就算是没白忙活。
具体内容见这篇文章。
网站的具体界面如下所示
还有一些内容,就不在这里详细描述了,需要的老哥可以自己去网站看一下
网站地址
然后有好多老哥私信我,网站如何搭的,让我写个教程,说实话,这个网站搭起来也不难,就算不是程序员也可以完全搞定,可以直接跟着我的这个文章来就行,不能说全网最细吧,不过搭建过程中遇到的问题在这里都进行了解答,叫声彦祖不过分吧,铁铁们,废话不多说开冲!哦对了,大家阅读,也欢迎大家关注,支持一下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
好啦,今天就说这么多吧,如果你在网站的搭建过程中,遇到任何问题,都可以问我,希望这篇文章能够对你有一丢丢帮助。