如何用Markdown发一篇文章

最新推荐文章于 2024-09-16 11:44:25 发布

Anychew

最新推荐文章于 2024-09-16 11:44:25 发布

阅读量1.2k

点赞数 1

文章标签： github

本文链接：https://blog.csdn.net/anychew/article/details/123482162

版权

选择Markdown工具

本文推荐两款，Obsidian是一直在用的，笔记之间的软链功能特别好用，很容易将不同的知识串联起来， Typora真的非常好用界面也很简洁，唯一缺少Obsidian软链接功能，另外需要购买正版所以我最终放弃了

Obsidian
软件有开源社区，主题多插件多，适合动手能力强喜欢折腾的同学

Typora
界面简洁可以直接在预览模式下修改，但是软件收费，另外没有手机版

学习Markdown教程

Markdown是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版
如果会Word就一定会用Markdown，而且用完之后就回不去了
特点：

编辑模式和渲染(阅读)模式快速切换，在发布前就可以看到网页上呈现的效果
支持同步，Obsidian支持手机、电脑同步防止资料丢失，我用的是Win10+iCloud同步
All in One，所有笔记或者文章只需要一个软件管理
图文兼容性强，通过图床功能将本地图片或截图实现自动上云，能兼容各种文本格式（标题段落\强调引用\表格列表\代码公式\待办事项\转义字符内嵌HTML\表情❤️，从Emoj网站复制：📙 😃💁👌🎍😍）

例如，要表示标题，只须在短语前面添加一个#号即可（例如， # 标题1）。或者要加粗，只须在短语前后各加两个星号即可（例如，**this text is bold**）

使用PicGo+Gitee(码云)搭建免费图床

Gitee图片限制1M以下，如果超过建议重新截图或者用画图工具压缩

新建图床仓库

打开Gitee官方网站（必须先注册，实名认证），进入你的个人仓库界面，新建仓库（可以参考另外一篇文章），如何新建仓库的详细步骤我就不说了，相信搭建都会，直接上一张图，图中有文字说明：

新建仓库

设置模板

然后点击创建即可。

设置私人令牌

设置 -> 私人令牌 -> 生成新令牌

配置Gitee图床

1.首先就是需要软件PicGo，自行下载然后进行安装。
2.接着打开软件，点击软件界面中的插件设置，然后进行搜索：输入内容：picgo-plugin-gitee，你会发现，有两个插件，我选择的是gitee-uploader 1.1.2。然后选择图中所指向的插件。

即可3.安装完成后，重启PicGo应用，图床设置选项就会出现一个Gitee图床，然后进行点击，进入下面的页面，记得设置为默认图床：

属性选项说明：

url：这里填写码云官方的网址
owner：填写你的用户名
repo：填写你的图床仓库名称
path：图片存储路径
token：填写上面教程中你设置的私人令牌
message：不需要填

上传测试

经测试，就上传速度而言，Gitee图床与Github图床相比，Gitee图床略胜一筹。毕竟是国内的，速度相比于GitHub好一点。

使用方法

1、人工上传后在相册里直接复制链接，粘贴到Markdown里面

2、自动将本地图片从Markdown通过PicGo自动上传到Gitee上，同时生成图片链接

如果安装了Obsidian，则需要安装一款插件，配置PicGo的监听地址、端口

如果安装了Typora，在软件里面设置-图像-插入图片时选择-上传图片，接着在下方配置上传服务为PicGo,PicGo的安装路径

通过Markdown发布文章

发布到个人博客上

将MarkDown文件从本地路径拷贝到Git项目上去，然后在粘贴Md文件的路径下右键打开Git Bash Here，输入命令hexo g && hexo d，如无报错则表示发布成功，最后在Gitee Pages内更新后完成😇
接下来发布交给Hexo

发布到微信公众号上

微信公众号不支持Markdown，没关系我们将MarkDown编辑好的文章复制到：Md2All (aclickall.com)，通过转换后再复制转换后的文章粘贴到微信文章编辑器内，预览没问题后直接发布

自己留着慢慢欣赏

One More Thing

页面排版优化

通过Hexo发布到个人博客上，如果对Hexo自带的主题不满意，可以再接着看下去
从Hexo主题里面可以找到自己喜欢的，继续美化页面，比如我用的Butterfly模版，博客的格式如下

在文章前面添加以下信息，可以在网页呈现图片预览\分类\标识

写法说明：

写法	解释	举例
title	【必需】文章标题	如果用Markdown工具发一篇文章

date 【必需】文章创建日期 2022-01-23 17:46:23 updated 【可选】文章更新日期 2022-01-23 description 【可选】文章描述 Markdown工具发一篇文章 keywords 【可选】文章关键字 Markdown top_img 【可选】文章顶部图片 https://gitee.com/hz200/pic/raw/master/Weixin/v2-b8cfb751b887f3881da4f62ab2101d99_1440w.jpg categories 【可选】文章分类 https://gitee.com/hz200/pic/raw/master/Weixin/v2-b8cfb751b887f3881da4f62ab2101d99_1440w.jpg tags 【可选】文章标籤数据分析

背景特效

canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true  #设置是否每次点击都更换綵带
  mobile: false # false 手机端不显示 true 手机端显示

canvas_fluttering_ribbon:
  enable: true
  mobile: false # false 手机端不显示 true 手机端显示

添加音乐清单

hexo butterfly主题添加全局吸底APlayer_超逸の学习技术博客-CSDN博客

第一步

打开 themes\Butterfly\layout\includes\head.pug

结尾加一句

include ./third-party/aplayer.pug

第二步

然后在themes\Butterfly\layout\includes\third-party\里面新建一个文件叫 aplayer.pug ,内容如下

if theme.aplayer && theme.aplayer.enable
	.aplayer(data-id=theme.aplayer.id data-server=theme.aplayer.server data-type=theme.aplayer.type data-fixed=theme.aplayer.fixed data-mini=theme.aplayer.mini data-listFolded=theme.aplayer.listFolded data-order=theme.aplayer.order data-preload=theme.aplayer.preload)
	each item in theme.aplayer.css
		link(rel='stylesheet', href=item)
	each item in theme.aplayer.js
		script(src=item)

第三步

然后打开butterfly.yml(如果你没有启用的话,就打开source/_data/butterfly.yml) 加入以下内容

##侧边栏歌单
aplayer:
  enable: true
  js:
    - https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js
    - https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js
  css:
    - https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css
  id: 2693598459
  server: netease 
  type: playlist
  fixed: 'true'
  order: random
  preload: none
  listFolded: 'false'

解决与TOC冲突问题
然后重新生成就可以看到 aplayer了,这里的id是我的网易云歌单号,可以修改成别的.
但是浏览 Page 时会发现 aplayer 会和 TOC(怎么又是它) 的切换按钮重合
打开 themes\Butterfly\source\css_global\index.styl
修改第61行