前言
个人博客是程序员的第二张简历。如果你有酷炫的个人网页，面试官对你的好感度会蹭蹭蹭往上涨。
说到博客大家一定都不陌生，不管你是深耕职场多年的老鸟，还是在学校努力学习的小鸟，应该都有过一段“装扮”博客的经历，比如：放上喜欢的图片、添加炫酷的交互、换上 DIY 的博客主题等等。还有的利用github或者coding来搭建免费的个人静态博客，更有甚者或者土豪，直接购买服务器搭建自己的个人博客......但不管再怎么“打扮”，也跳脱不出平面的“凡胎”。
今天宏哥给大家带来的是一款开源的 3D 博客项目，实话说我第一次访问这个博客的时候都惊呆了，颠覆了我对博客的认知。进去后需要通过操控一颗3D 的小地球，自己“找到”文章才可以阅读，特别有意思！这可能就是传说中的寓教于乐吧，这种存在于神话中的学习方式，宏哥今天带你来体验一把。说了这么多废话，3D博客先一睹为快，如下图所示：
在线：0xfloyd.com/
接下来，宏哥本来是打算本文会先介绍如何在本地把项目运行起来，然后讲解其源码和相关技术，最后教你如何修改代码把自己的博文放进去，升级到 3D 博客！但是由于项目需要搭建node.js的开发环境，需要宏哥去下载安装[Node.js](Node.js — 在任何地方运行 JavaScript (nodejs.org)) 而且项目需要对应的Node.js版本特别啰嗦麻烦，而且宏哥只是想体验一下3D博客，又不做深入的研究开发，在本地搭建这么一套环境有点不划算，刚好“豆包Marscode”推出正文活动：juejin.cn/post/738499…宏哥想到这不是一举两得的好事吗，想也不用想了直接拍脑袋那就在“豆包Marscode”上来实践一下吧。
1.注册与登录
1.首先，我通过提供的链接 sourl.cn/vKjHKF 成功注册了豆包MarsCode平台。豆包MarsCode作为一个集成开发环境（IDE），提供了丰富的编程资源和便捷的云开发体验，非常适合快速搭建和测试项目。在注册并登录后（这里比较简单宏哥就不赘述了），宏哥这里直接用稀土掘金的账户，直接关联登录，如下图所示：
2.登录之后，直接进入了AI IDE的集成开发界面，如下图所示：
2.创作项目
1.登录上豆包MarsCode，点击左上角的“+项目”按钮。如下图所示：
2.点击左上角的“+项目”按钮后，进入项目新建页面。如下图所示：
3.因为宏哥的代码是直接从GitHub中直接pull的代码，所以选择“导入Git代码仓库”。如下图所示：
4.因为宏哥是从自己的代码仓库导入到豆包MarsCode ，因此选择我的代码仓库，如下图所示：
5.点击“授权获取仓库”，如下图所示：
6.点击“授权获取仓库”后，登录你自己注册的github账号，如下图所示：
7.登录GitHub账户后，进行授权，点击“Install & Authorize”，如下图所示：
8.授权后，就可以把GitHub仓库代码和豆包MarsCode的代码进行pull和push了。
9.我们通过选择“从URL导入”，填写GitHub仓库地址，点击“创建”按钮，如下图所示：
10.点击“创建”按钮后，将GitHub仓库代码导入豆包MarsCode的AI IDE中，如下图所示：
3.安装步骤
话不多说先跑起来再说，只需 2 步。命令如下：
# 1.安装依赖（仅第一次需要）
npm i
# 2.运行
npm run dev
4.运行效果
首先，我们来看看这个博客长什么样子：
4.1open webview
1.点击“Networking”，如下图所示：
2.点击“open webview”。在IDE里（右边的窗口）即可预览效果，如下图所示：
4.2open browser
1.点击“Networking”，如下图所示：
2.点击“open browser”，即可在浏览器打开，或者复制URL，在浏览器也可以访问预览效果。如下图所示：
5.小结
好了，时间不早了，今天就分享到这里！感谢您耐心的阅读。对了，如果你不需要进行GitHub仓库代码和豆包MarsCode的AI IDE平台代码进行交互，就是想简单试一下，那就不需要授权，直接URL拉去代码，指定node版本，运行代码就可以看到效果了。
5.1中文乱码
因为之前都是英文没有乱码，但是在创建博客的时候可能会出现中文乱码。开始宏哥以为是编码问题，查资料也加上了utf-8的编码格式，但是仍然出现中文乱码，后来查了半天才知道是之前的字体库不支持中文，因此换成支持中文的字体库就可以了。具体怎么换宏观就不在这里赘述了，可以查一下资料，如果实在不会的，可以给宏哥评论区留言，看到会及时回复你的。
现在，我们有了创建一个模拟真实物理世界的、可交互的3D应用的所有工具。用你富有想象力的头脑，创造美的愿望来打造属于你的3D应用吧！在互联网时代，任何人都是终身学习者。
5.2 node版本问题
5.2.1降低node版本
1.宏哥拉取完代码，运行时出现this[kHandle] = new _Hash(algorithm, xofLen)的错误，如下图所示：
2.查了资料知道是因为node的版本问题。
出现这个问题是node.js 的版本问题，因为 node.js V17开始版本中发布的是OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响。故此以前的项目在使用 nodejs V17以上版本后会报错。而github项目很多都是之前版本的npm，所以运行时候会出现这个问题。
AI IDE的集成开发平台默认是最新的（20.15.0）。如下图所示：
宏哥一看，这怎么搞呀，两个角度：一个是需要修改代码，适应高版本的node，另一种办法就是降低node版本，但是AI IDE的集成开发平台没有提供可以选择node版本，宏哥就抱着试一下的心态，没有想到竟然可以，那这样看来就比较灵活了，你自己可以选择安装代码运行的node版本。
2.灵活使用你需要的node版本进行运行。使用如下命令即可。
nvm install node # 安装最新版本
nvm install 14 # 安装指定版本14
nvm use 14 # 切换到指定版本14
3.使用上边的命令，将AI IDE的集成开发平台换成14，如下图所示：
4.运行代码成功，如下图所示：
5.2.2设置环境变量
这个问题涉及到的是在使用npm运行开发服务器时遇到的错误。从给出的错误信息来看，问题似乎与Node.js的加密库有关，具体是“数字信封算法（digital envelope）”不受支持的问题。这可能是因为你正在使用的Node.js版本与某些依赖库或系统环境不兼容导致的。
设置环境变量：
有时候通过设置环境变量可以解决这个问题。尝试在启动项目之前设置以下环境变量：
export NODE_OPTIONS=--openssl-legacy-provider
将上述命令添加到你的 shell 配置文件中（如 .bashrc 或 .zshrc），或者在启动项目之前手动运行。宏哥按以上的方式试了，也成功了。如下图所示：
6.扩展
有兴趣的童鞋们可以看看这位大佬的3D应用，上边宏哥说的算是入门吧，下边这才算是深入研究。但是宏哥没有运行成功，由于时间问题，宏哥私下研究。有知道或者运行成功可以留言哈！！！
以上就是本文的所有内容，如果您觉得这篇文章写得还不错，就请给我点一个赞，您的支持就是我更新的动力。
