折腾博客的UI设计是一种无穷无尽而又乐此不疲的折磨,你需要了解一点前端的东西比如CSS,html,JavaScript等等,这些都可以直接学会,或者不用学直接套用现成的。但对于美这个东西,每个人看法不一样,也没有标准答案,我只能选择一种形式固定下来不再折腾,更多的应该关注内容的生产。
像其他搞前端的程序猿,把博客弄成花里花俏的二次元空间,真的是辣眼睛。
md文件
_posts文件夹里面的每份md文件都可以渲染生成一篇文章,所以每次往_posts文件夹丢一个md文件就可以了。最好是分门别类保存几个模板md文件,要用的时候直接复制。
yaml表头
常用的yaml表头如下,它生成和控制了文章的特征和功能,比如你现在看到的这篇md文档渲染出来的网页,其实在md文档里面它的前面若干行是长这个样子的。
layout: post
title: [Handbook] 使用说明
subtitle: “这是一篇关于博客网站的使用说明,密码为2013050388”
date: 2017-08-09
header-img: “/img/music1.jpg”
catalog: true
categories: blog
tags:
- Hexo
- Blog
donate: true
password: 123456
注意冒号后面必须留有空格,header-img
控制了文章使用哪一张图片封面,donate
控制了文末是否出现打赏图标,password
控制文章是否需要访问权限 ,默认为false文章可以公开 。catalog
设为false的时候文章侧边栏不会出现目录区域。
经过后面调试,我又加入了mathjax: true
的选项,用于指示是否使用latex公式渲染文档,默认false加载速度会更快。
markdown语法
markdown(包括Rmarkdown)是可以混杂html标记语言和markdown语法的,也就是说你可以在md文档加入网页源代码里面那种\
hexo常用命令
基本上在git bash窗口只需要打3条命令,目前我遇到当本机的localhost端口4000被占用的时候,会在hexo s
后面加一个任意四位数字,
hexo g
hexo generate的缩写,渲染所有文件,生成所需要的网页文件
hexo s
hexo server的缩写,部署到本机上,可以通过本机浏览器预览
hexo d
hexo deploy的缩写,部署到github上,正式发布。如果你更新(增添)了md文档,没有运行hexo g
就直接hexo d
,那么将没有任何变化,因为hexo g
会生成新的public文件夹,而hexo d
负责将这个文件夹的内容推送到你的github账号上。
_config文件配置
根目录下的_config文件是整个博客网站的配置文件,至关重要。还没探明的字段如下:
description:
keyword:
anchorjs:
archive_type:
show_count:
skip_render:
titlecase:
你要修改,填写的地方见下面的标记。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225
| title: 三刃木正久化十 subtitle: 退休老干部 author: Leung ZhengHua language: zh-CN timezone: Asia/Shanghai url: https://liangzhenghua.github.io root: / permalink: :year/:month/:day/:title/ permalink_defaults: SEOTitle: 南有嘉鱼 | 南有樛木 # --> 给网页关闭按钮旁边起一个名字
description: "" keyword: "" header-img: img/header_img/home-bg-2-dark.png signature: false signature-img: img/signature/BeanTechSign-black.png RSS: true weibo_username: u/2161168802 zhihu_username: github_username: twitter_username: facebook_username: linkedin_username: anchorjs: true disqus_username: sidebar: true sidebar-about-description: "足迹:广东高州中学->暨南大学->中央财经大学->To be continued." sidebar-avatar: img/ironman-draw.png widgets: - featured-tags - short-about - recent-posts archive_type: 'monthly' show_count: true featured-tags: true featured-condition-size: 1 friends: [ { title: "李丰", href: "https://feng.li" },{ title: "徐宥", href: "https://blog.youxu.info/" },{ title: "谢益辉", href: "https://yihui.name/" },{ title: "陈素封", href: "http://www.cnfeat.com/" },{ title: "方匡南", href: "http://www.kuangnanfang.com/" } ] source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories test_dir: test code_dir: downloads/code i18n_dir: :lang skip_render: new_post_name: :title.md default_layout: post titlecase: false external_link: true filename_case: 0 render_drafts: false post_asset_folder: true relative_link: false future: true highlight: enable: true line_number: true auto_detect: true tab_replace: default_category: uncategorized category_map: tag_map: home_posts_tag: true date: 'relative' date_format: YYYY-MM-DD time_format: HH:mm:ss per_page: 10 pagination_dir: archives archive_generator: per_page: 10 yearly: true monthly: true daily: false markdown: render: html: true xhtmlOut: false breaks: true linkify: true typographer: true quotes: '“”‘’' theme: beantech sitemap: path: sitemap.xml deploy: type: git repository: https://github.com/liangzhenghua/liangzhenghua.github.io.git branch: master donate: true donate_message: '无以生计,卖文苟延' password: true math.mathjax: enable: true per_page: true math: engine: 'mathjax' mathjax: src: custom_mathjax_source config: katex: css: custom_css_source js: custom_js_source config:
|
七牛
考虑到图片和视频的大小,以后维护起来会很麻烦,提倡(必须的意思)文章内部使用外链,图片、PDF文件可以储存到七牛上。七牛是看到有几个人推荐的云存储服务,目前还比较怀疑,万一倒闭了呢。
评论
博客评论采用国外的disqus,如果你在中国大陆,可能连评论框都加载不出来。为什么不用国内的网易云跟帖之类的呢,大概是我们应该提倡科学上网。介绍大家使用赛风软件( https://psiphon.ca/zh/download.html ),我很满足墙内的世界,对年轻人中流行的VPN和翻墙软件(比如蓝灯)知之甚少,如果你有好的翻墙软件,请不要吝啬在评论区留下你的精华帖。
BUG
在网页外链之后另起一行画分割线会出现链接变成标题:
效果如下:
解决办法是空多一行。
1 2 3 4
| [猛击此处](https://baidu.com/) -----
|
猛击此处
bash窗口显示hexo command not found
因为修改了系统的path环境变量,找不到hexo的路径。可以重新添加C:\Users\Administrator\AppData\Roaming\npm\node_modules\hexo\bin
到环境变量path中,为了保险一点,建议在系统变量中的path中添加。然后需要关闭Git Bash窗口,重新打开即可。记住,一定要关闭,并重新打开命令窗口,否则配置不会生效。
公式显示问题
原来的博客主题不支持公式显示,加入mathjax插件的方法也不好用。最方便并且能够使用的方法猛击此处。当然,我已经把这种方法集成到主题里面了,添加了mathja.ejs文件和修改了post.ejs文件里加载mathjax的控制开关。
公式下划线转义问题
Mathjax和Markdown的渲染存在冲突,部分公式无法按照Latex语法渲染,参考方法猛击此处,修改后的文件夹路径在博客根目录\node_modules\kramed\lib\rules
公式测试
在Mathjax官网的doc文件找到了公式标号的办法,要在mathjax.ejs文件加入如下的js脚本:
1 2 3 4 5
| <script type="text/x-mathjax-config"> MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "AMS" } } }); </script>
|
在md文档中对公式进行编号使用
1 2 3 4 5
| $$ \begin{equation} E = mc^2 \end{equation} $$
|
显示效果如下:
【To be continued】