Markdown 拓展-Hexo 搭建博客(下)

简介: 自定义配置其实就是一个迁移过程,将配置和文章这两块内容记住修改点,然后迁移到新项目即可。_config.ymltitle: Blogs of acc8226description: a personal website of acc8226author: acc8226## 中文简体 zh-CN, 可以选择更改为enlanguage: zh-CNtimezone: Asia/Shanghai# 其中 :category 取目录,post_title 则去取文章中的titlepermalink: :category/:post_title/## updated_op

自定义配置


其实就是一个迁移过程,将配置和文章这两块内容记住修改点,然后迁移到新项目即可。


_config.yml

title: Blogs of acc8226
description: a personal website of acc8226
author: acc8226
## 中文简体 zh-CN, 可以选择更改为en
language: zh-CN
timezone: Asia/Shanghai
# 其中 :category 取目录,post_title 则去取文章中的title
permalink: :category/:post_title/
## updated_option supports 'mtime' 使用文件的最后修改时间, 'date' 使用 date 作为 updated 的值。可被用于 Git 工作流之中, 'empty'
updated_option: 'date'
# 代码高亮
highlight:
  enable: true
  line_number: true
  auto_detect: true
# 分页
index_generator:
  path: ''
  per_page: 5
  order_by: -date


_config.next.yml 主题设置

# 数学公式的支持
math:
  every_page: true
# 目前只开启 mathjax
  mathjax:
    enable: true
    tags: none
  katex:
    enable: false
    copy_tex: false
# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: #/images/avatar.gif
  # If true, the avatar will be dispalyed in circle. 
  rounded: true
  # If true, the avatar will be rotated with the cursor. 鼠标放在头像上时是否旋转
  rotated: true
social:
  GitHub: https://github.com/acc8226 || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  Weibo: https://weibo.com/u/1846300870 || fab fa-weibo
# 修改页脚
footer:
  # 网站开始时间
  since: 2018
  icon:
    # If you want to animate the icon, set it to true.
    animated: true
  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright: acc8226<br/><a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"><img src="https://www.upyun.com/static/img/%E6%A0%B7%E5%BC%8F%E5%9B%BE.7cf927c.png width='34%' "/></a>


  1. hexo-src 构建项目的地址


https://codeup.aliyun.com/5eacd74338076f00011bc59e/hexo-src.git


  1. 发布 hexo 博客的· 云效 Flow


https://flow.aliyun.com/pipelines/1001720/current


构建工作

cnpm install hexo-cli -g
cnpm install
hexo clean
hexo g


代码上传, 我这里写了 2 个版本。可以根据需要选其一。


强制上传版

git config user.name "flow"
git config user.email "flow@feipig.fun" 
cd public 
git init
git add . 
git commit -m "force push by flow"
git push --force  "https://${userName}:${accessToken}@${hostName}/${userName}/${repoPath}" master


基于上版更新条记录版

git config --global user.name "flow"
git config --global user.email "flow@feipig.fun"
git clone "https://${userName}:${accessToken}@${hostName}/${userName}/${repoPath}"
cd ${userName}/
git rm -rf .
cp -r ../public/* ./
git add .
git commit -m "committed by flow"
git push origin master


  1. 使用 gitee page 的发布项目


新建目标项目:https://gitee.com/kaiLee/kaiLee.git


我这里可以使用  username + accessToken 方式 clone 等操作。提取一系列私密变量后

userName kaiLee
accessToken 70e185c4cc2d56418e1d2c8385bca1b7
hostName gitee.com
repoPath kaiLee.git


改造成了这样:

git clone https://${userName}:${accessToken}@${hostName}/${userName}/${repoPath}


新建文章示例


通过命令行创建:


或直接创建目录和文件:


  1. 建立 \source_posts\demo\demo.md


  1. 键入以下内容

---
title: demo-title
date: 2020-12-12 17:15:55
categories:
- foo
- bar
---


根据 post.md 的格式

---
title: {{ title }}
date: {{ date }}
tags:
---


next 主题添加 categories 和 tags


$ cd hexo-site
$ hexo new page tags


编辑新页面并将类型更改为标签,主题将在此页面中自动显示标签云。页面内容如下:

title: Tags
date: 2014-12-22 12:39:04
type: tags
---


添加 categories 则是类似的方法

$ cd hexo-site
$ hexo new page categories


编辑新页面并将类型更改为标签,主题将在此页面中自动显示标签云。页面内容如下:

title: categories
date: 2014-12-22 12:39:04
type: categories
---


添加 about


next 主题添加 404 页面



自定义404页


在终端中,切换到站点根目录的源文件夹。创建一个名为404的新文件夹,然后在其中创建一个新页面:


$ cd hexo-site
$ hexo new page 404


如果你想启用公益404(腾讯在中国提供的服务) ,请编辑404/index.md,像这样:

---
title: '404'
date: 2014-12-22 12:39:04
comments: false
---
<script src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
        charset="utf-8" homePageUrl="/" homePageName="Back to home">
</script>


通过编辑主题配置文件在菜单中添加404:

menu:
  home: / || fa fa-home
  archives: /archives/ || fa fa-archive
  commonweal: /404/ || fa fa-heartbeat


添加本地搜索



Local 本地Search 搜寻

$ npm install hexo-generator-searchdb


添加依赖

# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false


期间遇到的一些问题



部署 Gitee Pages 常见问题


如何创建一个首页访问地址不带二级目录的 pages,如ipvb.gitee.io?


你需要建立一个与自己个性地址同名的仓库,如 https://gitee.com/ipvb 这个用户,想要创建一个自己的站点,但不想以子目录的方式访问,想以ipvb.gitee.io直接访问,那么他就可以创建一个名字为ipvb的仓库 https://gitee.com/ipvb/ipvb 部署完成后,就能以 https://ipvb.gitee.io 进行访问了。


当要部署的项目与自己的个性地址不一致时,部署完成后存在一些资源访问404?


答:当需要部署的仓库和自己的个性地址不一致时,如:https://gitee.com/ipvb/blog ,生成的pages url 为 https://ipvb.gitee.io/blog ,而访问的资源404,如

https://ipvb.gitee.io/style.css 。这是因为相应配置文件的相对路径存在问题导致的,生成的资源 url 应该为 https://ipvb.gitee.io/blog/style.css 才对。对于不同的静态资源生成器,配置如下:


Hexo 配置文件_config.yml的url和root修改如下:

url: https://ipvb.gitee.io/blog
root: /blog


当如果是建立与自己个性地址同名的仓库,是不会存在这个问题的。比如


https://kailee.gitee.io/ 这个地址。




目录
相关文章
|
Python
Markdown 拓展-Docsify 主题美化
docsify-themeable - A delightfully simple theme system for docsify.js https://jhildenbiddle.github.io/docsify-themeable/#/
1152 0
Markdown 拓展 - 对数学公式的支持
MathJax 和 LaTeX 数学公式 支持 MathJax 是一款运行在浏览器中的开源数学符号渲染引擎,使用MathJax可以方便的在浏览器中显示数学公式,不需要使用图片。目前,MathJax可以解析 Latex、MathML 和 ASCIIMathML 的标记语言。MathJax 项目于 2009 年开始,发起人有 American Mathematical Society, Design Science等,还有众多的支持者,个人感觉MathJax会成为今后数学符号渲染引擎中的主流,也许现在已经是了。本文接下来会讲述 MathJax 的基础用法,但不涉及MathJax 的安装及配置。
312 0
Markdown 拓展 - 对数学公式的支持
|
存储 负载均衡 JavaScript
Markdown 拓展-免费图床/网盘方案
前言 最近时常在 gitee.io 上写一些 markdown 格式的文章,所以亟需获取免费的图床服务。要求是最好还能自定义文件名。
831 0
Markdown 拓展-免费图床/网盘方案
|
XML 前端开发 JavaScript
Markdown 拓展-Docsify 构建接口文档
优点:使用 markdown 编写,docsify 作为支撑。快速高效,若搭载搜索功能,功能较为完善。且可部署在内网环境。 缺点:不支持直接点击按钮进行 HTTP 请求,需要手动粘贴参数到 POSTMAN 等工具。 Docsify 初始化 & 运行
130 0
Markdown 拓展-Docsify 构建接口文档
|
缓存 JavaScript 开发工具
Markdown 拓展-Hexo 搭建博客(上)
前言 一直想搭建个人网站, 当我了解到 hexo 是一款快速、简洁且高效的博客框架,我就迫不及待想尝试下。
109 0
|
缓存 资源调度 JavaScript
Markdown 拓展-使用 vue.press 生成网站
介绍 VuePress V2 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown在新窗口打开 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。
196 0
|
JavaScript 前端开发
Markdown 拓展-Docsify / 博客园加特效
文字特效 <script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("❤学习","❤奥利给","❤干就完事","❤一giao我里giaogiao"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x =
106 0
|
数据可视化 开发工具 uml
Markdown 拓展:Gitlab/Github 开启 UML 图支持
为什么需要它 一些可视化工具再给我们带来直观性的同时,也增加了操作的难度,需要精细地调整组件的大小和样式,更多的时候,我们不是为了写一份漂亮的报告而画流程图,只是需要便捷地向他人分享自己的 idea,在这样的需求下,代码生成流程图显然更适合。
743 0
|
1月前
|
程序员 Linux iOS开发
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
100 1
|
1月前
《使用「Markdown」编辑器的那些天 |CSDN编辑器测评》
《使用「Markdown」编辑器的那些天 |CSDN编辑器测评》
33 0