码迷,mamicode.com
首页 > 其他好文 > 详细

从零搭建HEXO博客 修改默认主题/参数/favicon 替换个人主页

时间:2019-11-10 12:00:21      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:jpg   表示   下载   文字   设置   转换   tle   安装过程   version   

准备:搭建环境

大致分为以下两步:

  1. 安装Node.js
  2. 安装git

配置Node.js环境

下载Node.js安装

  1. Windows Installer 32-bit
    https://nodejs.org/dist/v4.2.3/node-v4.2.3-x86.msi
    2.Windows Installer 64-bit
    https://nodejs.org/dist/v4.2....

保持默认设置,安装结束后,按win+R,在运行窗口中输入cmd,回车,打开命令行界面。
输入:

node -v
npm -v

如果结果如下图所示,那么说明你已经安装成功,如果不正确,那么就需要你回头检查自己的安装过程。
技术图片

配置Git环境

下载Git安装文件:
git官网下载
一路默认选项,安装完后打开命令提示符,输入:

git --version

技术图片

如图,则表示已经安装成功。


安装Hexo

在你想要搭建博客的目录下创建一个文件夹,比如我这里在E盘创建一个文件夹,叫test,进入test文件夹,右键,选择Git Bash Here
技术图片

输入:

npm install -g hexo-cli

技术图片
可能你会看到一个WARN,但是不用担心,这不会影响你的正常使用

接着输入:

npm install hexo --save

安装好后我们来检查一下Hexo是否安装完毕,在命令行输入:

hexo -v

技术图片
如果你看到了如图文字,那么说明已经安装成功了。

接着初始化Hexo
输入:

hexo init

npm install

然后输入:

hexo s //也可以输入hexo server

启动服务
技术图片

在浏览器输入:http://localhost:4000/

技术图片
你就会看到默认主题博客界面


那如果我们不喜欢这个主题怎么办呢?
没关系,Hexo给我们提供了各式各样的主题,我们可以在https://hexo.io/themes/中寻找...,更改方法都是一样的。

下面我以archer主题举例,覆盖默认主题。

先按 ctrl+c 停止服务
在命令行输入

npm install hexo-generator-json-content --save 
git clone https://github.com/fi3ework/hexo-theme-archer.git themes/archer
注意:如果你的命令窗口无法使用ctrl+V粘贴,可能是因为命令窗口的快捷键被改变了,你可以尝试shift+insert来进行粘贴。

100%即安装成功。
接着打开根目录下的_confit.yml文件(如果没有打开yml文件的软件,你可以使用记事本打开)
查找theme字段(如果找不到你可以按住ctrl+f进行查找),修改属性为archer

注意:theme:后的空格是必须的,否则运行服务时会报错
技术图片

修改网页内容

如果你想修改网页的内容,那么就直接找到源文件进行修改,我在这里举个例子,如果你想修改主页的内容,找到目录。
主页是放在public文件夹下的index.html文件
打开
技术图片
比方说,我想改主标题fi3ework’s Studio.
直接在文件中找到对应的文字
技术图片
我们可以看到这个div中有标明文章标题与副标题,直接修改,刷新页面即可。
其他元素使用相同的方法都可以修改。
技术图片][11]
像这种超链接跳转的修改,在文件中找到<a> 直接把href属性的值改变即可。


修改网站标志

同样,我们在index.html找到这行代码
技术图片
我们可以发现,网页的图标被命名为favicon.png
如果我们想要替换掉这个图标,我们可以创建一个文件夹,把自己的.ico文件放到这个文件夹里,比如我这里创建一个icon文件夹
技术图片
修改路径(通常图标的格式为ico,如果你的图片为png格式或jpg格式,我们可以到这个在线转换格式的网站把图片转换为ico格式 http://tool.lu/favicon/


替换个人主页

如果你想用自己写的页面作为主页,那么把文件命名为index.html,覆盖掉public目录下的index文件即可。
把原本的index.html放到其他目录上,在新主页中设置一个超链接跳转就可以嵌套了。

从零搭建HEXO博客 修改默认主题/参数/favicon 替换个人主页

标签:jpg   表示   下载   文字   设置   转换   tle   安装过程   version   

原文地址:https://www.cnblogs.com/qianduanwriter/p/11829158.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!