Vuepress配置
版本
本站有很多配置的经验贴,这个是目前最新的,很多以前的操作存在特定时期的认知局限性,会有比较多的问题,本帖也会不断更新,适应各种变更。
# 前言
这篇文章属于捡漏篇,因为时间久远,很多以前总结的知识点忘记了。很多知识点还是可以参考同文件路径下写的几篇零散问题解决方法
C:\Tommy\DevProject\Blog-Essay\03-静态博客配置经验
这个经验总结的MD文档作为汇总文档,就不进行日期排序了,直接使用01前缀
# 博客搭建思路
基于Nodejs环境,使用其自带的npm软件管理系统(输入指令型系统),和万能的npm clone
指令,克隆广大的开源静态博客开发者们开发的博客主程序,(例如:VuePress,Hexo等等)至本地
与其说是程序,不如说是静态网站文件生成器更好理解,在运行后会根据文件夹内的文档文字配合各种图形化的代码,生成对应的图形化网站
根据不同源码的说明,使用对应指令,以博客源码为基础运行,并生成静态网站所需的网站文件,并部署本地服务,生成一个本地的静态网站。
相关资料:npm - 维基百科 (opens new window) Node.js - 维基百科 (opens new window)
其特点是运行在本地IP中,可直接无网络访问
完成初步内容编写配置后,通过Git(GitHub的项目管理软件)将生成好的网站文件上传至Github准备的仓库中,并开启Github提供的GitHub page(个人静态化网站服务),即可通过给定的网址访问(Page功能开启后默认是有访问网址给出的)
# 操作指令
很尴尬,之前辛辛苦苦搭建的博客,因为后面用的太少了,先后经历了图床Picgo代理出错(jsDelivr的CDN被墙导致)9.18号打开来,连怎么调试都忘了,比较离谱
先记录下Git bash的vdoing主题的调试命令,防止忘记
# Blog调试、部署指令
npm run deploy #部署博客
npm run dev #调试模式
2
2
部署模式是先生成静态文档文件,随后推送至GitHub对应仓库分支,并由GitHub完成对Page的更新
dev调试模式则是部署本地网页,提供网站预览服务
# Git常用指令
Git的指令特别多且繁琐,所以专门记录几个最常用的,防止遗忘
我的原Vuepress目前还能正常运行,但具体的工况已经不明,所以尽量按照现有的操作指令执行,以后再具体拆解,防止屎山崩盘。
# 在完整的更新流程中运用的代码步骤
博客目前为偶尔更新状态(马上开始长期更新)。
配置有Github Action自动部署,所以仓库的结构为双分支,主分支master,副分支gh-pages。
主分支存放博客程序文件,可存放文章及根据npm指令生成网站所需的静态文件。
副分支存放静态网站文件
因此为了防止出现网站的GitHub仓库主分支内的数据内容与本地出现差异(可能是自己编辑了然后忘了同步了),从而导致数据不同步问题,可能会引发一些不必要的麻烦。因此在更新前,需要将github仓库master分支(博客主程序)与本地的代码文件合并,根据实际情况决定是本地push上传还是云端pull拉取下载合并。
通常是云端下载,因为GitHub action是一个很常用的在线编辑功能,该功能是直接修改GitHub仓库的代码的。而本地代码通常一修改完就会同步上传,不容易出现不同步的问题
步骤一:
在博客本地程序文件路径下运行Bash(可在Vscode里直接运行)
git pull #该命令用于从远程获取代码并合并本地的版本
git pull其实就是 git fetch 和 git merge FETCH_HEAD 的简写,该命令有结尾可以加一些对应参数,但由于我们需要合并的是master分支且该分支为主分支,刚好是默认选项,所以可以只输入pull即可
步骤二:
在更新所需更新的博客内容后使用如下命令
git add . #将更新内容添加至本地git管理器中
git commit -m '更新内容描述' #确认更新内容,并“上膛”,标注更新内容
git commit -am '更新内容描述' #add、commit两个步骤合并为一个步骤的代码
2
3
2
3
git commit -m的这个“-m”是main分支或者master分支的意思
步骤三:
git push #将更新好后的文件上传至GitHub对应分支
一定要执行步骤二才能正确push,不然无法push成功
更多的Git操作,请参考Git使用心得
# 问题发现与解决
# 代码框行号与代码行距不同
其实是因为字体问题导致,更换字体后就没问题了
# Git分支推送历史功能
更新出现异常解决办法
因为很喜欢给博客添加新功能,但又很容易出现不明bug,应该充分利用Git的定档备份功能,出现问题后及时回滚
显示分支提交命令,会显示出提交历史,和提交代码
git log #退出按Q即可
研究git checkout
和git reset
的区别,以及两者在操作上的区别
# 实战操作方法
# 情况一:修改提交了commit且push
方法一:
git reset --hard HEAD^ #一个^代表一个版本,倒退^^两个版本,~100=回退100个版本
git reset --hard id #回退到指定的id码
2
2
这个方法不推荐,因为会直接覆盖掉回退前的记录。(虽然不是真的删了)
1 --> 2 –> 3 直接变成 1 –> 2
这个时候再PUSH会提示线上版本比线下版本新,所以的强制提交
git push -f #强制提交
方法二:
git revert commit_id #用log里的版本号完全替代掉commit_id这几个字符
该命令意思是撤销,但保留提交记录
1 --> 2 –> 3 变成 1 –> 2 --> 3 –>4 将回退到2但以2作为主体新建新的
4
号commit注意: 操作中commit_id应写需要被移除的版本号,而上面reset则是输入要去到的版本号
输入完成后会进入和git commit --amend
一样的界面,用I
进入输入模式,在revert “”
的冒号里输入更新的名称,输入:wq
回车退出。
revert命令可以直接push,不需要担心push不上去,因为是新建的commit,不会出现线上版本比线下版本好的报错。
# 情况二:修改并提交了,但没有push
git reset --soft #撤销commit
11git reset --mixed 撤销commit和add两个动作
11
以上两个办法都不会真正删除文件,Git中依旧可以查找出并还原,方便在各个版本间穿梭
查看完整提交历史
git reflog
# 0924分支推送记录
当天由于更新出了bug,需要回滚到之前的版本,出现了很多问题,最核心的问题是
回滚后无法提交git push。
回退版本的reset和revert指令都不好用
git commit --amend指令很难用(其实是看错了操作方法)
# Git操作收获——commit --amend
git commit --amend #修改提交信息(commit更新的那个信息修改)
该模式下默认会显示很多行带注释的操作说明,按键盘I
健即可进入编辑模式,键盘上下键确定输入位置
进入编辑模式:
小写i:在光标所在行位置停止不动开始写入内容
大写I:在光标所在行行首开始写入内容
小写a:在光标所在行当前字符后开始写入内容
大写A:在光标所在行行尾开始写入内容
小写o:在光标所在行下一行开始写入内容
大写O:在光标所在行上一行开始写入内容
退出编辑模式:
:w
:保存文本
:q
:退出编辑模式
:w!
:强制保存,在root用户下即使文本只读也可以强制保存
:q!
:强制退出,所有改动不生效
:wq
:保存并退出
以上操作一定要记住,
:
号也是命令的一部分,退不出来是因为把冒号忘记了
操作参考git commit --amend 以及退出 vim 编辑器_vmespmvk的博客-CSDN博客 (opens new window)
# 0925分之推送报错
今天继续更新了一些网站样式,但由于中途好奇,用git checkout
到了昨天上传出bug的那个版本,然后又checkout回去继续修改。一切修改完成后,commit成功,但push时报错如下
TommyZeng@TommyLaptop MINGW64 /c/Tommy/DevProjectLocal/Blog-Vuepress (master|REBASE 2/3)
$ git push
fatal: You are not currently on a branch.
To push the history leading to the current (detached HEAD)
state now, use
git push origin HEAD:<name-of-remote-branch>
2
3
4
5
6
7
2
3
4
5
6
7
究其原因,根据可查资料,显示当你在进行checkout
时提供了一个commit
而不是分支名称,你就进入了一种“特殊”的状态里 —— detached HEAD
。
可能发生的问题:
Git中的HEAD
指针能确定您当前的工作版本(以及放置在项目工作目录中的文件)。通常,当检出正确的分支名称时,Git会在您创建新提交时自动移动HEAD
指针。您将自动进入所选分支的最新提交。
当您选择通过commit
哈希值进行checkout
时,Git将不会为您执行此操作。结果是,当您进行更改并提交它们时,这些更改将不属于任何分支。
# 解决方法
问题分析:出现该错误的原因是因为checkout导致的HEAD指向了非master的仓库,导致push异常。
可以先讲目前更改的commit放入一个临时分支里,然后切换至master分支,再使用命令和临时分支合并(merge)
先查看下目前的commit列表
43c3519 (HEAD) HEAD@{0}: commit: 新版字体优化合并分支 #新建一个临时分支
ffa0c06 (HEAD) HEAD@{0}: commit: 新版界面字体优化——大改
b1432cb (master) HEAD@{1}: checkout: moving from b82a384012a1a07d083ed8afa0139bb87f98a2e1 to b1432cb
b82a384 HEAD@{2}: checkout: moving from master to b82a384
b1432cb (master) HEAD@{3}: commit: 更新了新翻译的部分
95021cc (origin/master, origin/HEAD) HEAD@{4}: commit: 女王文章翻译更新
2
3
4
5
6
2
3
4
5
6
**步骤一:**选取需要的分支名称43c3519,为其简历temp分支
git branch temp 43c3519
**步骤二:**切换至master主分支上(此时发现前面commit的更改都消失了)
git checkout master
**步骤三:**将temp的分之内容merge合并到master,master就出现了新改动的代码
git merge temp
完成以上步骤后即可正常推送,恢复正常
记得完成后删除temp分支,防止出现奇怪问题,删除方法
git branch -d temp
11
# 0926分支回退并重新push操作调研
前提:在完成开发后,发现出现不明bug,想回退到初始版本,并push到github,看看是不是玄学bug。
这里面的核心问题是,github-action自动部署与本地部署的效果不一致,一个叫banner-arrow的动态箭头元素竟然无法渲染出正确的位置和动画(action的版本)。
重命名分支操作
git branch -m master old-master #把master改名为old-master
强制推送至某分支
git push origin develop:master -f #强制将develop分支推送至master分支
但是还是无法改变原有的master分支,最后还是reset解决的
- 先切换至master分支
git reset --hard 要与master合并的分支
11
最后研究了一圈发现,可能还是reset最好用,虽然会破坏记录,但是reflog
记录并不会消失
# 更新日志
# 失败更新
更新全新返回图标,更新失败,顶栏Emoji表现不佳
git checkout 4f0f3ae
更新收获:可根据Vue的组建直接更新页面布局,但存在不明BUG的可能性,这可能是由于本地DEV和云端构建运行代码所调用的库以及环境区别较大,很大的制约了静态网站的健壮性。
Bug表现:上线后页面布局异常,手机端出现页面无法触控的问题
# 成功更新
汉堡菜单优化,专栏跳转新页面修改
汉堡菜单改为“Logo”图标
git checkout 26fae81
自适应字体大小更新
git checkout 701b96f
# CSS编程经验
# JS target参数
target属性
<a href="//:baidu.com" target="_blank">在新页面打开</a>
<a href="//:baidu.com" target="_self">在自身面打开,为默认值</a>
<a href="//:baidu.com" target="_top">在顶部窗口打开</a>
<a href="//:baidu.com" target="_parent">在上一级的窗口打开</a>
2
3
4
2
3
4
常用标记元素
.sidebar-button{
opacity:0; //透明度
transform: translateX(7px)scale(3.7, 1); //X轴向移动,scale缩放(X轴缩放,Y轴缩放)
z-index:1; //图层调整
}
2
3
4
5
2
3
4
5
# 字体加粗不生效问题
这是一个跨平台特别容易出现的问题,跟支持字体有关,解决之道暂时只能配置更全面的font-family
除非类似app独立封装,否则网页端调用字库,会减慢加载速度,得不偿失。
参考文章[css - 解决 font-weight 无效的问题_个人文章 - SegmentFault 思否](