ゼロから構築HEXOブログにデフォルトのテーマ/パラメータ/ファビコン交換プロファイルを変更します

準備:建築環境

大雑把に以下の2つのステップに分かれて:

  1. Node.jsのをインストールします。
  2. gitのをインストールします。

設定Node.jsの環境

ダウンロードNode.jsのインストール

  1. Windowsインストーラの32ビット
    https://nodejs.org/dist/v4.2.3/node-v4.2.3-x86.msi
    2.Windowsインストーラの64ビット
    https://nodejs.org/dist/v4.2 .. 。..

インストールが終了すると、デフォルトの設定を維持し、キーを押し勝利+ R、操作画面の入力cmdと入力し、コマンドラインインターフェースを開きます。
入力:

-vノード
NPM -v

結果は以下の通りであるならば、それは、その後、インストールを確認するために戻って行く必要が正しくない場合は正常にインストールされていることを示しています。
![ここに書かれた絵の説明](http://img.blog.csdn.net/20171031155554140?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity /東南アジア)

設定Gitの環境

:インストールファイルGitのダウンロード
ダウンロードするにはgitの公式サイト
、デフォルトのオプションにすべての道をインストールした後、コマンドプロンプトを開きます。

gitの--version

![ここに書かれた絵の説明](http://img.blog.csdn.net/20171031160342985?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity /東南アジア)

示されているように、それはすでに正常にインストールされています。


インストールHexo

フォルダのブログを構築したいディレクトリに作成された、例えば、私はテストと呼ばれるEドライブは、テスト用フォルダを入力して、フォルダを作成し、右、選択ここでGitのバッシュを
![ここに書かれた絵の説明](http://img.blog.csdn.net/20171031160722829?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity /東南アジア)

入力:

NPM -g hexo-CLIをインストール

![ここに書かれた絵の説明](http://img.blog.csdn.net/20171031160914995?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity /東南アジア)
たぶん、あなたはWARN表示されますが、心配、これはあなたの通常の使用には影響しませんしません。

そして、次のコマンドを入力します。

npm install hexo --save

我々は、コマンドラインで、Hexoがインストールされているかどうかをチェックするためにインストールした後:

hexo -v

![这里写图片描述](http://img.blog.csdn.net/20171031161416435?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
示すように、テキストが表示された場合、それが正常にインストールされています。

そして、初期Hexoの
入力:

hexoのinit

NPMインストール

そして、次のコマンドを入力します。

hexo s //也可以输入hexo server

启动服务
![这里写图片描述](http://img.blog.csdn.net/20171031161746300?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

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

![这里写图片描述](http://img.blog.csdn.net/20171031162600040?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
你就会看到默认主题博客界面


那如果我们不喜欢这个主题怎么办呢?
没关系,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:后的空格是必须的,否则运行服务时会报错
> ![这里写图片描述](http://img.blog.csdn.net/20171031163511004?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

修改网页内容

如果你想修改网页的内容,那么就直接找到源文件进行修改,我在这里举个例子,如果你想修改主页的内容,找到目录。
主页是放在public文件夹下的index.html文件
打开
![这里写图片描述](http://img.blog.csdn.net/20171031164309136?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
比方说,我想改主标题fi3ework’s Studio.
直接在文件中找到对应的文字
![这里写图片描述](http://img.blog.csdn.net/20171031164530200?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
我们可以看到这个div中有标明文章标题与副标题,直接修改,刷新页面即可。
其他元素使用相同的方法都可以修改。
![![这里写图片描述](http://img.blog.csdn.net/20171031164714661?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)][11]
像这种超链接跳转的修改,在文件中找到<a> 直接把href属性的值改变即可。


修改网站标志

同样,我们在index.html找到这行代码
![这里写图片描述](http://img.blog.csdn.net/20171031170245795?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
我们可以发现,网页的图标被命名为favicon.png
如果我们想要替换掉这个图标,我们可以创建一个文件夹,把自己的.ico文件放到这个文件夹里,比如我这里创建一个icon文件夹
这里写图片描述
修改路径(通常图标的格式为ico,如果你的图片为png格式或jpg格式,我们可以到这个在线转换格式的网站把图片转换为ico格式 http://tool.lu/favicon/


替换个人主页

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

おすすめ

転載: www.cnblogs.com/qianduanwriter/p/11829158.html