1. 程式人生 > >自定義樣式,使用瀏覽器閱讀epub格式的電子書

自定義樣式,使用瀏覽器閱讀epub格式的電子書

直接 獲得 ans 更改 替換 html delay lastindex files

epub格式的電子式一般用專門的閱讀器打開,但是如果可以使用瀏覽器打開,就可以隨意更改css了,獲得極致的體驗效果。

比如可以自定義字體、行間距、背景色、字體大小、縮進等等...

當然,如果您不需要添加翻頁按鈕,請跳過第二、三步,直接進行第四步也可以。

效果如下:

技術分享圖片

一、使用解壓軟件將epub格式的電子書解壓到特定的文件夾,解壓後一般為html格式。

二、將文件重命名,以數字方式命名,並從1開始編號,可以使用bat批處理文檔,去除重命名後的括號,只留下數字,方面下一步翻頁時計算頁面。

1、首先把文件全部選中,然後右鍵,選擇重命名,這裏註意,直接將原來文件名刪除即可,不需要輸入任何字符(或者輸入你自己喜歡的名稱),之後,就被重命名為這種形式了 (1).html, (2).html, (3).html,.........2、將如下代碼拷貝到任一個記事本文件裏面,將記事本後綴改為.bat,註意一定是真正的後綴是.bat,有的人改完之後是.bat.txt,這樣是沒有效果的



1 @Echo Off&SetLocal ENABLEDELAYEDEXPANSION
2 FOR %%a in (*) do (
3 set "name=%%a"
4 set "name=!name: (=!"
5 set "name=!name:)=!"
6 ren "%%a" "!name!"
7 )
8 exit

3、雙擊執行批處理即可。你會發現你的名稱裏面的“(”,“)”都被去掉了。

三、在html頁面中添加“上一頁”,“下一頁”按鈕。

將代碼插入</body>之前,可以使用 notepad批量替換</body>字符。

代碼:

<script language="javascript">
<!--var strHref = window.location.href;
var pageName = strHref.slice(strHref.lastIndexOf("/")+1);
var pageNumber=parseInt(pageName.replace(".html",""));
function forward()
{var aa=pageNumber-1;window.location.href=aa+".html";}
function back()
{var
bb=pageNumber+1;window.location.href=bb+".html";} //--> </script> <div> <div class="fanye1"><input type="button" value="上一頁" onclick="forward()"></div> <div class="fanye2"><input type="button" value="下一頁" onclick="back()"></div> </div>

四、在瀏覽器頁面加入CSS樣式,獲得自定義的閱讀效果。

我的css是從https://ebooks.adelaide.edu.au/meta/titles/A.html這個在線書籍網站的頁面復制下來的,稍作更改,直接放到解壓後的書籍目錄下,如下圖的stylesheet.css。替換原來解壓後的main.css 文件。

技術分享圖片

我的stylesheet.css

https://files.cnblogs.com/files/ricksteves/stylesheet.css

(如需使用我的css,請右鍵以上鏈接目標另存為下載)

使用瀏覽器閱讀的好處是顯而易見的,英文書籍直接配合歐路詞典,劃詞取義。

最後是效果圖:

技術分享圖片

自定義樣式,使用瀏覽器閱讀epub格式的電子書