Tommy's Blog
TommyZeng
2022-09-25
目录

Vuepress配置

版本

本站有很多配置的经验贴，这个是目前最新的，很多以前的操作存在特定时期的认知局限性，会有比较多的问题，本帖也会不断更新，适应各种变更。

# 前言

这篇文章属于捡漏篇，因为时间久远，很多以前总结的知识点忘记了。很多知识点还是可以参考同文件路径下写的几篇零散问题解决方法

C:\Tommy\DevProject\Blog-Essay\03-静态博客配置经验
1
1

这个经验总结的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      		#调试模式
1
2
1
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 #该命令用于从远程获取代码并合并本地的版本
1
1

git pull其实就是 git fetch 和 git merge FETCH_HEAD 的简写，该命令有结尾可以加一些对应参数，但由于我们需要合并的是master分支且该分支为主分支，刚好是默认选项，所以可以只输入pull即可

参考文章：git pull 命令 | 菜鸟教程 (runoob.com) (opens new window)

步骤二：

在更新所需更新的博客内容后使用如下命令

git add .  							#将更新内容添加至本地git管理器中
git commit -m '更新内容描述'			#确认更新内容，并“上膛”，标注更新内容
git commit -am '更新内容描述'			#add、commit两个步骤合并为一个步骤的代码
1
2
3
1
2
3

git commit -m的这个“-m”是main分支或者master分支的意思

步骤三：

git push							#将更新好后的文件上传至GitHub对应分支
1
1

一定要执行步骤二才能正确push，不然无法push成功

更多的Git操作，请参考Git使用心得

# 问题发现与解决

# 代码框行号与代码行距不同

其实是因为字体问题导致，更换字体后就没问题了

# Git分支推送历史功能

更新出现异常解决办法

因为很喜欢给博客添加新功能，但又很容易出现不明bug，应该充分利用Git的定档备份功能，出现问题后及时回滚

显示分支提交命令，会显示出提交历史，和提交代码

git log  #退出按Q即可
1
1

研究git checkout和git reset的区别，以及两者在操作上的区别

# 实战操作方法

# 情况一：修改提交了commit且push

方法一：

git reset --hard HEAD^ #一个^代表一个版本，倒退^^两个版本，~100=回退100个版本
git reset --hard id #回退到指定的id码
1
2
1
2

这个方法不推荐，因为会直接覆盖掉回退前的记录。(虽然不是真的删了)

1 --> 2 –> 3 直接变成 1 –> 2

这个时候再PUSH会提示线上版本比线下版本新，所以的强制提交

git push -f #强制提交
1
1

方法二：

git revert commit_id #用log里的版本号完全替代掉commit_id这几个字符
1
1

该命令意思是撤销，但保留提交记录

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

  1. git reset --soft #撤销commit
    1
    1
  2. git reset --mixed 撤销commit和add两个动作
    1
    1

以上两个办法都不会真正删除文件，Git中依旧可以查找出并还原，方便在各个版本间穿梭

查看完整提交历史

git reflog
1
1

# 0924分支推送记录

当天由于更新出了bug，需要回滚到之前的版本，出现了很多问题，最核心的问题是

  • 回滚后无法提交git push。

  • 回退版本的reset和revert指令都不好用

  • git commit --amend指令很难用（其实是看错了操作方法）

# Git操作收获——commit --amend

git commit --amend #修改提交信息（commit更新的那个信息修改）
1
1

该模式下默认会显示很多行带注释的操作说明，按键盘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>
1
2
3
4
5
6
7
1
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: 女王文章翻译更新
1
2
3
4
5
6
1
2
3
4
5
6

**步骤一：**选取需要的分支名称43c3519，为其简历temp分支

git branch temp 43c3519
1
1

**步骤二：**切换至master主分支上（此时发现前面commit的更改都消失了）

git checkout master
1
1

**步骤三：**将temp的分之内容merge合并到master，master就出现了新改动的代码

git merge temp
1
1

完成以上步骤后即可正常推送，恢复正常

记得完成后删除temp分支，防止出现奇怪问题，删除方法

git branch -d temp
1
1

# 0926分支回退并重新push操作调研

前提：在完成开发后，发现出现不明bug，想回退到初始版本，并push到github，看看是不是玄学bug。

这里面的核心问题是，github-action自动部署与本地部署的效果不一致，一个叫banner-arrow的动态箭头元素竟然无法渲染出正确的位置和动画（action的版本）。

重命名分支操作

git branch -m master old-master #把master改名为old-master
1
1

强制推送至某分支

git push origin develop:master -f #强制将develop分支推送至master分支
1
1

但是还是无法改变原有的master分支，最后还是reset解决的

  1. 先切换至master分支
git reset --hard 要与master合并的分支
1
1

最后研究了一圈发现，可能还是reset最好用，虽然会破坏记录，但是reflog记录并不会消失

# 更新日志

# 失败更新

更新全新返回图标，更新失败，顶栏Emoji表现不佳

git checkout 4f0f3ae
1
1

更新收获：可根据Vue的组建直接更新页面布局，但存在不明BUG的可能性，这可能是由于本地DEV和云端构建运行代码所调用的库以及环境区别较大，很大的制约了静态网站的健壮性。

Bug表现：上线后页面布局异常，手机端出现页面无法触控的问题

# 成功更新

汉堡菜单优化，专栏跳转新页面修改
1
1

汉堡菜单改为“Logo”图标

git checkout 26fae81
1
1

自适应字体大小更新

git checkout 701b96f
1
1

# 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>
1
2
3
4
1
2
3
4

常用标记元素

 .sidebar-button{
      opacity:0; //透明度
      transform: translateX(7px)scale(3.7, 1); //X轴向移动，scale缩放（X轴缩放，Y轴缩放）
      z-index:1; //图层调整
      }
1
2
3
4
5
1
2
3
4
5

# 字体加粗不生效问题

这是一个跨平台特别容易出现的问题，跟支持字体有关，解决之道暂时只能配置更全面的font-family

除非类似app独立封装，否则网页端调用字库，会减慢加载速度，得不偿失。

参考文章[css - 解决 font-weight 无效的问题_个人文章 - SegmentFault 思否](

在线编辑 (opens new window)
最近编辑时间: 2024/01/26 15:18:05
关于Tommy's Blog
本站使用说明

← 本站使用说明→

最近更新
01
本站维护方法(防止遗忘)
01-27
02
Speaking Corpus
04-28
03
Speaking Reference
04-24
更多文章>
Theme by Vdoing | Copyright © 2021-2025 | 备案信息:10086号