演示页面

[imuncle]

Gitblog

一个简单的页面功能展示。

文章发表支持Markdown语法：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

表格绘制

header1	header2
content1	content2

图片插入

引用

A：嚯！厉害

B：哇！强啊

C：呀！服了

代码块

function test() {
    console.log("厉害厉害");
}

字体样式

加粗

斜体

斜体加粗

~~划去~~

分割线

---

超链接

百度一下，你就知道

列表

• hahah
• heihei
• hehe

1. lalala
2. lololo
3. aaaaa

MathJax公式显示

$$E = mc^2$$

$$c = \pm\sqrt{a^2 + b^2}$$

$$x > y$$

$$f(x) = x^2$$

$$\alpha = \sqrt{1-e^2}$$

$$(\sqrt{3x-1}+(1+x)^2)$$

$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

$$\dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

$$f(x) = \int_{-\infty}^\infty\hat f(\xi),e^{2 \pi i \xi x},d\xi$$

$$\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }$$

$$\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

$$\bigcap_1^n p \bigcup_1^k p$$

$$e^{i \pi} + 1 = 0$$

$$\left ( \frac{1}{2} \right )$$

$$x_{1,2}=\frac{-b\pm\sqrt{\color{Red}b^2-4ac}}{2a}$$

$${\color{Blue}x^2}+{\color{YellowOrange}2x}-{\color{OliveGreen}1}$$

$$\textstyle \sum_{k=1}^N k^2$$

其他

• 可设置文章标签（也就是菜单栏的内容，一篇文章可对应多个标签）
• 可文章点赞（见文章右下角），点赞需使用GitHub账号登录

[imuncle]

文章评论演示

与正文一样，也支持Markdown语法，正文能实现的功能，评论都能实现，同样也支持单条评论点赞（见右上角）

[imuncle]

评论编写支持预览，且比GitHub的预览功能更强大，支持公式的预览

比如$$a^2 + b^2 = c^2$$

[imuncle]

支持行内公式$E = mc^2$

[imuncle]

一页最多显示10条评论。在文章浏览页面，一页最多显示10篇文章

[WatsonShum]

感觉很好,以及搭起来来了

[hi1summer]

123123123

[RealKiro]

文本浏览可以改成正常预览样式吗？因为是MarkDown语法的话直接看排版整个网站看起来就不大协调了。。。

[imuncle]

@RealKiro 换成渲染过后的内容感觉不太美观，你可以修改gitblog.js里的一下代码：

Issue.prototype = {
        // ...
        show: function(request_url) {
            var issue = this;
            $.ajax({
                type: 'get',
                // 新增请求header，可以直接从github上直接获得渲染过后的html格式信息
                headers: {
                    Accept: 'application/vnd.github.squirrel-girl-preview, application/vnd.github.html+json, application/x-www-form-urlencoded',
                },
                url: request_url + 'page=' + self.options.page + '&per_page=10',
                success: function(data) {
                    if (self.options.q == undefined || self.options.q == null) {
                        if (data.length == 0) {
                            document.getElementById('issue-list').innerHTML = '这个人很勤快但这里什么都还没写~';
                            $('.footer').css('position', 'absolute');
                        } else {
                            issue.addItem(data);
                        }
                    } else {
                        if (data.items.length == 0) {
                            window.location.href = '404.html';
                        } else {
                            issue.addItem(data.items);
                        }
                        var html = document.getElementById('issue-list').innerHTML;
                        var newHtml;
                        if(self.options.q != '')
                            newHtml = html.replaceAll(self.options.q, '<font style="background-color:yellow;">' + self.options.q + '</font>');
                        else
                            newHtml = html;
                        document.getElementById('issue-list').innerHTML = newHtml;
                    }
                }
            });
        }

[RealKiro]

@RealKiro 换成渲染过后的内容感觉不太美观，你可以修改gitblog.js里的一下代码：

// 新增请求header，可以直接从github上直接获得渲染过后的html格式信息
                headers: {
                    Accept: 'application/vnd.github.squirrel-girl-preview, application/vnd.github.html+json, application/x-www-form-urlencoded';
                },

加了渲染只显示内容加载中，内容全部不显示了

ps:不太美观可能是字体太大盖过了标题？有没有可能缩放显示（毕竟只是预览）？（大雾

[imuncle]

@RealKiro 🉑 我抽空试试看，最近在忙毕业设计