用js实现导航栏shoufang效果_【读者投稿】用Github+docsify,我花了半天就搭好了个人博客...

前言

“作为一个真正的码农,不能没有自己的个人博客”,这是我说的。惭愧的是,入行两年多了都没搞起来,这让我一度怀疑自己是个假程序员。昨天终于克服了心里的“犹豫”和“恐惧”,尝试搭建了一把,半天就搞好了,看着能用。

搭建博客只是一个小任务,为啥迟迟不能完成?只能说明鄙人执行力太差。想的多做的少,大多数时候我们只要开始行动之后,好多问题都会迎刃而解了。引用最新网上很流行的一段话,与君共勉之:

我们遇到什么困难也不要怕,微笑着面对它!消除恐惧的最好办法就是面对恐惧!坚持,才是胜利。加油!奥利给!

因此,干就完了

一些说明

先来看下我搭建好的效果

9d0ec262de4f2cf4acdb7466fb0bdfcd.png 06a73b2ed35d8e0f2ef3c3839b3486a9.png

和一般的使用Hexo、Jekyll、Hugo等博客框架搭建的博客可能有些差异。这个更像是一个Document API,不过博客也是一些文章啦。

使用的框架技术

  • docsify框架

  • 基于Github Pages的站点部署

我是在Windows 7下搭建的

网上好些搭建博客的视频教程,大部分用的是Macbook。没办法,“实力确实不允许啊”,我还挣扎在Windows的苦海中。等我有钱了,我也要卖最好的Mac,写最渣的代码。

 40184cb9ae3a638242a8ba134ca76f16.png

准备工作

1、要有git环境,有github账号

windows下安装git可以看下这篇Git简易教程之git简介及安装

因为我们要使用Github Pages来部署我们的应用,请先注册下github的账号。

2、有node环境

docsify框架需要有node环境的支持。上node.js的官网下载安装包,此处下载Windows版本的,点下一步一路安装下去即可。另外需要配置下环境变量。

Windows下安装node环境,请自行百度教程安装。

3、简要说明一下步骤

  • 上docsify官网了解下,里面有使用的步骤了。

  • 使用docsify命令生成文档站点

  • 在github上部署站点

上docsify官网看一看

地址:https://docsify.js.org/#/ docsify官网

478895e2ced55315745d1734eda923b5.png 你没有看错,docsify的官网就是用它自身的js框架搭建的。这种极简风我还是挺喜欢的。

A magical documentation site generator 一款神奇的文档站点生成器

最主要的特性是,支持Markdown格式,对程序员的博主们是很友好的。不用生成html文件,写完MD格式的博客直接往上一放,框架自己在运行时解析渲染成html页面。

使用docsify命令生成文档站点

安装docsify-cli 工具

推荐安装 docsify-cli 工具,可以方便创建及本地预览文档网站。

npm i docsify-cli -g

因为我们已经安装了node环境,所以直接打开CMD窗口执行上面的命令就好了。

初始化一个项目

然后我们选择一个目录,作为我们的博客站点目录。也就是项目要生成的目录。

比如我在E盘下新建了一个myblogs的目录 3aaeebafebe5d0be8ebfc598d37f8cef.png 打开CMD黑框,cd到该目录,执行如下命令:

docsify init ./docs

1de7ba76af18a5c50701f201e6934cbe.png

执行完成后,目录结构就会变成这样

0bf3e32f804d4c928869f5d80dab7b79.png

可以看到,多了一个docs文件夹,其实这个文件夹就是将来我们存放MD格式的博客文件的地方。

与此同时,docs目录下会生成几个文件。

740f909a1eb4d736cfae0bba1edf9927.png

  • index.html 入口文件

  • README.md 会做为主页内容渲染

  • .nojekyll 用于阻止 GitHub Pages 会忽略掉下划线开头的文件

启动项目,预览效果

到这里,就可以启动项目,然后看下效果了。使用下面命令启动项目:

docsify serve docs

c54bb2d3d900d99541214f848c881b88.png

流程器输入:http://localhost:3000

e6411efb73aef50c2d0fcf4a2d48607a.png 看着有点简陋,不过框架已经搭好了,接下来就是一些配置了。

增加一些配置,变身成真正的blogsite

这里我们主要配置一下封面、左侧导航栏和首页,其他的配置可以参考docsify官网。

1、配置左侧导航栏

在 E:\myblogs\docs目录下新建一个 _sidebar.md 的md文件,内容如下:

- 设计模式

- [第一章节](desgin-pattern/Java面试必备:手写单例模式.md)

- [工厂模式](desgin-pattern/工厂模式超详解(代码示例).md)

- [原型模式](desgin-pattern/设计模式之原型模式.md)

- [代理模式](desgin-pattern/设计模式之代理模式.md)

- Spring框架

- [初识spring框架](spring/【10分钟学Spring】:(一)初识Spring框架.md)

- [依赖注入及示例](spring/【10分钟学Spring】:(二)一文搞懂spring依赖注入(DI).md)

- [spring的条件化装配](spring/【10分钟学Spring】:(三)你了解spring的高级装配吗_条件化装配bean.md)

- 数据库

这其实就是最基本的md文件,里面写了一些链接而已。当然了我们诸如 desgin-pattern/Java面试必备:手写单例模式.md 是相对路径,目录下也要放 Java面试必备:手写单例模式.md 文件才行。

d8d850c8113facc7abb9c9075ed0de72.png 只有上面的 _sidebar.md 文件是不行滴,还需要在index.html文件中配置一下。在内嵌的js脚本中加上下面这句:

loadSidebar: true

de20fe67356d12c34aaf10ebd19d16a0.png

好了,我们来看下效果。

注意,无需我们重新启动docsify serve,保存刚才添加和修改的文件就行。

b76ed9ec3eab869bf20195b92fe9b5e9.png

2、配置个封面

套路和上面配置左侧导航栏是一样的。

首先新建一个 _coverpage.md 的md文件,这里面的内容就是你封面的内容。

# Myblogs

> 我要开始装逼了

[CSDN](https://blog.csdn.net/m0_37965018)

[滚动鼠标](#introduction)

然后在index.xml文件中修改js脚本配置,添加一句:

coverpage: true

12f18fbd91408a53970122653f29049e.png

看下效果

1389252b12c89b9dfb8584d7a9473088.png

3、配置一个首页

最后我们来配置下首页,也就是封面完了之后,第一个看到的界面。

其实就是 E:\myblogs\docs 目录下 README.md 文件的内容。

我们一直没有管他,默认就是这个样子的:

5dd1417a673a425a3a3408cc6c35877e.png 改一下,放上自己牛逼的经历或者是标签。

# 最迷人的二营长

> [个人博客](https://blog.csdn.net/m0_37965018)

> [GitHub](https://github.com/Corefo/ "github")

看下效果

383d2ff899951b2f33eed0c3b2ee3706.png

部署到Github上

没有域名 + 服务器怎么办,不用担心,我们有Github啊,通过Github Pages的功能,我们可以将个人站点托管到github上。

登录github账号,创建仓库

登录github的官网,创建一个仓库,起个名字吧,就叫myblogs。

0daa466667a885e7b167e66835e70763.png

仓库创建好了,我们使用第二种方式导入一个本地仓库(本地仓库还没有创建,接下来会建一个)。

69de087cc4227cd7dab0cc4f5055cf39.png

创建本地仓库,推送到github

首先我们进入我们的本地博客站点目录,也就是 E:\myblogs

右键 GitBashHere 打开git命令行初始化一个仓库,并提交所有的博客文件到git本地仓库。

涉及命令如下:

git init // 初始化一个仓库

git add -A // 添加所有文件到暂存区,也就是交给由git管理着

git commit -m "myblogs first commit" // 提交到git仓库,-m后面是注释

git remote add origin https://github.com/Corefo/myblogs.git

git push -u origin master // 推送到远程myblogs仓库

按上面的命令顺序操作,不出意外的话,我们的本地myblogs已经同步到了github上面了。

刷新github的页面来看下。

34da76e6978853e4e458b4731aa84939.png

使用Github Pages功能建立站点

这一步相当简单,简单到令人发指!!

在myblogs仓库下,选中 Settings 选项,

bef4bcd1f2c9216d557634c7ae447c98.png

然后鼠标一直向下滚动,直到看到 GitHubPages 页签,在Source下面选择 master branch/docs folder 选项。

fa7e460fbe6e6c0a1c2e2d3b2b1c2e52.png 好了,ok了,完美了,这么简单。

同时,还会提示你在哪里去访问你的站点。 65439907cbfd06874ff2eda2e8c55a7f.png

按照提示,我们访问看看:

3d797dc9651893f6007b9ba113ac4e25.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/350845.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu 重定向

重定向 (重新设定方向) ls > xxx.txt 将ls显示的内容写入到xxx.txt ls -lah > xxx.txt ls >> xxx.txt 将ls显示的内容以追加方式写入到xxx.txt

IDEA快捷键及xml文件中网址报错

AltShiftTab 切换窗口(从后往前) divTab    补全为 <div></div> #boxTab   补全为 <div id"box"></div> .boxTab   补全为 <div class"box"></div> …

python随机生成数字列表_详解Python利用random生成一个列表内的随机数

首先,需要导入random模块: import random 随机取1-33之间的1个随机数&#xff0c;可能重复: random.choice(range(1,34)) print得到一系列随机数,执行一次得到一个随机数: print(random.choice(range(1,34))) 随机取1-33之间的6个随机数&#xff0c;可能重复: random.choices(r…

构建Java Web开发环境

1.1 JDK&#xff08;Java Development Kit&#xff09;的安装与配置1.1.1 下载最新的JDK&#xff08;我下载的是Java SE 6 Update 25&#xff09;下载地址&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/index.html1.1.2 JDK的安装1、双击名为“jdk-6u2…

ubuntu cd 改变路径

. 表示当前路径 cd &#xff0e;&#xff0e; 后退到上一层路径 cd ../.. 调到上上层路径,相对路径 cd /home/hjd/ 绝对路径 cd ~ 回到家目录 &#xff08;/home/hjd/&#xff09;

cloud foundry_Spring 3.1,Cloud Foundry和本地开发

cloud foundry这篇文章将帮助您在Cloud Foundry上使用MongoDB构建Spring 3.1 Web应用程序。 除了推动Cloud Foundry之外&#xff0c;您还可以使用MongoDB实例在本地环境中进行开发。 目标 此博客发布的目标是在本地构建应用程序&#xff0c;然后发布到本地Cloud Foundry实例。…

python中continue用法案例_Python continue语句实例用法

Python continue语句&#xff1a; 当执行到 continue 语句时&#xff0c;将不再执行本次循环中 continue 语句接下来的部分&#xff0c;而是继续下一次循环。 lst [7,8,9,4,5,6] for i in range(len(lst)): if lst[i] 9: continue #当运行到 continue 语句时&#xff0c;不执…

eclipse中查看某个方法(函数)被谁调用

用了好久一直不知道eclipse中如何实现vs中查找所有引用的功能&#xff0c;今天终于发现了哈哈 选中要查找的方法名&#xff0c;右键->References->Workspace 可以定位到具体的调用位置&#xff0c;快捷键CtrlShiftG&#xff0c;在Search中就会出现调用方法 或者是 右键-&…

ubuntu ln软连接硬连接

软连接:相当于windows的快捷方式 硬连接&#xff1a;又创建了一个名字指向同一个内存区&#xff0c;相当于又复制了一个同样的内容 ln -s 1.txt 2.txt 将文件1.txt建立2.txt软连接 相当于快捷方式 ln 1.txt 3.txt 将文件1.txt建立3.txt硬连接,

一个简单的Map Iterator性能测试

Java Map性能有很多方面可以衡量&#xff0c;但是关键的一个是简单的单线程扫描。 这是一些针对Iterators和Java 8 Map.forEach()简单测试代码&#xff0c;以及一些图形结果。 1.性能测试困难 性能测试是一项非常困难的工作&#xff0c;精确的可重复测试需要Java微基准测试线束…

小数点后保留2位小数的正则表达式

一、前提 整数和小数&#xff0c;保留两位小数的正则表达式&#xff1a; 具体什么意思呢  ^(([1-9]{1}\\d*)|([0]{1}))(\\.(\\d){0,2})?$ 二、知识点 1、首先从写法上可以看出&#xff0c;使用了显式定义正则表达式的语法&#xff0c;因为其中存在对字符串"\"&…

python字符串是什么_python字符串表示什么

python的字符串就是表示一串字符&#xff0c;字符可以是中文&#xff0c;英文或者数字&#xff0c;或者混合的文本。 python字符串的几种表达方式 1 使用单引号扩起来字符串>>> my python lession #以单引号将字符串扩起来 my python lession >>> a my pyth…

PgSql备份pg_dump与还原手记pg_restore(转)

备份&#xff1a;pg_dump -h localhost -p 5432 -U tradesns -W -F c -b -v -f "/home/tradeworkwangbin/us2010.backup" us2010 恢复&#xff1a;pg_restore -h 192.168.0.100 -p 5432 -U postgres -W -d us2011 -v "/root/us2010.backup" 真没有想到&…

ubuntu ls命令

ls 显示当前文件夹下文件 ls -l 列表显示 ls -a 显示隐藏文件 ls -h 文件大小&#xff0c;自动找单位&#xff08;Kb、M、G&#xff09; 也可以 ls -l -a -h &#xff08;-l -a -h没有先后顺序&#xff0c;-a -h -l&#xff09; 也可以 ls -lah &…

vue 在 html 中自定义 tag

v-if,v-for,:key,:style,v-text,click,:src,:poster,:class,:href转载于:https://www.cnblogs.com/whm-blog/p/10718697.html

cmd进入python环境_python2和python3同时存在,如何CMD中进入不同的环境

当电脑上同时装了python2和python3时&#xff0c;虽然在二者的路径都写入了环境变量PATH中&#xff0c;但是在CMD中运行python命令时只能进入2或者3&#xff08;安装顺序不同进入的也不同&#xff09;&#xff0c;如何进入想要的python版本环境中&#xff1a; 1.首先将二者的的…

ubuntu grep搜索文本

grep &#xff08;Global search Regular Expression and Print out the line&#xff09; grep “ntfs” xxx.txt 显示xxx.txt包括ntfs行 grep -n “ntfs” xxx.txt 显示xxx.txt包括ntfs行&#xff0c;行数 grep -v “ntfs” xxx.txt 显示xxx.txt不包括ntfs行 grep…

java 死锁 解决_Java死锁故障排除和解决

java 死锁 解决JavaOne年度会议的一大优点是主题专家介绍了几个技术和故障排除实验室。 这些实验室之一尤其引起了我的关注&#xff1a;Java冠军Heinz Kabutz提出的“ HOL6500-查找和解决Java死锁 ”。 这是我在该主题上看到的最好的演示之一。 我建议您自己下载&#xff0c;运…

如何使用War包部署Tomcat

前提&#xff1a; 1&#xff1a;已打包好的项目工程War文件 2&#xff1a;正常运行的Tomcat环境 当前的War文件为&#xff1a;GPCDMS.war Tomcat环境为&#xff1a;http://10.122.111.76:9080/ 具体步骤&#xff1a; 1&#xff1a;点击主页左侧 Tomcat Manager 并使用 ad…

delphi 停电文本数据丢失_NLP中的文本分析和特征工程

语言检测&#xff0c;文本清理&#xff0c;长度测量&#xff0c;情绪分析&#xff0c;命名实体识别&#xff0c;n字频率&#xff0c;词向量&#xff0c;主题建模前言在本文中&#xff0c;我将使用NLP和Python解释如何分析文本数据并为机器学习模型提取特征。NLP(自然语言处理)是…