思源筆記折騰記錄-效果更好一點的發(fā)布

時間：2023-07-27 23:30:02 | 來源：網站運營

時間：2023-07-27 23:30:02 來源：網站運營

思源筆記折騰記錄-效果更好一點的發(fā)布：

一、前情提要：

我們在之前，通過引入express，實現(xiàn)了一個簡單（lou）的發(fā)布功能。

現(xiàn)在我們來實現(xiàn)一個復雜一點的。

二、為什么要用思源鼓搗網站

如果你隨便搜索一下cms的話，就會看到大概這樣的描述：

cms指的是內容管理系統(tǒng)，可以用來管理網站的各種文件、數(shù)據(jù)、乃至其他信息。

額，為什么說到這個呢。




其實是之前我不是自建了一個網站嗎，然后最開始用的是wordpress，之后鼓搗起來實在是有點麻煩。




就又換成了某個現(xiàn)成的建站系統(tǒng)。




然后發(fā)現(xiàn)哎呀好像還是不行，我寫很多的東西的，他的編輯器雖然功能豐富記界面美觀，但是寫東西實在是太慢了。




之后又把內容遷移到了我來，開始是用obsidian編輯之后，復制到我來發(fā)布，后來是用思源編輯之后， 用我來發(fā)布。




再后來就發(fā)現(xiàn)，哎呀還是不行，我來的收費政策又改了，本來就賺不到錢，也不可能花太多錢在這個上面的，而且主要是發(fā)現(xiàn)自己手上沒有數(shù)據(jù)，萬一那邊政策一個變化，文件不就等于丟了么。。。。。。




之后我在使用服務器上部署的思源的時候，突然想通了一件事情：




你看，我需要能夠方便舒適地在各種地方編輯網站內容，思源可以做的對吧。




我需要能夠上傳下載和管理附件，思源也可以做的對吧。




我需要有一個基本的靜態(tài)文件服務，思源也可以做的對吧。




我還需要它能夠方便地“原樣”在我自己的設備上和服務器上預覽，欸，巧了，思源剛好開源了，界面可以直接摸，基礎的樣式框架也不用自己寫了。




好耶~~~




額，其實最關鍵的是，現(xiàn)有的好多建站工具的文本編輯體驗實在是有點不習慣，還是用熟悉的編輯器鼓搗起來舒服.....




好了，閑話說完了，我們看一下之前的發(fā)布效果：




?

?




?




額，不是說這個。




是這個：




?

?




還記得有個人曾經說過，想要做到所見即所得的發(fā)布么......




這個完全不像好吧。

更好看一點的頁面模板

還記得思源本身有一個能夠按照原樣發(fā)布html的功能嗎？




?

?




嗯，就是這個。




它導出的html，是這樣的：




?

?




看著還可以哦，我們來看一下是怎么做到的：




?

?




上面是導出文件的目錄，嗯，所以我們只需要挨個導出文件，然后把他們發(fā)送給訪問者就行了對吧。




額，你如果這樣做其實也不是不行，不過我這里要用另外一種辦法，畢竟我是想要用它來做一個簡單的博客，那文檔樹、大綱、反向鏈接、 關系圖、導航欄我還是都想要的。




所以我們還是要自己寫一寫。

獲取塊dom

還記得我們之前用的是哪個接口來弄發(fā)布內容的嗎？




let 文檔內容 = await noobApi.核心api.exportPreview( { "id": 文檔數(shù)據(jù).id } )


這個接口獲取的DOM實際上對應的是這個界面：




?

?




額，其實也還挺好，我們復制到本站什么的也就基本上是這個樣子了。




但是說好的原樣的嗎，我們必須給整一個差不多原樣的出來。




這里需要的接口就是這個：




/api/getDoc


這個接口實際上就是獲取文檔DOM的接口。




這里我們先不糾結太多，直接按照這樣傳一下：




{id:<塊id>size:102400mode:0}


也就是把之前的渲染函數(shù)里獲取文檔內容的部分從這樣：




let 文檔內容 = await noobApi.核心api.exportPreview( { id: 文檔數(shù)據(jù).id, } )


改成這樣：




let 文檔內容 = await noobApi.核心api.getDoc( { id: 文檔數(shù)據(jù).id, mode:0, size:102400 } )


好，現(xiàn)在刷新一下在瀏覽器，就可以看到渲染結果了，它長這樣：




?

?




這是為什么呢？




我們可以打開思源的開發(fā)者工具，找到這個元素







?




然后刪掉它看看（右鍵里面就有刪除），后果美如畫：




?

?




這個時候我們再看看之前導出的html里的內容：




?

?




等于我們其實只拿到了一個沒頭沒尾的dom，光靠它，沒有那些js 和css代碼，顯然弄不出一個好看的導出頁面。




所以又悟了：只要把這些加到渲染結果里面就可以了。

創(chuàng)建一個渲染主題

這個時候就該停下來想想了，難道還像我們之前寫菜單的時候那樣，在js里面硬寫這些來搞嗎？




這樣怕是有點難受。




所以我們另外想一個辦法。




來看一下一些其他建站系統(tǒng)的主題：




這個是wordpress：




WordPress主題制作教程：主題文件解析-菜鳥筆記 (coonote.com)




index.php //主模板文件，所有主題都需要它style.css //樣式表文件，不可缺少，并包含主題的信息標題rtl.css //如果網站語言的文本方向是從右到左，則會自動包含從右到左的樣式表comments.php //評論模板。page.php //訪問者請求單個頁面時使用頁面模板，這些頁面是內置模板。home.php //默認情況下，主頁模板是首頁。如果您沒有將WordPress設置為使用靜態(tài)首頁，則此模板用于顯示最新帖子。header.php //頭部模板文件通常包含您網站的文檔類型，元信息，樣式表和腳本的鏈接以及其他數(shù)據(jù)。footer.php //公共底部模板sidebar.php //側邊欄模板single.php中 //日志模板。archive.php //歸檔模板，如果分類標簽頁沒有模板的話，會使用這個模板category.php //分類頁模板tag.php //標簽頁模板search.php中 //搜索結果模板用于顯示訪問者的搜索結果。404.php //當WordPress無法找到與訪問者請求匹配的帖子，頁面或其他內容時，將使用404模板functions.php //增加WordPress功能


這是hugo




如何創(chuàng)建自己的hugo主題 - 簡書 (jianshu.com)




所以我們也來搞一個發(fā)布主題系統(tǒng)，嘿嘿嘿。




其他的我們先不管，先來看看內容頁面，要實現(xiàn)一個內容頁面模板，無非就是弄一個模板，然后填內容進去，那么怎么實現(xiàn)內容模板呢？(小編寫不出東西來了都這樣)




這里我使用了一個非常殺馬特的辦法，我們要知道，electron的渲染進程雖然有node環(huán)境，但是它也有瀏覽器環(huán)境啊，所以我們就不去找各種奇怪的模板引擎了，我們直接這樣：




let 渲染結果 = new DOMParser().parseFromString(docTemplate, "text/html"); 渲染結果.getElementById('content').innerHTML = 文檔數(shù)據(jù).content


這個是什么意思呢，就是生成了一個document?對象，所以在這個的基礎上，我們可以使用js對這個對象進行各種操作，比如注入文檔內容，這樣也比較適合我們這種不大會寫程序的嘛，不用學更多新的東西了，由于文檔都是我們自己寫的，就算解析成html，應該也不會搞出什么奇怪的問題。




然后我們使用它，來實現(xiàn)一個渲染函數(shù), 這里模仿一下express對請求的處理，每一步對渲染結果做一點操作，最后就搞出來一個完整的頁面了，因為是像管道一樣流過這一堆函數(shù)，所以我們叫它管線渲染器吧：




//這個就隨便導出一個文檔就行了let 默認模板路徑 = 代碼片段路徑 + 'publishTemplate/default/doc.html'async function 渲染頁面內容(req,res,渲染結果){ let 塊id = req.params.blockID let 頁面數(shù)據(jù) = await 獲取數(shù)據(jù)(塊id) 渲染結果.getElementById('publish-content').innerHTML = 頁面數(shù)據(jù).content console.log(渲染結果) return 渲染結果}let 默認渲染管線 = 生成管線渲染器([渲染頁面內容],默認模板路徑)


而這個是生成管線渲染器的實現(xiàn)：




export function 生成管線渲染器(渲染管線, 模板路徑) { return async (req, res) => { //這里是告訴瀏覽器,我返回的是一個html頁面 res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" }); let 渲染結果 = new DOMParser().parseFromString(fs.readFileSync(模板路徑), "text/html"); //這里是一個循環(huán),不斷地把渲染結果和請求喂給它們,所以渲染管線中的每一步也都可以跳出去,直接響應請求 for await (let 渲染函數(shù) of 渲染管線) { try { //如果渲染結果沒有這個函數(shù)說明它不是數(shù)據(jù)了 if (!渲染結果.querySelector) { let tempdoc = new DOMParser().parseFromString( 渲染結果, "text/html" ); 渲染結果 = tempdoc; } if (渲染結果.完成) { return 渲染結果; } if (渲染函數(shù) instanceof Function) { 渲染結果 = (await 渲染函數(shù)(req, res, 渲染結果)) || ""; } let 文字渲染結果 = ""; try { 文字渲染結果 = 渲染結果.querySelector("body").innerHTML; } catch (e) { 文字渲染結果 = 渲染結果; let tempdoc = new DOMParser().parseFromString( 文字渲染結果, "text/html" ); 渲染結果 = tempdoc; console.error(e); } } catch (e) { console.error(e); continue; } } //如果有結果就返回結果 try { if (渲染結果) { res.end(渲染結果.documentElement.innerHTML) } else { res.end('渲染出錯,沒有有效的結果') } } catch (e) { 渲染結果 = null console.error(e) } //萬一我們這里對它還有其他操作呢 return 渲染結果 }}


獲取文檔內容就不用說了：




async function 獲取文檔內容(塊id) { let stmt = `select * from blocks where id in (select root_id from blocks where id = "${塊id}" )` let 文檔數(shù)據(jù) = (await noobApi.核心api.sql({ stmt: stmt }))[0] let 文檔內容 = await noobApi.核心api.getDoc( { id: 文檔數(shù)據(jù).id, mode: 0, size: 102400 } ) return 文檔內容}


這樣弄完之后，我們再訪問一下，發(fā)現(xiàn)效果還是這樣：




?

?




那問題出在哪里呢？




<link rel="stylesheet" type="text/css" id="themeDefaultStyle" href="stage/build/export/base.css?2.5.2" /> <link rel="stylesheet" type="text/css" id="themeStyle" href="appearance/themes/daylight/theme.css?2.5.2" />


這是導出的文件里的樣式表，我們的服務器從根目錄就直接跳轉到渲染頁面了，所以沒有給他們返回正確的文件。




所以我們改一下路由：




發(fā)布應用.use('/', async (req, res, next) => { console.log(req)//首頁重定向到幫助文檔首頁,你也可以自己選一個 req.url == '/' ? res.redirect('/20200812220555-lj3enxa') : null next()})發(fā)布應用.use('/:blockID', 默認渲染管線)


然后想辦法提供一下那兩個文件夾。




之前導出的頁面文件夾里面其實就有這些文件了，所以我們把它們也放到publishTemplate/default?里面，然后給它們做下靜態(tài)文件伺服就可以了：




發(fā)布應用.use('/appearance',express.static(代碼片段路徑 + 'publishTemplate/default/appearance'))發(fā)布應用.use('/stage',express.static(代碼片段路徑 + 'publishTemplate/default/stage'))


現(xiàn)在再訪問一下試試看：




?

?




bingo，完成。




這里使用的 express.static 方法的作用就是把某個文件夾當成靜態(tài)文件夾掛在路徑下面,所以用了它之后就可以訪問到對應的文件了.




雖然還有很多問題，但是基本的內容渲染出來了不是嗎？




這次就先這樣吧。




?




本文使用思源筆記寫作

本文使用椽承設計小工具配合同步

本文使用 文章同步助手 同步