当前位置: 首页 > 网络应用技术

同一博客,不同的样式-HEXO替代构造

时间:2023-03-08 14:36:48 网络应用技术

  简要介绍:通过阿里巴巴云开发平台,他迅速创建了Hexo的Sai Bo Punk博客。

  1.创建相关的应用程序模板,请参阅链接:六边博客框架 - 灯份,一个订单部署

  2.创建完成后,您可以检查Github的新Hexo仓库

  1.克隆应用模板到当地

  git克隆 +项目地址

  CD Hexo

  Git Checkout功能/1.0.0

  NPM安装-G Hexo -Cli

  对于熟悉NPM的高级用户,您只能在本地安装Hexo袋。

  NPM安装HEXO

  NPM安装

  NPM运行服务器

  在此处打开浏览器4000端口,并出现默认页面。

  2.案例效果的预览

  3.更改为LCARUS主题

  替换主题也很简单。我们查看伊卡洛斯文档。有两种替换主题的主要方法。一个是安装NPM的主题,另一个是下载源代码以将其放在主题文件夹中。简单性,我们首先采用NPM方法:

  $ YARN添加Hexo-theme-icarus

  使用hexo命令修改LCARUS的主题:

  $ NPX HEXO配置主题ICARUS ICARUS

  启动服务器,不幸的是,我报告了一个错误:

  提示很明显,缺乏依赖性,我们增加了依赖性:

  $ YARN添加bulma-stylus@0.8.0 Hexo-Renderer-inferno@^0.1.3

  尝试重新构建并重新开始,伊卡洛斯主题已经出现:

  等不及要尝试BO PENP样式的主题,非常简单,在_config.icarus.yml文件中修改它:

  #icarus主题变体可以是“默认”或“ cyberpunk”

  变体:Cyberpunk

  尝试建立并重新开始。

  有关详细信息,请参阅此提交以获取详细信息。

  4.自定义配置

  在下面,我们修改配置文件_config.yml和_config.icarus.yml,配置与网站相关的信息。

  它主要包括徽标,Favicon,Navbar的菜单和链接,页脚,捐赠(赞助信息,无用付款渠道注释),小部件。

  在此详细说明,小部件,小部件是页面上各个区域的吊坠。您可以通过配置灵活地更改其位置和特定信息。根据偏好,布局决定使用3列或2列。

  有关特定的修改详细信息,请参阅此提交。

  修改的效果如下:

  5.源代码使用LCARUS主题

  现在有两种方法可以使用伊卡洛斯主题。尽管NPM软件包很简单,但对于ICARUS主题而言,获得更深层次的配置并不容易。特别是在过去,伊卡洛斯始终采用源代码模式。解决方案通过源代码修改,很少提及相应的NPM软件包方法,因此我们还使用源代码方法来促进后续配置。

  首先删除hexo-theme-icarus依赖项,在伊卡洛斯仓库中下载代码,然后在减压后将其复制到主题文件夹中。

  请参阅此详细信息。

  6.配置样本文章

  在下面,我们删除默认的Hello World文章来创建自己的文章。

  请注意头部配置文件的相关信息。在新版本的伊卡洛斯(Icarus)中,需要配置带有附加封面选项的头部图,如下所示:

  标题:“ [翻译]下一个 - 代的前端 - 末端构造工具vitejs中文和英语双语字幕”

  日期:2021/03/08 11:12:25

  类别:

  -前端

  -工具

  标签:

  -vite

  -github

  -翻译

  TOC:true#是否显示目录

  缩略图:'/images/vitet.png'#t

  封面:'/images/vitet.png'#头图

  请参阅此详细信息。

  7.如果文章的内容太长,该怎么办

  首页应显示更多文章。如果文章太长,则用户只会看到同一文章。如果我们只希望用户阅读一些内容怎么办?非常简单,您可以将其添加到MD文件中。添加后,将会有一个“读取更多”按钮,并且在主页上可以看到许多文章。

  请参阅此详细信息。

  8.如何在文章中显示两列

  目前,文章页面仍然与主页相同。这是一个三列布局。为了有效地使用该空间,我希望可以在两列中进行布局。这次,我们需要将_config.post.yml文件添加到icarus源文件夹中,并将其配置为两列:

  小部件:

  #个人资料小部件配置

  

  #在哪里放置小部件,左侧栏或右侧栏

  位置:对

  类型:TOC

  #是显示每个标题的索引

  索引:是的

  #无论是倒塌的副标题

  着色:false

  #要显示的最大标题级别(1-6)

  深度:3

  让我们看一下效果:

  1.上传代码

  git添加。

  git commit -m'添加您的注释'

  git推

  2.部署在日常环境环境中

  一个-Click应用程序部署。在应用程序详细信息页面上的“每日环境”上的“部署”按钮进行一个单击部署。部署状态变为绿色。部署部署后,您可以单击部署网站以查看效果。

  3.在线配置自定义域名在线环境

  创建Hexo应用程序模板链接:https://workbench.aliyun.com/application/front/create?从config = 1&from_github_1_1

  参考:https://juejin.cn/post/6938856324239196167

  原始链接

  本文是阿里巴巴云的原始内容,未经许可就无法重印。