首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >hexo&typora-文章编写

hexo&typora-文章编写

作者头像
hahah
发布于 2022-06-15 11:43:34
发布于 2022-06-15 11:43:34
71000
代码可运行
举报
文章被收录于专栏:爪哇学习日记爪哇学习日记
运行总次数:0
代码可运行

hexo&typora-文章编写

1.图片资源引入问题

​ 日常习惯使用typora编辑器进行编辑,相关的图片引入均用相关路径进行引用(相同路径下构建同名.assets文件夹存储图片信息),这与hexo的一些使用有所差异,也就是说单纯的md内容,通过hexo渲染能够正常解析,但是针对一些资源的引用则需相应调整

解决方案

​ 针对hexo中的图片引入和typora图片引入问题,参考网络资源可有如下解决方案:

方案1:相对路径
<1>借助“文章资源文件夹”概念

​ 在_config.yml配置文件中,通过设定post_asset_foldertrue,开启资源文件的管理功能:当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个与对应文章文件同名的资源文件夹,从而可以通过相对路径进行引用(针对一些自定义的md笔记文件,可通过这种方式作相应的笔记迁移)

<2>调整md文件中图片信息引入的相对路径和引入格式

​ 此处有两种方式控制:借助模板格式引入、借助原生markdown语法构建

借助模板格式引入

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# hexo3 文章中引用资源代码
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

# 基于这种方式针对一些现有的笔记调整成本太高,且没有办法很好的适配typora(无法通过typora预览图片效果)

借助原生markdown语法构建(需引入npm install hexo-renderer-marked插件)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 1.项目引入hexo-renderer-marked插件
npm install hexo-renderer-marked

# 2.修改_config.yml配置文件
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

# md文件中使用![]()引用图片信息(![图片备注](图片相对路径))
PS:此处需注意偏好设置中的图片相对路径设定,如果设定规则和文章资源文件夹生成规则相同("同名概念",则可直接将md中的引用的图片路径(参考格式:文章名/图片.png)中的"文章名/"全文替换为空,从而保证项目发布部署的主页和文章能够正常引用到图片信息

# 由于在之前基于typora编辑md文档设定资源生成路径为"同名文件夹.assets",因此如果是作相应的迁移,则需依据hexo引用的规则复制一份与文章title"同名"的资源文件夹,随后相应作url路径全文替换,对应完整步骤说明如下:
a.hexo博客项目引入hexo-renderer-marked插件并修改_config.yml配置文件
b.将引用的图片资源文件复制一份到与文章title"同名"的资源文件夹(通过检查typora偏好设置查看图片资源路径)
c.全文替换URL引用路径,只保留"图片名称"

自定义插件实现转化(编写插件、注册插件、发布插件、引入插件)

​ 预览图片路径和部署图片路径不同,也可考虑通过自定义插件实现转化(可参考博客):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
![example](postname/example.jpg) --> {% asset_img example.jpg example %}
![example](postname.assets/example.jpg) --> {% asset_img example.jpg example %}

​ 有些方式通过设定md头部配置项中的typora-root-url参数从而保证本地显示和服务器上的根目录一致,但这种不适用于原有typora通过相对路径引用的文件,需结合实际场景考虑

方案2:绝对路径

​ 采用“图床”概念,项目中通过绝对路径引入图片信息。可借助阿里云、腾讯云、路过图床、七牛云等构建自定义图床进行引入

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-01-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
hexo博客中如何插入图片
Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令。
不作声
2020/10/30
4.5K0
hexo博客中如何插入图片
Hexo + Typora + 开发Hexo插件 解决图片路径不一致
图片文件保存路径:./${filename}即保存到与 当前正在编辑的文件名 相同的同级文件夹下
yiyun
2022/04/01
2.1K0
Hexo + Typora + 开发Hexo插件 解决图片路径不一致
hexo 图片显示问题及使用typora设置图片路径
使用hexo生成静态资源后,由于url的问题会出现图片加载的问题,现在网上的文章及官方的解决方案大概分为三种:
caoayu
2020/09/23
5.6K0
hexo 图片显示问题及使用typora设置图片路径
Hexo -4- 向文章添加图片的方法
这种相对路径的图片显示方法在博文详情页面显示没有问题,但是在首页预览页面图片将显示不出来。如果希望图片在文章和首页中同时显示,可以使用标签插件语法。
为为为什么
2022/08/04
2K0
Hexo -4- 向文章添加图片的方法
hexo 添加图片,音乐,链接,视频
刚刚搭博客,很多都不懂,就连插入图片的路径问题都把我整的要命。(我用的 Sublime Text 3 编译器) 下面讲讲:
Cell
2022/02/25
1.3K0
hexo 添加图片,音乐,链接,视频
Getting Started with Hexo
本篇文章记录Hexo 安装,部署以及日常使用的流程,最终实现: 通过cmd输入4行命令将本地md文件更新到网络上的个人博客
打铁读书郎
2024/04/11
1500
Hexo博客写作与图片处理的经验
Hexo是一款非常优秀的开源博客管理工具,所有的博客文档都通过Markdown格式编写,Markdown编辑器有很多,原来的时候我经常用Evernote编写,但是Evernote写Markdown经常会出现输入法响应缓慢的情况。最近我从Evernote转到了Typora,想到哪里就能够敲字写到哪里,而且输入后马上就能够转换为友好的显示样式,体验非常好。
大江小浪
2020/03/18
3.2K2
Hexo博客写作与图片处理的经验
基于hexo的博客项目基本操作
​ 在指定博客项目中的themes文件夹中设定指定名称的文件夹(主题名称),随后在_config.yml文件中修改theme设定(默认是landscape)
hahah
2022/06/14
7520
Markdown 图片插入官方方法
这是我在之前的blog中使用的,莫名其妙的很好用,但是不适合现在的版本,所以 pass。
杨丝儿
2022/03/18
6860
Markdown 图片插入官方方法
在Hexo中引入本地图片的实现
第一步:修改项目根目录下的_config.yml文件参数post_asset_folder值为true。
编程随笔
2022/12/29
2.3K0
「Hexo On Win10」新手搭建博客过程
2017-04-11 by Liuqingwen | Tags: Hexo Web | Hits
IT自学不成才
2019/01/07
7660
在 hexo 中无痛使用本地图片
1 起因 在 hexo 中使用本地图片是件非常让人纠结的事情,在 markdown 里的图片地址似乎永远无法和最后生成的网页保持一致。 这些问题使得我一度不愿意使用本地图片而选择用图床,但被移动运营商无耻的横条广告逼得打算上 https,图床只支持 http 就成了问题。 hexo 下插入图片现在大概有几个方案 1.1 放在根目录 早期大部分的方案是把图片放在 source/img 下,然后在 markdown 里写 ![img](/source/img/img.png) 。显然这样在本地的编辑器里完全不能
用户1148881
2018/01/15
2.8K0
HEXO系列教程 | 发布文章 | 解决静态图片路径错误问题 | 小白向教程
HEXO安装:HEXO系列教程 | 使用GitHub部署静态博客HEXO | 小白向教程
夜梦星尘
2024/08/20
3990
HEXO系列教程 | 发布文章 | 解决静态图片路径错误问题 | 小白向教程
用Hexo制作自己的静态博客
本文主要介绍了如何使用Hexo在GitHub Pages上搭建一个静态博客,从Hexo的基本配置、博客目录结构、常用插件和主题以及发布博客的过程等方面进行了详细阐述。同时,还通过实际例子演示了如何在Hexo中添加和配置Disqus评论系统,并使用标签插件对静态资源进行处理。最后,介绍了如何发布博客到Github Pages上,并配置了对应的URL。通过本文,读者可以快速掌握如何使用Hexo搭建一个静态博客并发布到GitHub Pages上。
乐百川
2018/01/09
1.2K0
用Hexo制作自己的静态博客
Hello Hexo
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
用户2491699
2018/08/02
3720
Typora的最后一个免费版本MD编辑器「建议收藏」
title: Typora的最后一个免费版本 date: 2022-05-11 16:39:04 tags: MD categories: 软件
全栈程序员站长
2022/11/09
1K0
基于docsify+github+typora构建个人知识库
​ docsify,一款神奇的文档网站生成器,可以快速生成文档网站。不同于 GitBook、Hexo 的地方是,它不会生成静态的 .html 文件,所有转换工作都是在运行时。如只需要创建一个 index.html 就可以开始编写文档并直接部署在github pages上(小清新的样式,干净简洁)
hahah
2022/08/30
1K0
hexo遇到的坑
首先 hexo 的安装,git 安装,往上一大堆,废话不多说,可以参考 http://www.cnblogs.com/highway-9/p/5985893.html,下面总结一下遇到的坑
零式的天空
2022/03/21
4020
解决hexo图片不展示问题
1.更改hexo配置文件 vim _config.yml #配置_config.yml里面的post_asset_folder:false 设置为 true 如图 2.安装npm插件 npm install https://github.com/CodeFalling/hexo-asset-image --save 3.清除hexo缓存 hexo clean 4.创建新的文章 hexo new "XXA" #创建完文章后,会发现 _post 目录下多出一个XXA的文件夹,把图片放入该文件夹中 5.然
cywhat
2022/11/22
2.8K0
解决hexo图片不展示问题
搭建Hexo博客-第3章-Markdown语言介绍及编辑博客
大家好,如果你按照上一篇文章的内容安装并部署了博客,那么现在在你的主页上应该有一篇 Hello World,并且博客目前使用的主题是默认的 landscape ,现在我就来教你如何创作自己的文章。
CrystalGabrielle
2023/02/25
6430
相关推荐
hexo博客中如何插入图片
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验