hexo生成靜態(tài)頁面時主頁只顯示dom文本無法正常顯示

? 今天打算將原來在windows電腦上部署的hexo博客給遷移到macbook上，卻遇到了很多問題，在網(wǎng)上找遍了很多卻沒有合適的答案，算是一個踩坑經(jīng)歷，特此記錄。其中最主要的便是，當(dāng)我hexo d -g生成靜態(tài)頁面之后，打開頁面，沒有渲染的主頁，只有dom文本，打開生成的html文件，和顯示在網(wǎng)頁上的一致。

主頁無法顯示的問題

在網(wǎng)頁上的顯示：

{% extends '_layout.swig' %} {% import '_macro/post.swig' as post_template %} {% import '_macro/sidebar.swig' as sidebar_template %} {% block title %}{{ config.title }}{% if theme.index_with_subtitle and config.subtitle %} - {{config.subtitle }}{% endif %}{% endblock %} {% block page_class %} {% if is_home() %}page-home{% endif -%} {% endblock %} {% block content %}
{% for post in page.posts %} {{ post_template.render(post, true) }} {% endfor %}
{% include '_partials/pagination.swig' %} {% endblock %} {% block sidebar %} {{ sidebar_template.render(false) }} {% endblock %}

? 經(jīng)過檢索我現(xiàn)在知乎上發(fā)現(xiàn)了一個類似的問題-hexo頁面無法正常顯示：、

image

解決方案是：

hexo某個版本沒有添加
hexo-renderer-ejs
hexo-renderer-marked
hexo-renderer-stylus
這幾個插件

? 然而當(dāng)我安裝了這個插件時，依然沒有發(fā)生變化，雖然這個答案沒有解決問題，但是卻給了我啟發(fā)，因?yàn)槲疫w移到macbook上的時候，安裝的依賴都是最新的，于是我開始懷疑我的hexo版本問題。當(dāng)我檢查新舊兩個版本的hexo時果然發(fā)生了差異

//輸入hexo -v之后
hexo: 5.0.2
hexo-cli: 4.2.0
os: Darwin 19.6.0 darwin x64
node: 12.18.2
v8: 7.8.279.23-node.39
uv: 1.38.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.16.0
modules: 72
nghttp2: 1.41.0
napi: 6
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1g
cldr: 37.0
icu: 67.1
tz: 2019c
unicode: 13.0

? 下面是我原來windows電腦上的的package.json

  "hexo": {
    "version": "4.2.1"
  },
  "dependencies": {
    "hexo": "^4.2.1",
    ...
  }

? 于是我刪掉了安裝的node_module,修改了package.json的hexo版本

//重新安裝
npm install
//一鍵三連
hexo clean && hexo g && hexo d

? 最終終于顯示了原來的博客主頁，歡迎大家來訪問我的博客

博客圖片

遷移博客的其他問題

? 在我想下載回原來的依賴時，發(fā)現(xiàn)了一些warning，如下：

(node:37667) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:37667) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:37667) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

? 通過在網(wǎng)上搜索，發(fā)現(xiàn)是node版本的問題，我在mac上是用brew直接下載的最新版本v14，然后網(wǎng)上的答案顯示v12版本的node是沒有問題的，所以更新了node版本，解決了問題。

在mac上如何重新安裝某一版本的node

完全卸載本地環(huán)境原來的node

在安裝node前，首先要考慮后續(xù)會不會切換版本，如果需要，必須要求nvm在Node安裝之前

  • 先安裝nvm

  • 在通過nvm安裝自己需要的node

    否則，在nvm安裝之前的安裝的node是不會被nvm管理起來的！

那如果已經(jīng)安裝了node，卻還要使用nvm管理版本的話，怎么辦？我很不幸的告訴你，你需要刪除已安裝的node。

下面是刪除的Node和npm的命令，在終端中執(zhí)行即可。

sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d

下載nvm，使用nvm來管理Node版本

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

此處注意不要使用brew安裝，否則會掉坑。

關(guān)閉終端nvm失效，區(qū)分zsh和bash

對于一般的終端，默認(rèn)是bash窗口，所以在安裝完nvm后，根據(jù)如下圖提示，進(jìn)行操作

image

配置環(huán)境變量(無 .bash_profile)

  1. 添加 .bash_profile在終端鍵入touch ~/.bash_profile

  2. 打開 .bash_profile在終端鍵入open -e .bash_profile

  3. 在 .basn_profile中輸入

    export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

  4. 配置生效

    source ~/.bash_profile

此時就有坑點(diǎn)了，如果你不進(jìn)行以下的操作，你會發(fā)現(xiàn)，node -v命令只會在當(dāng)前窗口生效，而其他窗口node -v會說找不到指令，你可以看看你的終端名稱是否是zsh，這說明我們還需要配置環(huán)境變量

配置環(huán)境變量

  1. 添加 .zshrc在終端鍵入touch ~/.zshrc

  2. 打開 .zshrc在終端鍵入open -e .zshrc

  3. 在 .zshrc中輸入

    export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

  4. 配置生效

    source ~/.zshrc

切換node版本失效

# 將要切換的版本設(shè)置為default
nvm alias default 8.16.0
# 切換版本，這樣在那個窗口都可以使用切換后的版本
nvm use 8.16.0

zsh compinit提示“insecure directories”怎么辦

當(dāng)執(zhí)行source ~/.zshrc之后顯示如下提示：

zsh compinit: insecure directories, run compaudit for list.
Ignore insecure directories and continue [y] or abort compinit [n]?

解決方法如下：

zsh配置的所屬權(quán)限問題。執(zhí)行如下命令修改權(quán)限

$ cd /usr/local/share/zsh
$ sudo chmod -R 755 site-functions

再次執(zhí)行 source ~/.zshrc，如果問題還未解決，這時你就需要修改 site-functions 的所有者

  • OSX 10.9及以下系統(tǒng)執(zhí)行如下命令：
$ cd /usr/local/share/
$ sudo chown -R root:root site-functions

OSX 10.9以上系統(tǒng)執(zhí)行如下命令（user:staff 是 OSX 系統(tǒng)默認(rèn)權(quán)限）：

$ cd /usr/local/share/
$ sudo chmod -R 755 zsh
$ sudo chown -R root:staff zsh

再次執(zhí)行 source ~/.zshrc

終于搞定了

經(jīng)驗(yàn)教訓(xùn)

遷移項(xiàng)目的時候，一定要注意環(huán)境的配置，依賴的版本，依賴不是最新的才是最好用的，最好能夠保持原來的版本號，不要擅自更新?。?！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容